透過 Identity Platform 使用電子郵件地址登入使用者帳戶

透過 Identity Platform 使用電子郵件地址登入使用者帳戶

瞭解如何使用 Identity Platform，以電子郵件地址和密碼登入使用者帳戶。

---

如要直接在 Google Cloud 控制台按照逐步指南操作，請按一下「Guide me」(逐步引導)：

逐步引導

---

事前準備

Sign in to your Google Cloud account. If you're new to Google Cloud, create an account to evaluate how our products perform in real-world scenarios. New customers also get $300 in free credits to run, test, and deploy workloads.
In the Google Cloud console, on the project selector page, select or create a Google Cloud project.
Roles required to select or create a project
• Select a project: Selecting a project doesn't require a specific IAM role—you can select any project that you've been granted a role on.
• Create a project: To create a project, you need the Project Creator (roles/resourcemanager.projectCreator), which contains the resourcemanager.projects.create permission. Learn how to grant roles.
Note: If you don't plan to keep the resources that you create in this procedure, create a project instead of selecting an existing project. After you finish these steps, you can delete the project, removing all resources associated with the project.
Go to project selector
Verify that billing is enabled for your Google Cloud project.
Make sure that you have the following role or roles on the project: Identity Platform Admin, Service Usage Admin
Check for the roles
1. In the Google Cloud console, go to the IAM page.

   Go to IAM
2. Select the project.

3. In the Principal column, find all rows that identify you or a group that you're included in. To learn which groups you're included in, contact your administrator.

4. For all rows that specify or include you, check the Role column to see whether the list of roles includes the required roles.
Grant the roles
1. In the Google Cloud console, go to the IAM page.

   前往 IAM
2. 選取專案。
3. 按一下「授予存取權」。

4. 在「New principals」(新增主體) 欄位中，輸入您的使用者 ID。 這通常是 Google 帳戶的電子郵件地址。

5. 在「Select a role」(選取角色) 清單中，選取角色。
6. 如要授予其他角色，請按一下 「新增其他角色」，然後新增每個其他角色。
7. 按一下 [Save]。

In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

Roles required to select or create a project

• Select a project: Selecting a project doesn't require a specific IAM role—you can select any project that you've been granted a role on.
• Create a project: To create a project, you need the Project Creator (roles/resourcemanager.projectCreator), which contains the resourcemanager.projects.create permission. Learn how to grant roles.

Note: If you don't plan to keep the resources that you create in this procedure, create a project instead of selecting an existing project. After you finish these steps, you can delete the project, removing all resources associated with the project.

Go to project selector

Verify that billing is enabled for your Google Cloud project.

Make sure that you have the following role or roles on the project: Identity Platform Admin, Service Usage Admin

Check for the roles

1. In the Google Cloud console, go to the IAM page.

   Go to IAM
2. Select the project.

3. In the Principal column, find all rows that identify you or a group that you're included in. To learn which groups you're included in, contact your administrator.

4. For all rows that specify or include you, check the Role column to see whether the list of roles includes the required roles.

Grant the roles

1. In the Google Cloud console, go to the IAM page.

   前往 IAM
2. 選取專案。
3. 按一下「授予存取權」。

4. 在「New principals」(新增主體) 欄位中，輸入您的使用者 ID。 這通常是 Google 帳戶的電子郵件地址。

5. 在「Select a role」(選取角色) 清單中，選取角色。
6. 如要授予其他角色，請按一下 「新增其他角色」，然後新增每個其他角色。
7. 按一下 [Save]。

啟用 Identity Platform

1. 前往 Google Cloud 控制台的 Cloud Marketplace，然後前往「Identity Platform」頁面。

   前往 Identity Platform

2. 按一下 [Enable Identity Platform] (啟用 Identity Platform)。

設定電子郵件地址登入資訊

1. 前往「Identity Providers」(識別資訊提供者) 頁面。

   前往「Identity Providers」(識別資訊提供者)

2. 在「Identity Providers」頁面上，按一下「Add a provider」。

3. 在「Select a provider」(選取提供者) 清單中，選取「Email/Password」(電子郵件/密碼) 。

4. 將「Enabled」(已啟用) 切換為開啟。

5. 如要儲存提供者設定，請按一下「儲存」。

新增使用者

1. 前往 Google Cloud 控制台的「Users」頁面。

   前往「使用者」

2. 點選「Add user」。

3. 在「Email」(電子郵件) 欄位中輸入電子郵件地址和密碼。請記下這些設定值，因為後續步驟會用到。

4. 如要新增使用者，請按一下「新增」。「Users」(使用者) 頁面中隨即會列出新使用者。

登入使用者帳戶

登入使用者的步驟會因應用程式使用的 SDK 版本而異。請確認您已按照應用程式的正確步驟操作。

注意： 強烈建議使用第 9 版 SDK，尤其是正式版應用程式。如需其他 SDK 管理選項 (例如 window.firebase) 的支援，請參閱「從第 8 版升級至模組化 Web SDK」或「加入 Firebase 的替代方式」。

SDK 第 9 版 (模組化)

安裝 SDK 並初始化 Firebase

Firebase JS SDK 第 9 版採用 JavaScript 模組格式。

這個工作流程會使用 npm，並需要模組整合工具或 JavaScript 架構工具，因為 v9 SDK 經過最佳化，可與模組整合工具搭配使用，藉此排除未使用的程式碼 (tree-shaking) 並縮減 SDK 大小。

如要使用 v9 SDK，請按照下列步驟操作：

1. 從專案目錄使用 npm 安裝 Firebase：

   npm install firebase

2. 在應用程式中初始化 Firebase，並建立 Firebase App 物件：

   import { initializeApp } from 'firebase/app';
   
   const firebaseConfig = {
       apiKey: "API_KEY",
       authDomain: "AUTH_DOMAIN"
   };
   
   const app = initializeApp(firebaseConfig);

   更改下列內容：

   • API_KEY：Firebase 專案的 apiKey。
   • AUTH_DOMAIN：Firebase 專案的 authDomain。

   您可以在應用程式的 Firebase 專案設定中找到這些值。

   Firebase 應用程式是類似容器的物件，可儲存常見設定，並在 Firebase 服務之間共用驗證。在程式碼中初始化 Firebase 應用程式物件後，即可新增及開始使用 Firebase 服務。

   如果您使用 ESM 並想使用瀏覽器模組，請將所有 import 行替換為下列模式：
   import { } from 'https://www.gstatic.com/firebasejs/12.4.0/firebase-SERVICE.js',
   其中 SERVICE 是 SDK 名稱，例如 firebase-firestore。

   使用瀏覽器模組是快速入門的好方法，但我們建議在正式環境中使用模組打包工具。

在 JavaScript 中存取 Identity Platform

初始化 Firebase SDK 後，您可以在應用程式的任何位置使用 SDK。舉例來說，以下應用程式會嘗試登入硬式編碼的使用者，並在網頁上顯示結果。

import { initializeApp } from 'firebase/app';
import {
  onAuthStateChanged,
  signInWithEmailAndPassword,
  getAuth
} from 'firebase/auth';

const firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "AUTH_DOMAIN"
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app, {/* extra options */ });

document.addEventListener("DOMContentLoaded", () => {
  onAuthStateChanged(auth, (user) => {
      if (user) {
          document.getElementById("message").innerHTML = "Welcome, " + user.email;
      }
      else {
          document.getElementById("message").innerHTML = "No user signed in.";
      }
  });
  signIn();
});

function signIn() {
  const email = "EMAIL_ID";
  const password = "PASSWORD";
  signInWithEmailAndPassword(auth, email, password)
      .catch((error) => {
          document.getElementById("message").innerHTML = error.message;
      });
}

更改下列內容：

• API_KEY：Firebase 專案的 apiKey。
• AUTH_DOMAIN：Firebase 專案的 authDomain。
• EMAIL_ID：您在本指南中稍早建立的使用者電子郵件地址。
• PASSWORD：您在本指南中稍早建立的使用者密碼。

使用模組組合器縮減大小

注意： 如果您使用 JavaScript 架構 CLI 工具 (例如 Angular CLI、Next.js、Vue CLI 或 Create React App)，可以略過這個步驟。如需更多資訊，請參閱模組組合指南。

Firebase Web SDK 的設計宗旨是搭配模組打包工具使用，移除所有未使用的程式碼 (樹狀結構修剪)。我們強烈建議您為正式版應用程式採用這種做法。Angular CLI、Next.js、Vue CLI 或 Create React App 等工具會自動處理透過 npm 安裝並匯入程式碼庫的程式庫模組套件。

舉例來說，您可以使用 Webpack 生成 dist 資料夾，其中包含已組合的應用程式和依附元件程式碼。詳情請參閱「搭配 Firebase 使用模組打包工具」。

將 JavaScript 匯入頁面

1. 建立名為 index.html 的新檔案。

2. 加入兩個基本 HTML 容器，並匯入已組合的 js。

   <script defer src="js/bundled.js"></script>
   <div>Identity Platform Quickstart</div>
   <div id="message">Loading...</div>
   

3. 在網路瀏覽器中啟動 index.html。系統隨即會顯示內含使用者電子郵件地址的歡迎訊息。

SDK v8 (舊版)

建立網頁

1. 在本機電腦上，建立名為 index.html 的新檔案。

2. 在 HTML 檔案中新增兩個 HTML 容器：

   <div>Identity Platform Quickstart</div>
   <div id="message">Loading...</div>
   

使用 API 金鑰初始化 Identity Platform 用戶端 SDK

1. 前往 Google Cloud 控制台的「Identity Providers」頁面。

   前往「Identity Providers」(識別資訊提供者)

2. 按一下「Application setup details」(應用程式設定詳細資料)。

3. 將初始化程式碼複製到 index.html。

登入使用者帳戶

1. 如要登入使用者帳戶，請將下列程式碼複製到 index.html：

   <script>
     var email = "EMAIL_ID";
     var password = "PASSWORD";
   
     firebase.auth().onAuthStateChanged(function(user) {
       if (user) {
         document.getElementById("message").innerHTML = "Welcome, " + user.email;
       } else {
         document.getElementById("message").innerHTML = "No user signed in.";
       }
     });
   
     firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
       document.getElementById("message").innerHTML = error.message;
     });
   </script>
   

   這段程式碼會呼叫 signInWithEmailAndPassword()，然後使用 onAuthStateChanged() 回呼處理結果。

   更改下列內容：

   • EMAIL_ID：您先前建立的使用者電子郵件地址
   • PASSWORD：您先前建立的使用者密碼

2. 在網路瀏覽器中開啟 index.html。系統隨即會顯示內含使用者電子郵件地址的歡迎訊息。

使用者嘗試登入失敗的次數有上限。如果使用者在短時間內連續多次嘗試登入失敗，帳戶就會暫時遭到鎖定。

如要進一步瞭解其他 Identity Platform 限制，請參閱「配額與限制」。

清除所用資源

如要避免系統向您的 Google Cloud 帳戶收取本頁所用資源的費用，請按照下列步驟操作。

刪除提供者和使用者

如果您使用的是現有的 Google Cloud 專案，請刪除稍早建立的提供者和使用者，以免系統向您的帳戶收取費用：

1. 前往 Google Cloud 控制台的「Identity Providers」頁面。

   前往「Identity Providers」(識別資訊提供者)

2. 如要刪除提供者，請按一下提供者名稱旁的「Delete」(刪除)，接著點選「Delete」(刪除) 確認操作。

3. 前往 Google Cloud 控制台的「Users」頁面。

   前往「使用者」

4. 如要刪除先前新增的使用者，請按一下使用者名稱旁的「Delete」(刪除)，接著點選「Delete」(刪除) 確認操作。

刪除專案

如要避免付費，最簡單的方法就是刪除您為了本教學課程所建立的專案。

如要刪除專案：

注意：刪除專案會造成以下結果：

• 專案中的所有內容都會遭到刪除。 如果您使用現有專案來進行本文中的工作，刪除專案將一併刪除其中已完成的所有工作。
• 自訂的專案 ID 會消失。當您之前建立這個專案時，可能建立了想要在日後使用的自訂專案 ID。如要保留使用該專案 ID 的網址 (例如 appspot.com 網址)，請刪除在該專案中選取的資源，而不是刪除整個專案。

如想瞭解多種架構、教學課程或快速入門導覽課程，重複使用專案可避免超出專案配額限制。

1. In the Google Cloud console, go to the Manage resources page.

   Go to Manage resources

2. In the project list, select the project that you want to delete, and then click Delete.
3. In the dialog, type the project ID, and then click Shut down to delete the project.

後續步驟

在實際應用程式中，使用者會透過專屬註冊頁面來註冊，隨後只要輸入電子郵件地址和密碼即可登入。您可在這些頁面使用 Identity Platform 預先建構的驗證使用者介面，或選擇自行建構。另外，您也能支援其他登入方式，包括社群媒體供應商 (例如 Facebook 或 Google) 帳戶、電話號碼、OIDC 或 SAML。

建議您進一步瞭解下列主題：

• 透過 JavaScript、Android、iOS、C++ 或 Unity 讓使用者登入。

• 使用 OIDC 或 SAML 讓使用者登入。

• 遷移現有應用程式的使用者至 Identity Platform。