Python 3.8が一般提供になりました。

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

リージョン ID

REGION_ID は、アプリの作成時に選択したリージョンに基づいて Google が割り当てる省略形のコードです。一部のリージョン ID は、一般的に使用されている国および州のコードと類似しているように見える場合がありますが、このコードは国または州に対応するものではありません。既存のアプリでは省略可能ですが、間もなく、新しいアプリのすべてにおいて App Engine の URL に REGION_ID.r を含めることが必須となる予定です。

移行がスムーズに行われるように、リージョン ID を使用するよう App Engine を徐々に更新しています。Google Cloud プロジェクトがまだ更新されていない場合、アプリにリージョン ID が表示されません。ID は既存のアプリでは省略可能なため、リージョン ID が既存のアプリで使用可能になったときに、URL を更新する、またはその他の変更を行う必要はありません。

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

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

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

始める前に

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

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

  • 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 を Cloud プロジェクトに追加する

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

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

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

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

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

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

      プロバイダにログイン

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

      有効ボタンの切り替え

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

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

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

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

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

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

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

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

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

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

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

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

      <script src="https://cdn.firebase.com/libs/firebaseui/4.5.0/firebaseui.js"></script>
      <link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/4.5.0/firebaseui.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. 本文の残りの部分を次のコードに置き換えます。このコードは、このガイドの後半で、認証済みのユーザーデータを表示するために使用します。

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

次の手順

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