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

  • このエントリーをはてなブックマークに追加
  • LINEで送る
この記事は 2019年1月31日 に書かれたものです

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

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

Authenticationでログイン

コンソール上の設定

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

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

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

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

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

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

認証処理をJSで書く

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

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

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

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
(登録された内容は適当なタイミングで削除します)

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

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

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

その他

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

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

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

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

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

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

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

続き

参考ページ





このブログを応援する

お寄せいただいたお気持ちは全額サーバ代や次の記事を執筆するための原資として活用させていただいております。この記事が参考になった場合などぜひご検討ください。

PayPal(ペイパル)
PayPalで300円支払う
※金額は任意で変更できます。
※100円でも泣いて喜びますw
※住所の入力欄が現れた場合は「no needed」を選択ください
これまでのご協力者さま
- Sponsored Link -

旧コメント欄(表示のみ)

※こちらのコメント欄は以前稼働していたものです。現在は新たに書き込むことはできません。ご感想やご質問は記事の下にあるコメント欄をご利用ください。
  1. k より:

    done.htmlから別のページに移動させるにはどうしたらいいのでしょうか?

  2. 勝部 麻季人 より:

    aタグなどで移動できますよ。
    何かうまく行かないのでしょうか?

  3. より:

    自動的に別ページに行くようにしたいんですが、javascriptでリダイレクトしようとしても移動しません。

  4. 勝部 麻季人 より:

    なるほど。location.hrefか何かで移動させようとしているのでしょうか?

    これだけだと答えようがないので、具体的にどういったコードを書いて、どううまく行かないのか(エラーメッセージまたは挙動)、実行した環境などを教えてください。

  5. 匿名 より:

    このパターンだとメールアドレスの所有者の確認ができないですよね?
    「その2」の方のようにアドレスの所有者の確認ができるようにする方法はあるのでしょうか?

  6. 勝部 麻季人 より:

    「その3」をご覧ください。こちらでメールアドレスの存在確認後にログインが可能になります。
    https://blog.katsubemakito.net/firebase/firebase-authentication-email-web3

  7. 匿名 より:

    その3があったのですね。ありがとうございました。全体的にすごく参考になりました

  8. 匿名 より:

    新規ユーザーの登録を制限することはできるのでしょうか?

    1. 勝部 麻季人 より:

      匿名さん
      ブログをご覧いただきありがとうございます。

      ここでは「firebaseui-web」を使っているため新規登録などのフローに進めてしまいますが、「firebaseui-web」を使わずご自身でログインだけを行うフォームを作成されれば可能だと思います。ログインを行うコードについて公式ドキュメントを参照くださいませ。
      https://firebase.google.com/docs/auth/web/password-auth

  9. kanami より:

    初めまして。
    私の環境からですとコンソール上に「Web設定」のボタンが表示されません。

    1. 勝部 麻季人 より:

      kanamiさん
      ご覧いただきありがとうございます。

      確認したところ、Firebaseの仕様が変更になったようですね。記事の方はまた手が空いたときにでも更新したいと思いますが、以下のページの「ウェブアプリ用の設定スニペットを入手する」の説明に沿って実行してみてください。最終的にこのページのサンプルにあるようなコードが入手できます。
      https://support.google.com/firebase/answer/7015592?authuser=0

      もしくは最近のFirebaseのHostingには最初から設定ファイルが用意してあるようなので以下のように書くだけでも初期化されるようですね。

      <script src="/__/firebase/init.js"></script>