使用 OIDC 登录用户

本文档介绍如何使用 Identity Platform 让用户通过 OpenID Connect (OIDC) 提供商登录。

准备工作

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

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

   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

3. Make sure that billing is enabled for your Google Cloud project.

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

   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

5. Make sure that billing is enabled for your Google Cloud project.

6. 启用 Identity Platform，并将 Client SDK 添加到您的应用。如需了解具体方法，请参阅快速入门。

配置提供商

1. 前往 Google Cloud 控制台中的身份提供商页面。
   转到“身份提供商”页面
   

2. 点击添加提供商，然后从列表中选择 OpenID Connect。

授权码流程

1. 输入以下详细信息以启用授权码流程：

   1. 在选择授权类型部分下，选择代码流。

   2. 提供商的名称。它可以与提供商 ID 相同，也可以是自定义名称。如果要输入自定义名称，请点击提供商 ID 旁边的修改以指定 ID（必须以 oidc. 开头）。

   3. 提供商的客户端 ID。

   4. 提供商的颁发者。其格式应类似于 https://example.com。Identity Platform 使用此网址查找 OIDC 发现文档（通常位于 /.well-known/openid-configuration），该文档指定了提供商的 OAuth 端点和公钥。

      注意：如果您的 OIDC 提供商不符合用于发现的 OIDC 规范，则无法用于 Identity Platform。

   5. 提供商的客户端密钥。

2. 将您的应用添加到已获授权的网域列表中。例如，如果应用的登录网址为 https://example.com/login，请添加 example.com。

3. 将 Identity Platform 回调网址配置为您的 OIDC 提供商的重定向网址。网址应类似于 https://[PROJECT-ID].firebaseapp.com/__/auth/handler。

4. 点击保存。

隐式流程

1. 输入以下详细信息以启用隐式流程：

   1. 在选择授权类型部分下，选择隐式流程。

   2. 提供商的名称。它可以与提供商 ID 相同，也可以是自定义名称。如果要输入自定义名称，请点击提供商 ID 旁边的修改以指定 ID（必须以 oidc. 开头）。

   3. 提供商的客户端 ID。

   4. 提供商的颁发者。这应如下所示：https://example.com. Identity Platform 使用此网址来查找 OIDC 发现文档（通常位于 /.well-known/openid-configuration），该文档指定了提供商的 OAuth 端点和公开键。

      注意：如果您的 OIDC 提供商不符合用于发现的 OIDC 规范，则无法用于 Identity Platform。

2. 将您的应用添加到已获授权的网域列表中。例如，如果应用的登录网址为 https://example.com/login，请添加 example.com。

3. 将 Identity Platform 回调网址配置为您的 OIDC 提供商的重定向网址。网址应类似于 https://[PROJECT-ID].firebaseapp.com/__/auth/handler。

4. 点击保存。

登录用户

您可以使用两种方法让用户通过 OIDC 登录：

• 使用 OAuth 流程。此方法会为您完成 OAuth 握手。根据配置提供商步骤中的授权代码l流程/隐式流程选择，GCIP 服务器选择所需的流程来与身份提供商通信。

• 使用 OIDC 提供商的 ID 令牌。此方法假定您已有 OIDC 令牌。

让用户通过 OAuth 登录

要使用 OAuth 登录，请执行以下操作：

1. 使用您在上一部分中配置的提供商 ID 创建 OAuthProvider 实例。提供商 ID 必须以 oidc. 开头。

   Web 版本 9

   详细了解可实现摇树优化的模块化 Web API，并从命名空间型 API 升级。

   import { OAuthProvider } from "firebase/auth";
   
   const provider = new OAuthProvider("oidc.myProvider");
   auth_oidc_provider_create.js

   Web 版本 8

   const provider = new firebase.auth.OAuthProvider('oidc.myProvider');
   oidc.js

2. 启动登录流程。您可以选择使用弹出式窗口或重定向。

   弹出式内容

   Web 版本 9

   详细了解可实现摇树优化的模块化 Web API，并从命名空间型 API 升级。

   import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";
   
   const auth = getAuth();
   signInWithPopup(auth, provider)
     .then((result) => {
       // User is signed in.
       const credential = OAuthProvider.credentialFromResult(result);
       // This gives you an access token for the OIDC provider. You can use it to directly interact with that provider
     }).catch((error) => {
       // Handle Errors here.
       const errorCode = error.code;
       const errorMessage = error.message;
       // The email of the user's account used.
       const email = error.customData.email;
       // The AuthCredential type that was used.
       const credential = OAuthProvider.credentialFromError(error);
       // Handle / display error.
       // ...
     });
   auth_oidc_signin_popup.js

   Web 版本 8

   firebase.auth().signInWithPopup(provider)
     .then((result) => {
       // User is signed in.
       // result.credential is a firebase.auth().OAuthCredential object.
       // result.credential.providerId is equal to 'oidc.myProvider'.
       // result.credential.idToken is the OIDC provider's ID token.
     })
     .catch((error) => {
       // Handle error.
     });
   oidc.js

   重定向

   如需重定向到登录页面，请调用 signInWithRedirect()：

   Web 版本 9

   详细了解可实现摇树优化的模块化 Web API，并从命名空间型 API 升级。

   import { getAuth, signInWithRedirect } from "firebase/auth";
   
   const auth = getAuth();
   signInWithRedirect(auth, provider);
   auth_oidc_signin_redirect.js

   Web 版本 8

   firebase.auth().signInWithRedirect(provider).catch((error) => {
     // Handle error.
   });
   oidc.js

   然后，调用 getRedirectResult() 以在用户返回应用时获取结果：

   Web 版本 9

   详细了解可实现摇树优化的模块化 Web API，并从命名空间型 API 升级。

   import { getAuth, getRedirectResult, OAuthProvider } from "firebase/auth";
   
   const auth = getAuth();
   getRedirectResult(auth)
     .then((result) => {
       // User is signed in.
       const credential = OAuthProvider.credentialFromResult(result);
       // This gives you an access token for the OIDC provider. You can use it to directly interact with that provider
     })
     .catch((error) => {
       // Handle Errors here.
       const errorCode = error.code;
       const errorMessage = error.message;
       // The email of the user's account used.
       const email = error.customData.email;
       // The AuthCredential type that was used.
       const credential = OAuthProvider.credentialFromError(error);
       // Handle / display error.
       // ...
     });
   auth_oidc_signin_redirect_result.js

   Web 版本 8

   // On return.
   firebase.auth().getRedirectResult()
     .then((result) => {
       // User is signed in.
       // result.credential is a firebase.auth().OAuthCredential object.
       // result.credential.providerId is equal to 'oidc.myProvider'.
       // result.credential.idToken is the OIDC provider's ID token.
     })
     .catch((error) => {
       // Handle / display error.
       // ...
     });
   oidc.js

在任一流程结束时，您都可以使用 result.credential.idToken 字段获取 OIDC ID 令牌。

直接登录用户

如需使用 OIDC ID 令牌直接登录用户，请执行以下操作：

1. 使用您在上一部分中配置的提供方 ID 初始化 OAuthProvider 实例。提供商 ID 必须以 oidc. 开头。然后，创建 OAuthCredential，并调用 signInWithCredential() 以登录用户。

   Web 版本 9

   详细了解可实现摇树优化的模块化 Web API，并从命名空间型 API 升级。

   import { getAuth, OAuthProvider, signInWithCredential } from "firebase/auth";
   
   const auth = getAuth();
   const credential = provider.credential({
     idToken: oidcIdToken,
   });
   signInWithCredential(auth, credential)
     .then((result) => {
       // User is signed in.
       const newCredential = OAuthProvider.credentialFromResult(result);
       // This gives you a new access token for the OIDC provider. You can use it to directly interact with that provider.
     })
     .catch((error) => {
       // Handle Errors here.
       const errorCode = error.code;
       const errorMessage = error.message;
       // The email of the user's account used.
       const email = error.customData.email;
       // The AuthCredential type that was used.
       const credential = OAuthProvider.credentialFromError(error);
       // Handle / display error.
       // ...
     });
   auth_oidc_direct_sign_in.js

   Web 版本 8

   const credential = provider.credential(oidcIdToken, null);
   
   firebase.auth().signInWithCredential(credential)
     .then((result) => {
       // User is signed in.
       // User now has a odic.myProvider UserInfo in providerData.
     })
     .catch((error) => {
       // Handle / display error.
       // ...
     });
   oidc.js

关联用户账号

如果用户已使用其他方法（例如电子邮件/密码）登录到应用，您可以使用 linkWithPopup() 或 linkWithRedirect() 将其现有账号关联到 OIDC 提供商： 例如，我们可以通过以下方式关联 Google 账号：

Web 版本 9

详细了解可实现摇树优化的模块化 Web API，并从命名空间型 API 升级。

import { getAuth, linkWithPopup, GoogleAuthProvider } from "firebase/auth";
const provider = new GoogleAuthProvider();

const auth = getAuth();
linkWithPopup(auth.currentUser, provider).then((result) => {
  // Accounts successfully linked.
  const credential = GoogleAuthProvider.credentialFromResult(result);
  const user = result.user;
  // ...
}).catch((error) => {
  // Handle Errors here.
  // ...
});
auth_link_with_popup.js

Web 版本 8

auth.currentUser.linkWithPopup(provider).then((result) => {
  // Accounts successfully linked.
  var credential = result.credential;
  var user = result.user;
  // ...
}).catch((error) => {
  // Handle Errors here.
  // ...
});
link-multiple-accounts.js

后续步骤

• 使用 SAML 登录用户
• 在登录时显示自定义域名
• 以编程方式管理 OIDC 和 SAML 提供商