ウェブサービスに Firebase を追加する

リージョン 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 プロジェクトがすでにある場合は、ウェブサービスのコピーをダウンロードすれば続行できます。

    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-1

Firebase を Google Cloud プロジェクトに追加する

ウェブサービスで Firebase Authentication 使用するには、Firebase を Google Cloud プロジェクトに追加し、認証設定を構成します。

  1. Firebase コンソールでプロジェクトの追加ツールを使用して、既存の Google Cloud プロジェクトに Firebase を追加します。

    既存の Google Cloud プロジェクトに関連付けられていない、別の名前の Firebase アカウントを使用することもできます。

  2. Firebase コンソールで認証ログイン プロバイダを有効にします。このウェブサービス用に、メール / パスワードと Google ログイン プロバイダを有効にします。

    1. [Build] > [Authentication] > [ログイン方法] をクリックします。

    2. [ログイン プロバイダ] で、[メール / パスワード] を選択します。

    3. [有効にする] ボタンを切り替えてメール / パスワード認証を使用し、[保存] をクリックします。

  3. Firebase で適切に認証を行うには、ドメインで OAuth リダイレクトが承認されている必要があります。ドメインを承認するには:

    1. [Build] > [Authentication] > [Settings] を選択します。

    2. [設定] ページの [承認済みドメイン] で、[ドメインの追加] をクリックします。

    3. App Engine でアプリのドメインを入力します（http:// 接頭辞は除く）。

      PROJECT_ID. REGION_ID.r.appspot.com ここで PROJECT_ID は Google Cloud プロジェクトの ID です。

ウェブサービスに Firebase を追加する

ウェブサービスに Firebase を追加するには、Firebase プロジェクトのカスタムコード スニペット、JavaScript、CSS ファイルをウェブサービスにコピーします。

  1. Firebase コンソールに移動し、プロジェクトを選択します。

  2. プロジェクトの概要ページで、[アプリに Firebase を追加して利用を開始しましょう] の下に表示される [ウェブ] を選択します。プロジェクトにすでにアプリが追加されている場合、このテキストが表示されないことがあります。代わりに、既存のアプリの [プロジェクトの概要] > [プロジェクトの設定] > [全般] ページに移動し、下にスクロールして、[アプリを追加] を選択します。

  3. アプリが登録されると、カスタマイズされたコード スニペットが表示されます。スニペットの内容をコピーします。このコード スニペットを後でもう一度表示するには、Firebase アプリの [プロジェクト設定] ページに移動します。

  4. 次の手順で templates/index.html ファイルを更新します。

    1. <head> タグに次の行を追加します。

      <script src="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.css" />

    2. カスタマイズ済みのコード スニペットを <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>

    3. 上記のスニペットの TODO を以下のスクリプトタグに置き換えて、Firebase の Authentication コンポーネントを有効にします。

       <script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-auth.js"></script>

      これらのスクリプト アドレスは Firebase UI for Web ドキュメントに記載されています。

    4. 本文の残りの部分を次のコードに置き換えます。これは、このガイドの後半で認証済みのユーザーデータを表示するために使用します。

      <div id="firebaseui-auth-container"></div>

<button id="sign-out" hidden=true>Sign Out</button>

<div id="login-info" hidden=true>
  <h2>Login info:</h2>
  {% if user_data %}
    <dl>
      <dt>Name</dt><dd>{{ user_data['name'] }}</dd>
      <dt>Email</dt><dd>{{ user_data['email'] }}</dd>
      <dt>Last 10 visits</dt><dd>
	{% for time in times %}
          <p>{{ time['timestamp'] }}</p>
        {% endfor %} </dd>
    </dl>
  {% elif error_message %}
    <p>Error: {{ error_message }}</p>
  {% endif %}
</div>

次のステップ

以上で Google Cloud プロジェクトとウェブサービスに Firebase が追加されたので、ウェブサービスにコードを追加してユーザーを認証できるようにする準備ができました。

前へ
データを処理する
次へ
ユーザーの認証