ウェブサービスへの Firebase の追加

<<_local_variables.html>>

Firebase を GCP プロジェクトに追加し、認証設定を構成して、Firebase をウェブサービスに追加します。

Firebase をウェブサービスに追加すると、ユーザーを認証して、各ユーザーにパーソナライズされたエクスペリエンスを提供できます。

始める前に

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

  • Python 3.7 アプリのビルドから始めて、これまでのステップをすべて完了します。

  • GCP プロジェクトがすでにある場合は、ウェブサービスのコピーをダウンロードすれば続行できます。

    1. Git を使用してサンプル アプリケーション リポジトリをダウンロードします。

      git clone https://github.com/GoogleCloudPlatform/python-docs-samples
      

      または、zip 形式のサンプルをダウンロードして展開します。

    2. 前のステップで用意したファイルのコピーがあるディレクトリに移動します。

      cd python-docs-samples/appengine/standard_python37/building-an-app/building-an-app-1
      

GCP プロジェクトへの Firebase の追加

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

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

    請求が有効になっている GCP プロジェクトに Firebase を追加する場合、Firebase の Blaze 料金プランを承認する必要があります。ただし、ウェブ認証は Firebase では無料で含まれています。

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

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

    2. [ログイン プロバイダ] の [メール / パスワード] にカーソルを置き、鉛筆アイコンをクリックします。

      プロバイダにログイン

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

      有効ボタンの切り替え

    4. プロバイダを有効にした後、[保存] をクリックします。

    5. ログイン プロバイダの Google に対して同じ処理を行います。

      ヒント: 他のプロバイダを有効にする方法の詳細については、Firebase の FacebookTwitterGitHub のガイドの「始める前に」をご覧ください。

  3. Firebase で適切に認証を行うには、ドメインで OAuth リダイレクトが承認されている必要があります。ドメインを承認するには、[ログイン方法] ページで [承認済みドメイン] までスクロールして [ドメインの追加] をクリックし、http:// プレフィックスを除いた App Engine アプリのドメインを入力します。

    GCP_PROJECT_ID.appspot.com
    ここで、GCP_PROJECT_ID は GCP プロジェクトの ID です。

ウェブサービスへの Firebase の追加

以上で Firebase が GCP プロジェクトで有効になったので、Firebase プロジェクトのカスタムコード スニペット、Firebase JavaScript、CSS ファイルを使用して Firebase をウェブサービスに追加できます。

Firebase をウェブサービスに追加するには、次の手順を実行します。

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

  2. プロジェクトの概要ページで [ウェブアプリに Firebase を追加] をクリックして、カスタマイズ済みのコード スニペットを表示します。

  3. [コピー] をクリックします。

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

    1. templates/index.html ファイルの <head> タグに、カスタマイズ済みのコード スニペットを追加します。たとえば、次の疑似スニペットのようなカスタムコードを使用します。

      <!-- MOCK SNIPPET: DO NOT COPY -->
      <script src="https://www.gstatic.com/firebasejs/5.2.0/firebase.js"></script>
      <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>
      
    2. templates/index.html ファイルの <head> タグに以下の行を追加して、Firebase の JavaScript ファイルと CSS ファイルをインポートします。

      <script src="https://cdn.firebase.com/libs/firebaseui/2.6.2/firebaseui.js"></script>
      <link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/2.6.2/firebaseui.css">
    3. index.html ファイルの現在の本文を次のコードに置き換えます。このコードは、このガイドの後半で、認証済みのユーザーデータを表示するために使用します。

      <h1>Datastore and Firebase Auth Example</h1>
      
      <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>

次のステップ

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

このページは役立ちましたか?評価をお願いいたします。

フィードバックを送信...

Python 3 の App Engine スタンダード環境