リージョン ID
REGION_ID
は、アプリの作成時に選択したリージョンに基づいて Google が割り当てる省略形のコードです。一部のリージョン ID は、一般的に使用されている国や州のコードと類似しているように見える場合がありますが、このコードは国または州に対応するものではありません。2020 年 2 月以降に作成されたアプリの場合、REGION_ID.r
は App Engine の URL に含まれています。この日付より前に作成されたアプリの場合、URL のリージョン ID は省略可能です。
詳しくは、リージョン ID をご覧ください。
Firebase を Google Cloud プロジェクトに追加し、認証設定を構成してから、Firebase をウェブサービスに追加します。
Firebase をウェブサービスに追加すると、ユーザーを認証して、各ユーザーにパーソナライズされたエクスペリエンスを提供できます。
始める前に
このガイドでこれまでのステップをすべて完了している場合は、このセクションをスキップできます。それ以外の場合は、次のいずれかを実行してください。
Python 3 アプリのビルドから始めて、ここまでのステップをすべて完了します。
Google Cloud プロジェクトがすでにある場合は、ウェブサービスのコピーをダウンロードすれば続行できます。
Git を使用してサンプル アプリケーション リポジトリをダウンロードします。
git clone https://github.com/GoogleCloudPlatform/python-docs-samples
または、zip 形式のサンプルをダウンロードして展開します。
前のステップで用意したファイルのコピーがあるディレクトリに移動します。
cd python-docs-samples/appengine/standard_python3/building-an-app/building-an-app-1
Firebase を Google Cloud プロジェクトに追加する
ウェブサービスで Firebase Authentication 使用するには、Firebase を Google Cloud プロジェクトに追加し、認証設定を構成します。
Firebase コンソールでプロジェクトの追加ツールを使用して、既存の Google Cloud プロジェクトに Firebase を追加します。
既存の Google Cloud プロジェクトに関連付けられていない、別の名前の Firebase アカウントを使用することもできます。
Firebase コンソールで認証ログイン プロバイダを有効にします。このウェブサービス用に、メール / パスワードと Google ログイン プロバイダを有効にします。
[Build] > [Authentication] > [ログイン方法] をクリックします。
[ログイン プロバイダ] の [メール / パスワード] にカーソルを置き、鉛筆アイコンをクリックします。
[有効にする] ボタンを切り替えて、[メール / パスワード] 認証を使用します。
プロバイダを有効にした後、[保存] をクリックします。
ログイン プロバイダの Google に対して同じ処理を行います。
Firebase で適切に認証を行うには、ドメインで OAuth リダイレクトが承認されている必要があります。ドメインを承認するには:
[Build] > [Authentication] > [Settings] を選択します。
[設定] ページの [承認済みドメイン] で、[ドメインの追加] をクリックします。
App Engine でアプリのドメインを入力します(
http://
接頭辞は除く)。PROJECT_ID
.REGION_ID.r.appspot.com
ここでPROJECT_ID
は Google Cloud プロジェクトの ID です。
ウェブサービスに Firebase を追加する
ウェブサービスに Firebase を追加するには、Firebase プロジェクトのカスタムコード スニペット、JavaScript、CSS ファイルをウェブサービスにコピーします。
Firebase コンソールに移動し、プロジェクトを選択します。
プロジェクトの概要ページで、[アプリに Firebase を追加して利用を開始しましょう] の下に表示される [ウェブ] を選択します。プロジェクトにすでにアプリが追加されている場合、このテキストが表示されないことがあります。代わりに、既存のアプリの [プロジェクトの概要] > [プロジェクトの設定] > [全般] ページに移動し、下にスクロールして、[アプリを追加] を選択します。
アプリが登録されると、カスタマイズされたコード スニペットが表示されます。スニペットの内容をコピーします。このコード スニペットを後でもう一度表示するには、Firebase アプリの [プロジェクト設定] ページに移動します。
次の手順で
templates/index.html
ファイルを更新します。次の行を
<head>
タグに追加します。カスタマイズ済みのコード スニペットを
<body>
タグに追加します。このチュートリアルでは、Firebase サービスの例が
templates/index.html
の唯一のコンテンツであるため、本文の先頭にコードを追加できます。本番環境では、Firebase サービスを使用する前に、コード スニペットを本文の下部に追加することをおすすめします。カスタムコードは次の疑似スニペットのようになります。
<!-- MOCK SNIPPET: DO NOT COPY --> <!-- The core Firebase JS SDK is always required and must be listed first --> <script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-app.js"></script> <!-- TODO: Add SDKs for Firebase products that you want to use https://firebase.google.com/docs/web/setup#available-libraries --> <script> var config = { apiKey: "<API_KEY>", authDomain: "<PROJECT_ID>.firebaseapp.com", databaseURL: "https://<DATABASE_NAME>.firebaseio.com", projectId: "<PROJECT_ID>", storageBucket: "<BUCKET>.appspot.com", messagingSenderId: "<SENDER_ID>", }; firebase.initializeApp(config); </script>
上記のスニペットの TODO を以下のスクリプトタグに置き換えて、Firebase の Authentication コンポーネントを有効にします。
<script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-auth.js"></script>
これらのスクリプト アドレスは Firebase UI for Web ドキュメントに記載されています。
本文の残りの部分を次のコードに置き換えます。これは、このガイドの後半で、認証済みのユーザーデータを表示するために使用します。
次のステップ
以上で Google Cloud プロジェクトとウェブサービスに Firebase が追加されたので、ウェブサービスにコードを追加してユーザーを認証できるようにする準備ができました。