將 Firebase 新增至網路服務

區域 ID

REGION_ID 是 Google 根據您建立應用程式時選取的區域指派的縮寫代碼。即使部分區域 ID 看似常用國家/地區和省份代碼，但該代碼並不對應國家/地區或省份。如果是 2020 年 2 月後建立的應用程式，App Engine 網址會包含 REGION_ID.r。如果是這段時間前建立的現有應用程式，網址可選擇是否包含區域 ID。

進一步瞭解區域 ID。

確定

注意： 如要將新的 Python 網路服務部署至 Google Cloud，建議您先瞭解 Cloud Run。

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

將 Firebase 新增至網路服務後，您就能驗證使用者身分，為每位使用者提供個人化體驗。

事前準備

如果您已完成本指南中的所有先前步驟，請略過這個部分。 否則，請完成下列其中一個步驟：

• 請先參閱「建構 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 驗證，請將 Firebase 新增至 Google Cloud 專案，並設定驗證設定。

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

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

2. 在 Firebase 主控台中啟用驗證登入供應商。針對這項網路服務，您將啟用「電子郵件/密碼」和「Google」登入供應商：

   1. 依序點選「安全性」>「驗證」>「登入方式」。

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

   3. 切換「啟用」按鈕，即可使用電子郵件地址和密碼驗證，然後按一下「儲存」。

      提示： 如要進一步瞭解如何啟用其他供應商，請參閱 Firebase 的「開始前」部分，包括 Google、Facebook、Twitter 和 GitHub 指南。

3. 如要正確驗證 Firebase，您必須授權網域重新導向 OAuth。如要授權網域，請按照下列步驟操作：

   1. 依序選取「安全性」>「驗證」>「設定」。

   2. 在「設定」頁面的「授權網域」下方，按一下「新增網域」。

   3. 輸入 App Engine 應用程式的網域，不含 http:// 前置字元：

      PROJECT_ID。 REGION_ID.r.appspot.com 其中 PROJECT_ID 是專案的 ID。Google Cloud

將 Firebase 新增至網路服務

如要將 Firebase 新增至網路服務，請將 Firebase 專案的自訂程式碼片段、JavaScript 和 CSS 檔案複製到網路服務：

1. 前往 Firebase 主控台，選取您的專案。

2. 在專案總覽頁面中，選取「Get started by adding Firebase to your 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 說明文件中。

   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 專案和網路服務，現在可以將程式碼新增至網路服務，啟用使用者驗證功能。