[Firebase] Authenticationでメール認証 (Web編) その1

Firebaseの機能を順次試していきたいと思います。 FirebaseではAuthenticationを利用することで様々な認証を用いることができます。今回実装するメールアドレスの他に各種SNSやSMSなどにも対応可能です。Webの他にiOSやAndroidなどにも導入可能。

今回は単純なログイン機能をWebページに実装してみます。 メールアドレスとパスワードを入力すると登録やログインできるようになります。

Authenticationでログイン

コンソール上の設定

Firebaseのコンソールにログインし、新しくプロジェクトを作成するか、既存のプロジェクトを選択します。

プロジェクトのダッシュボードに移動したら、早速Authenticationの設定を進めていきます。 まずは左側のメニューの「Authentication」をクリックし、右ペインが切り替わったら「ログイン方法」タブをクリック。

「メール/パスワード」の行をクリックし、「有効にする」のスライダーをクリック。 その後「保存」ボタンをクリック。

この後JSを書き始めるのですが、その前にプロジェクトの情報を取得します。プロジェクトのコンソール右上にある「ウェブ設定」ボタンをクリック。

JSの設定部分の雛形が表示されますので、これをコピーします。

これでブラウザでのFirebaseの必須の設定はひとまずこれで完了です。 簡単でしたねw

認証処理をJSで書く

今回は認証部部のUIがまるっとセットになったfirebaseui-webを使っていきます。 github.com

ここでは次の3つのファイルを作成しています。

config.js
前項でコピペしたコンソールの内容を保存します。
login.html
ログイン画面のHTML
done.html
ログイン完了画面のHTML

config.js

コンソールでコピーしたJavaScript部分をコピペしてください。このページはそのままでは動きませんのでご注意を。

//----------------------------------------------
// Firebaseの初期化
//----------------------------------------------
// コンソールの内容をそのままコピペ
var config = {
  apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  authDomain: "test-f76bc.firebaseapp.com",
  databaseURL: "https://test-f76bc.firebaseio.com",
  projectId: "test-f76bc",
  storageBucket: "test-f76bc.appspot.com",
  messagingSenderId: "0000000000000"
};
firebase.initializeApp(config);

login.html

実際のログイン処理を記述しますが、ほとんどはライブラリ側で吸収してくれるので、設定をJSONで記述し所定のメソッドにわたすだけです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello Firebase Auth</title>
  <link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.css" />
  <style>h1{text-align: center;}</style>
</head>
<body>
  <h1>Hello Firebase Auth</h1>
  <div id="firebaseui-auth-container"></div>

  <script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/ui/3.5.2/firebase-ui-auth__ja.js"></script>
  <script src="./config.js"></script>
  <script>
    //----------------------------------------------
    // Firebase UIの設定
    //----------------------------------------------
    var uiConfig = {
        // ログイン完了時のリダイレクト先
        signInSuccessUrl: '/done.html',

        // 利用する認証機能
        signInOptions: [
          firebase.auth.EmailAuthProvider.PROVIDER_ID  //メール認証
        ],

        // 利用規約のURL(任意で設定)
        tosUrl: 'http://example.com/kiyaku/',
        // プライバシーポリシーのURL(任意で設定)
        privacyPolicyUrl: 'http://example.com/privacy'
      };

      var ui = new firebaseui.auth.AuthUI(firebase.auth());
      ui.start('#firebaseui-auth-container', uiConfig);
</script>
</body>
</html>

done.html

ログインが完了するとlogin.htmlで指定したこの画面に遷移します。ここではAuthenticationの機能でログイン済みユーザーかどうかを判定し、メッセージの出し分けを行っています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello Firebase Auth</title>
</head>
<body>
  <h1>...Please wait</h1>
  <div id="info"></div>

  <script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-auth.js"></script>
  <script src="./config.js"></script>
  <script>
    firebase.auth().onAuthStateChanged( (user) => {
      let h1   = document.querySelector('h1');
      let info = document.querySelector('#info');

      if(user) {
        h1.innerText   = 'Login Complete!';
        info.innerHTML = `${user.displayName}さんがログインしました`;
        console.log(user);
      }
      else {
        h1.innerText = 'Not Login';
      }
    });
  </script>
</body>
</html>

実行結果

クリックするとサンプルコードが実行できます。お試しに登録やログインなどどうぞ。悪いことはしないでねw (登録された内容は適当なタイミングで削除します) s3-us-west-2.amazonaws.com

実行するとわかりますが、入力内容やセッション状態によって以下のような挙動になります。

  • 未登録のメールアドレスが入力された場合は自動的に「新規登録」
  • 登録済みのメールアドレスが入力された場合は「ログイン」
  • 過去にログイン済みのセッションが残っている場合は「アカウント選択画面」

現在の設定ではメールアドレスの確認は行われません。また確認メールなどの送信もされません。ユーザーが入力した内容を全力で信じる形になるので、予め用意したメールアドレスのリストを管理者が管理画面から登録する際などに利用するようなイメージでしょうか。

その他

登録済みのアカウントを確認する

コンソールから確認することができます。Authenticationの「ユーザー」タブをクリックしてください。

なおユーザーが入力したパスワードはハッシュ化されて保存されていることもある、管理者であろうと見ることはできません。もし忘れてしまった場合は「再設定」を行うことになります。

アカウントを手動で追加する

同じくコンソールから、任意のメールアドレスを追加できます。

アカウントを停止/削除/パスワード再設定

各ユーザーの列にマウスカーソルを乗せるとメニュー「」が右側に出現するので、クリックすると停止(BAN)や削除するためのメニューが表示されます。

続き

blog.katsubemakito.net

参考ページ

firebase.google.com firebase.google.com firebase.google.com firebase.google.com github.com