Firebase でのユーザーの認証

リージョン ID

REGION_ID は、アプリの作成時に選択したリージョンに基づいて Google が割り当てる省略形のコードです。一部のリージョン ID は、一般的に使用されている国や州のコードと類似しているように見える場合がありますが、このコードは国または州に対応するものではありません。2020 年 2 月以降に作成されたアプリの場合、REGION_ID.r は App Engine の URL に含まれています。この日付より前に作成されたアプリの場合、URL のリージョン ID は省略可能です。

詳しくは、リージョン ID をご覧ください。

Firebase Authentication を使用するウェブサービスにユーザーログインフローを追加します。

本ガイドのこのステップでは、ウェブサービスを更新してユーザーを認証し、認証後にユーザー固有の情報を取得して表示します。このステップでは、サイトリクエスト時間はユーザー固有ではなくグローバルのままであるので注意してください。

始める前に

このガイドでこれまでのステップをすべて完了している場合は、このセクションをスキップできます。それ以外の場合は、次のいずれかを実行してください。

Python 3 アプリのビルドから始めて、ここまでのステップをすべて完了します。
Google Cloud プロジェクトがすでにある場合は、次のようにウェブサービスのコピーをダウンロードして Firebase を追加すれば、これ以降の処理を続行できます。
1. Git を使用してサンプルアプリケーションリポジトリをダウンロードします。
```
git clone https://github.com/GoogleCloudPlatform/python-docs-samples
```
  または、zip 形式のサンプルをダウンロードして展開します。
2. 前のステップで用意したファイルのコピーがあるディレクトリに移動します。
```
cd python-docs-samples/appengine/standard_python3/building-an-app/building-an-app-2
```
3. Google Cloud プロジェクトとウェブサービスに Firebase を追加します。

Firebase 認証メソッドを追加する

Firebase は、ウェブサービスのログイン動作を構成するために使用できる JavaScript のメソッドと変数を提供します。このウェブサービスでは、ログアウト関数、ログイン UI を構成する変数、ユーザーがログインまたはログアウトするときの変更を制御する関数を追加します。

認証フローに必要な動作を追加するには、static/script.js ファイルの現在のイベントリスナーメソッドを次のコードで置き換えます。

window.addEventListener('load', function () {
  document.getElementById('sign-out').onclick = function () {
    firebase.auth().signOut();
  };

  // FirebaseUI config.
  var uiConfig = {
    signInSuccessUrl: '/',
    signInOptions: [
      // Comment out any lines corresponding to providers you did not check in
      // the Firebase console.
      firebase.auth.GoogleAuthProvider.PROVIDER_ID,
      firebase.auth.EmailAuthProvider.PROVIDER_ID,
      //firebase.auth.FacebookAuthProvider.PROVIDER_ID,
      //firebase.auth.TwitterAuthProvider.PROVIDER_ID,
      //firebase.auth.GithubAuthProvider.PROVIDER_ID,
      //firebase.auth.PhoneAuthProvider.PROVIDER_ID

    ],
    // Terms of service url.
    tosUrl: '<your-tos-url>'
  };

  firebase.auth().onAuthStateChanged(function (user) {
    if (user) {
      // User is signed in, so display the "sign out" button and login info.
      document.getElementById('sign-out').hidden = false;
      document.getElementById('login-info').hidden = false;
      console.log(`Signed in as ${user.displayName} (${user.email})`);
      user.getIdToken().then(function (token) {
        // Add the token to the browser's cookies. The server will then be
        // able to verify the token against the API.
        // SECURITY NOTE: As cookies can easily be modified, only put the
        // token (which is verified server-side) in a cookie; do not add other
        // user information.
        document.cookie = "token=" + token;
      });
    } else {
      // User is signed out.
      // Initialize the FirebaseUI Widget using Firebase.
      var ui = new firebaseui.auth.AuthUI(firebase.auth());
      // Show the Firebase login button.
      ui.start('#firebaseui-auth-container', uiConfig);
      // Update the login state indicators.
      document.getElementById('sign-out').hidden = true;
      document.getElementById('login-info').hidden = true;
      // Clear the token cookie.
      document.cookie = "token=";
    }
  }, function (error) {
    console.log(error);
    alert('Unable to log in: ' + error)
  });
});

ユーザーがログインまたはログアウトしたときに変更される内容を制御する onAuthStateChanged() メソッドは、ユーザーの ID トークンを Cookie として保存します。この ID トークンは、ユーザーがログインに成功したとき Firebase が自動的に生成する一意のトークンであり、ユーザーを認証するためにサーバーによって使用されます。

トークンを使用するためにウェブサービスを更新する

次に、一意の Firebase ID トークンを使用してサーバーでユーザーを検証してから、ユーザーのデータをユーザーに表示できるようにトークンを復号します。

Firebase ID トークンを使用するには:

main.py ファイルの root メソッドで、トークンを取得、検証、復号します。

from flask import Flask, render_template, request
from google.auth.transport import requests
from google.cloud import datastore
import google.oauth2.id_token

firebase_request_adapter = requests.Request()
@app.route("/")
def root():
    # Verify Firebase auth.
    id_token = request.cookies.get("token")
    error_message = None
    claims = None
    times = None

    if id_token:
        try:
            # Verify the token against the Firebase Auth API. This example
            # verifies the token on each page load. For improved performance,
            # some applications may wish to cache results in an encrypted
            # session store (see for instance
            # http://flask.pocoo.org/docs/1.0/quickstart/#sessions).
            claims = google.oauth2.id_token.verify_firebase_token(
                id_token, firebase_request_adapter
            )
        except ValueError as exc:
            # This will be raised if the token is expired or any other
            # verification checks fail.
            error_message = str(exc)

        # Record and fetch the recent times a logged-in user has accessed
        # the site. This is currently shared amongst all users, but will be
        # individualized in a following step.
        store_time(datetime.datetime.now(tz=datetime.timezone.utc))
        times = fetch_times(10)

    return render_template(
        "index.html", user_data=claims, error_message=error_message, times=times
    )

requirements.txt ファイルに、必要な依存関係がすべて含まれていることを確認します。
```
Flask==3.0.0
google-cloud-datastore==2.15.1
google-auth==2.17.3
requests==2.28.2
```

ウェブサービスのテスト

ウェブサービスを仮想環境でローカルに実行してテストします。

プロジェクトのメインディレクトリで次のコマンドを実行して、新しい依存関係をインストールし、ウェブサービスを実行します。ローカルテスト用に仮想環境を設定していない場合は、ウェブサービスのテストをご覧ください。
```
pip install -r requirements.txt
python main.py
```
ウェブサービスを表示するには、ウェブブラウザに次のアドレスを入力します。
```
http://localhost:8080
```

ウェブサービスのデプロイ

以上でローカルでの認証を設定できたので、ウェブサービスを App Engine に再デプロイできます。

プロジェクトのルートディレクトリから次のコマンドを実行します。ここで、app.yaml ファイルは次の場所にあります。

gcloud app deploy

すべてのトラフィックは、デプロイした新しいバージョンに自動的にルーティングされます。

バージョン管理の詳細については、サービスとバージョンの管理をご覧ください。

サービスの表示

ブラウザを速やかに起動して https://PROJECT_ID.REGION_ID.r.appspot.com でウェブサービスにアクセスするには、次のコマンドを実行します。

gcloud app browse

次のステップ

以上でユーザー認証の設定が完了しました。次は、ウェブサービスを更新して認証済みユーザーのデータをパーソナライズする方法を学習します。

Firebase を追加

データのパーソナライズ