Firebase Authenticationの簡単な使い方

Firebase Authenticationの簡単な使い方

FirebaseのAuthenticationを利用して、ユーザー登録とログイン機能を実装する簡単なサンプルコード

ローカル環境

  • OS  windows10 pro
  • node V10.16.3
  • npm 6.9.0
  • firebase CLI 7.11.0

※firebase CLIのインストールはこちら

Authentication作成

今回は、メールアドレス認証を設定します。

左にあるAuthenticationをクリックして下さい

「ログイン方法を設定」をクリックします。

メール/パスワードをクリックします。

有効にするに設定し、「保存」ボタンをクリックします。

※パスワードなしでログインは有効にしてません。

有効になっていることを確認します。

新規登録処理

設定が終わったので、メールでの新規登録を行うためのサンプルコードを作成します。

下記のコードで、firebase initで作成したpublic配下のindex.htmlを編集します。

※web app’s Firebase configurationの追加方法はこちら

実行します。

ブラウザから http://localhost:5000 にアクセスすると、下記の画面が表示され、メールアドレスに適当なメールアドレスを入力し、パスワードを設定後に、「新規登録」ボタンをクリックすれば、新規登録が行われます。

Firebase側を確認すると、さきほど登録したメールアドレスが登録されていることが確認できます。

次に、先程登録したメールアドレスでログインしてみます。

登録したメールアドレスを入力し、ログインボタンをクリックすると、ログイン成功のアラートが表示されます。