將 Firebase 新增至網路服務

區域 ID

REGION_ID 是 Google 根據您在建立應用程式時選取的地區所指派的簡寫代碼。雖然某些區域 ID 可能看起來與常用的國家/地區代碼相似，但此代碼並非對應國家/地區或省份。如果是 2020 年 2 月後建立的應用程式，App Engine 網址會包含 REGION_ID.r。如果是在此日期之前建立的現有應用程式，網址中則可選擇加入地區 ID。

進一步瞭解區域 ID。

將 Firebase 新增到專案、設定驗證設定，然後將 Firebase 新增到網路服務。 Google Cloud

將 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. 依序點選「Build」 >「Authentication」 >「Sign-in method」。

    2. 在「登入供應商」下方，選取「電子郵件/密碼」。

    3. 切換「Enable」按鈕，即可使用電子郵件和密碼驗證，然後按一下「Save」。

  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」文字下方的「web」。如果您已將應用程式新增至專案，可能不會看到這段文字；請改為前往現有應用程式的「Project Overview」 >「Project settings」 >「General」頁面，然後向下捲動並選取「Add app」。

  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 for Web 說明文件。

    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

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