今まではFirebaseの個別の認証プロバイダでログインしていましたが、今回はここまで対応した全プロバイダのいずれかでログインできる仕組みを作ってみます。
以下の画面のように複数の認証方法から自由に選択することができます。
続きを読む
今まではFirebaseの個別の認証プロバイダでログインしていましたが、今回はここまで対応した全プロバイダのいずれかでログインできる仕組みを作ってみます。
以下の画面のように複数の認証方法から自由に選択することができます。
続きを読む
第1回はメールアドレスとパスワードによる認証、第2回はメールアドレス宛にメールを送信し文中のURLをクリックするとログイン状態になる機能の実装に挑戦しました。
今回は次のような仕組みに挑戦してみます。
前回はメールアドレスとパスワードによる認証でしたが、今回は入力されたメールアドレスにメールを送信し届いたURLをクリックしたらログイン状態になる「メールリンク認証」の実装をします。
続きを読む
Firebaseの機能を順次試していきたいと思います。
FirebaseではAuthentication
を利用することで様々な認証を用いることができます。今回実装するメールアドレスの他に各種SNSやSMSなどにも対応可能です。Webの他にiOSやAndroidなどにも導入可能。
今回は単純なログイン機能をWebページに実装してみます。
メールアドレスとパスワードを入力すると登録やログインできるようになります。
Firebaseのコンソールにログインし、新しくプロジェクトを作成するか、既存のプロジェクトを選択します。
プロジェクトのダッシュボードに移動したら、早速Authentication
の設定を進めていきます。
まずは左側のメニューの「Authentication」をクリックし、右ペインが切り替わったら「ログイン方法」タブをクリック。
「メール/パスワード」の行をクリックし、「有効にする」のスライダーをクリック。
その後「保存」ボタンをクリック。
この後JSを書き始めるのですが、その前にプロジェクトの情報を取得します。プロジェクトのコンソール右上にある「ウェブ設定」ボタンをクリック。
JSの設定部分の雛形が表示されますので、これをコピーします。
これでブラウザでのFirebaseの必須の設定はひとまずこれで完了です。
簡単でしたねw
今回は認証部部のUIがまるっとセットになったfirebaseui-web
を使っていきます。
ここでは次の3つのファイルを作成しています。