このページは Cloud Translation API によって翻訳されました。

ウェブサービスに 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 プロジェクトに追加し、認証設定を構成します。

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

既存の Google Cloud プロジェクトに関連付けられていない、別の名前の Firebase アカウントを使用することもできます。
Firebase コンソールで認証ログインプロバイダを有効にします。このウェブサービス用に、メール / パスワードと Google ログインプロバイダを有効にします。
1. [Build] > [Authentication] > [ログイン方法] をクリックします。
2. [ログインプロバイダ] の [メール / パスワード] にカーソルを置き、鉛筆アイコンをクリックします。
3. [有効にする] ボタンを切り替えて、[メール / パスワード] 認証を使用します。
4. プロバイダを有効にした後、[保存] をクリックします。
5. ログインプロバイダの Google に対して同じ処理を行います。
  ヒント: 他のプロバイダを有効にする方法の詳細については、Firebase の Facebook、Twitter、GitHub のガイドの「始める前に」をご覧ください。
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 ファイルをウェブサービスにコピーします。

Firebase コンソールに移動し、プロジェクトを選択します。
プロジェクトの概要ページで、[アプリに Firebase を追加して利用を開始しましょう] の下に表示される [ウェブ] を選択します。プロジェクトにすでにアプリが追加されている場合、このテキストが表示されないことがあります。代わりに、既存のアプリの [プロジェクトの概要] > [プロジェクトの設定] > [全般] ページに移動し、下にスクロールし、[アプリを追加]を選択します。
アプリが登録されると、カスタマイズされたコードスニペットが表示されます。スニペットの内容をコピーします。このコードスニペットを後でもう一度表示するには、Firebase アプリの [プロジェクト設定] ページに移動します。

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

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

カスタマイズ済みのコードスニペットを <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 ドキュメントに記載されています。

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

<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 が追加されたので、ウェブサービスにコードを追加してユーザーを認証できるようにする準備ができました。

データを処理する

ユーザーの認証