将 Firebase 添加到 Web 服务

区域 ID

REGION_ID 是 Google 根据您在创建应用时选择的区域分配的缩写代码。此代码不对应于国家/地区或省，尽管某些区域 ID 可能类似于常用国家/地区代码和省代码。对于 2020 年 2 月以后创建的应用，REGION_ID.r 包含在 App Engine 网址中。对于在此日期之前创建的现有应用，网址中的区域 ID 是可选的。

详细了解区域 ID。

将 Firebase 添加至您的 Google Cloud 项目，配置您的身份验证设置，然后将 Firebase 添加到您的 Web 服务中。

通过将 Firebase 添加到 Web 服务，您可以对用户进行身份验证，以便为每个用户提供个性化体验。

准备工作

如果您已完成本指南中前面的所有步骤，请跳过此部分。否则，请完成以下任一操作：

从构建 Python 3 应用开始，完成这一步之前的所有步骤。
如果您已有 Google Cloud 项目，则可以下载 Web 服务的副本继续操作：
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 身份验证用于您的 Web 服务，请将 Firebase 添加到您的 Google Cloud 项目并配置身份验证设置。

使用 Firebase 控制台中的添加项目工具将 Firebase 添加到现有 Google Cloud 项目中。

您还可以选择使用与现有 Google Cloud 项目无关的其他名称的 Firebase 账号。
在 Firebase 控制台中启用身份验证登录提供商。对于此 Web 服务，您将启用电子邮件地址/密码和 Google 登录提供商：
1. 点击构建 > 身份验证 > 登录方法。
2. 在登录提供商下，将光标悬停在电子邮件地址/密码提供商上，然后点击铅笔图标。
3. 切换启用按钮，以使用电子邮件/密码身份验证。
4. 启用该提供商后，点击保存。
5. 针对登录提供商 Google 执行相同的操作。
  
  提示：如需详细了解如何启用其他提供商，请参阅 Firebase 上的 Facebook、Twitter 和 GitHub 指南的“准备工作”部分。
要使 Firebase 正确进行身份验证，您的网域需要获得进行 OAuth 重定向的权限。如需为您的网域授权，请执行以下操作：
1. 选择构建 > 身份验证 > 设置。
2. 在设置页面上的已获授权的网域下，点击添加网域。
3. 在 App Engine 上输入您的应用的网域，不包括 http:// 前缀：
  
  PROJECT_ID.REGION_ID.r.appspot.com，其中 PROJECT_ID 是您的 Google Cloud 项目的 ID。

将 Firebase 添加到 Web 服务

如需将 Firebase 添加到您的 Web 服务，请将您的 Firebase 项目的自定义代码段、JavaScript 和 CSS 文件复制到您的 Web 服务中：

转至 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> 标记。

在本教程中，您可以将代码添加到正文顶部，因为 templates/index.html 中唯一的内容是 Firebase 服务的示例。在您的生产环境中，我们建议您将代码段添加到正文底部，但在使用任何 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 的身份验证组件：
```
 <script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-auth.js"></script>
 
```
Firebase 知识库文档中介绍了这些脚本地址。

将正文的其余部分替换为以下代码，稍后将在本指南中使用该代码显示经过身份验证的用户数据：

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

后续步骤

现在，您已将 Firebase 添加到您的 Google Cloud 项目和 Web 服务，接下来您就可以向 Web 服务添加代码，以使其能够对用户进行身份验证。

处理数据

对用户进行身份验证