將 Firebase 新增至網路服務

區域 ID

REGION_ID 是 Google 根據您在建立應用程式時選取的地區所指派的縮寫代碼。即使部分區域 ID 看似常用的國家/地區和省份代碼，但該代碼並不對應至國家/地區或省份。如果是 2020 年 2 月後建立的應用程式，App Engine 網址會包含 REGION_ID.r。如果是這段時間前建立的現有應用程式，網址可選擇是否包含區域 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 驗證，請將 Firebase 新增到您的 Google Cloud 專案，然後配置驗證設定。

  1. 使用 Firebase 主控台中的「新增專案」工具，將 Firebase 新增到現有 Google Cloud 專案。

    您也可以選擇使用名稱不同的 Firebase 帳戶，這類帳戶不會與現有 Google Cloud 專案建立關聯。

  2. 在 Firebase 主控台中啟用驗證登入供應商。您將為這項網路服務啟用「Email/Password」(電子郵件/密碼) 與「Google」登入供應商：

    1. 依序點選「建構」 >「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. 在專案總覽頁面中，選取「Get started by adding Firebase to your app」(開始將 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> 標記中新增自訂程式碼片段。

      在本教學課程中，您可以將程式碼新增至主體頂端，因為 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>

    3. 將上述程式碼片段中的 TODO 替換成下列指令碼標記，啟用 Firebase 的驗證元件：

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

      這些指令碼位址記錄在 Firebase 網頁版 UI 文件中。

    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>

後續步驟

現在您已將 Firebase 新增到 Google Cloud 專案和網路服務中，可以開始將程式碼新增到網路服務以驗證使用者。

上一頁
處理資料
下一頁
驗證使用者