使用 Yahoo 进行身份验证 (JavaScript)

要让您的用户能够通过 OAuth 提供方（如 Yahoo）进行 Firebase 身份验证，您可以使用 Firebase SDK 执行端到端登录流程，将通用 OAuth 登录机制集成到您的应用中。

准备工作

如需让用户能够通过 Yahoo 账号登录，您必须先启用 Yahoo 作为您的 Firebase 项目的登录服务提供方：

1. 将 Firebase 添加至您的 JavaScript 项目。
2. 在 Firebase 控制台中，打开 Auth 部分。
3. 在登录方法标签页中，启用 Yahoo 提供方。
4. 将该提供方的开发者控制台中的客户端 ID 和客户端密钥添加至提供方配置：

   1. 如需注册 Yahoo OAuth 客户端，请按照有关如何通过 Yahoo 注册 Web 应用的 Yahoo 开发者文档进行操作。

      请务必选择以下两种 OpenID Connect API 权限：profile 和 email。

   2. 向这些提供方注册应用时，请务必将项目的 *.firebaseapp.com 网域注册为应用的重定向网域。
5. 点击保存。

使用 Firebase SDK 处理登录流程

如果您是在构建 Web 应用，想要通过用户的 Yahoo 账号对其进行 Firebase 身份验证，最简单的方法是使用 Firebase JavaScript SDK 来处理整个登录流程。

如需要使用 Firebase JavaScript SDK 处理登录流程，请按以下步骤操作：

1. 使用提供方 ID OAuthProvider 创建一个 OAuthProvider 实例。

   Web

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

   import { OAuthProvider } from "firebase/auth";
   
   const provider = new OAuthProvider('yahoo.com');
   auth_yahoo_provider_create.js

   Web

   var provider = new firebase.auth.OAuthProvider('yahoo.com');
   yahoo-oauth.js

2. 可选：指定您希望通过 OAuth 请求发送的其他自定义 OAuth 参数。

   Web

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

   provider.setCustomParameters({
     // Prompt user to re-authenticate to Yahoo.
     prompt: 'login',
     // Localize to French.
     language: 'fr'
   });  
   auth_yahoo_provider_params.js

   Web

   provider.setCustomParameters({
     // Prompt user to re-authenticate to Yahoo.
     prompt: 'login',
     // Localize to French.
     language: 'fr'
   });  
   yahoo-oauth.js

   如需查看 Yahoo 支持的参数，请参阅 Yahoo OAuth 文档。 请注意，您不能使用 setCustomParameters() 传递 Firebase 必需的参数。这些参数包括 client_id、redirect_uri、response_type、scope 和 state。

3. 可选：指定您希望向身份验证提供方申请的 profile 和 email 之外的 OAuth 2.0 范围。如果您的应用需要通过 Yahoo API 访问用户私人数据，您需要在 Yahoo 开发者控制台的 API 权限下申请 Yahoo API 权限。申请的 OAuth 范围必须与应用的 API 权限中预配置的范围完全匹配。例如，如果您申请了对用户通讯录的读写权限，并已在应用的 API 权限中预配置相应权限，则必须传递 sdct-w 而不是只读 OAuth 范围 sdct-r。否则将导致流程失败，并向最终用户显示错误消息。

   Web

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

   // Request access to Yahoo Mail API.
   provider.addScope('mail-r');
   // Request read/write access to user contacts.
   // This must be preconfigured in the app's API permissions.
   provider.addScope('sdct-w');
   auth_yahoo_provider_scopes.js

   Web

   // Request access to Yahoo Mail API.
   provider.addScope('mail-r');
   // Request read/write access to user contacts.
   // This must be preconfigured in the app's API permissions.
   provider.addScope('sdct-w');
   yahoo-oauth.js

   如需了解详情，请参阅 Yahoo 范围文档。

4. 使用 OAuth 提供方对象进行 Firebase 身份验证。您可以打开弹出式窗口或将用户重定向至登录页面，提示用户使用自己的 Yahoo 账号登录。在移动设备上最好使用重定向方法。

   • 如需使用弹出式窗口登录，请调用 signInWithPopup：

     Web

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

     import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";
     
     const auth = getAuth();
     signInWithPopup(auth, provider)
       .then((result) => {
         // IdP data available in result.additionalUserInfo.profile
         // ...
     
         // Yahoo OAuth access token and ID token can be retrieved by calling:
         const credential = OAuthProvider.credentialFromResult(result);
         const accessToken = credential.accessToken;
         const idToken = credential.idToken;
       })
       .catch((error) => {
         // Handle error.
       });
     auth_yahoo_signin_popup.js

     Web

     firebase.auth().signInWithPopup(provider)
       .then((result) => {
         // IdP data available in result.additionalUserInfo.profile
         // ...
     
         /** @type {firebase.auth.OAuthCredential} */
         const credential = result.credential;
     
         // Yahoo OAuth access token and ID token can be retrieved by calling:
         var accessToken = credential.accessToken;
         var idToken = credential.idToken;
       })
       .catch((error) => {
         // Handle error.
       });
     yahoo-oauth.js

   • 如需通过重定向到登录页面进行登录，请调用 signInWithRedirect：

   使用 signInWithRedirect、linkWithRedirect 或 reauthenticateWithRedirect 时，请遵循最佳实践。

     firebase.auth().signInWithRedirect(provider);
     

   用户完成登录并返回到页面后，您可以调用 getRedirectResult 获取登录结果。

   Web

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

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

   Web

   firebase.auth().signInWithRedirect(provider);
   yahoo-oauth.js

   成功完成后，可以从返回的 firebase.auth.UserCredential 对象检索与提供方关联的 OAuth ID 令牌和访问令牌。

   使用 OAuth 访问令牌，您可以调用 Yahoo API。

   例如，如需获取基本个人资料，可调用以下 REST API：

   curl -i -H "Authorization: Bearer ACCESS_TOKEN" https://social.yahooapis.com/v1/user/YAHOO_USER_UID/profile?format=json

   其中，YAHOO_USER_UID 是 Yahoo 用户的 ID，可以从 firebase.auth().currentUser.providerData[0].uid 字段或 result.additionalUserInfo.profile 检索。

5. 以上示例侧重的是登录流程。除此之外，您也可以使用 linkWithPopup/linkWithRedirect 将 Yahoo 提供方与现有用户相关联。例如，您可以将多个提供方与同一个用户关联，以便用户使用任一提供方服务进行登录。

   Web

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

   import { getAuth, linkWithPopup, OAuthProvider } from "firebase/auth";
   
   const provider = new OAuthProvider('yahoo.com');
   const auth = getAuth();
   linkWithPopup(auth.currentUser, provider)
       .then((result) => {
         // Yahoo credential is linked to the current user.
         // IdP data available in result.additionalUserInfo.profile.
   
         // Get the OAuth access token and ID Token
         const credential = OAuthProvider.credentialFromResult(result);
         const accessToken = credential.accessToken;
         const idToken = credential.idToken;
       })
       .catch((error) => {
         // Handle error.
       });
   auth_yahoo_link_popup.js

   Web

   var provider = new firebase.auth.OAuthProvider('yahoo.com');
   firebase.auth().currentUser.linkWithPopup(provider)
       .then((result) => {
         // Yahoo credential is linked to the current user.
         // IdP data available in result.additionalUserInfo.profile.
         // Yahoo OAuth access token can be retrieved by calling:
         // result.credential.accessToken
         // Yahoo OAuth ID token can be retrieved by calling:
         // result.credential.idToken
       })
       .catch((error) => {
         // Handle error.
       });
   yahoo-oauth.js

6. 上述模式同样适用于 reauthenticateWithPopup/reauthenticateWithRedirect。对于要求用户必须在近期内登录过才能执行的敏感操作，可使用它来检索新的凭据。

   Web

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

   import { getAuth, reauthenticateWithPopup, OAuthProvider } from "firebase/auth";
   
   const provider = new OAuthProvider('yahoo.com');
   const auth = getAuth();
   reauthenticateWithPopup(auth.currentUser, provider)
       .then((result) => {
         // User is re-authenticated with fresh tokens minted and
         // should be able to perform sensitive operations like account
         // deletion and email or password update.
         // IdP data available in result.additionalUserInfo.profile.
   
         // Get the OAuth access token and ID Token
         const credential = OAuthProvider.credentialFromResult(result);
         const accessToken = credential.accessToken;
         const idToken = credential.idToken;
       })
       .catch((error) => {
         // Handle error.
       });
   auth_yahoo_reauth_popup.js

   Web

   var provider = new firebase.auth.OAuthProvider('yahoo.com');
   firebase.auth().currentUser.reauthenticateWithPopup(provider)
       .then((result) => {
         // User is re-authenticated with fresh tokens minted and
         // should be able to perform sensitive operations like account
         // deletion and email or password update.
         // IdP data available in result.additionalUserInfo.profile.
         // Yahoo OAuth access token can be retrieved by calling:
         // result.credential.accessToken
         // Yahoo OAuth ID token can be retrieved by calling:
         // result.credential.idToken
       })
       .catch((error) => {
         // Handle error.
       });
   yahoo-oauth.js

处理“account-exists-with-different-credential”错误

如果您在 Firebase 控制台中启用了每个电子邮件地址一个账号设置，当用户尝试使用一个 Firebase 用户的提供方（例如 Google）中已存在的电子邮件地址登录另一个提供方（例如 Yahoo）时，系统会抛出 auth/account-exists-with-different-credential 错误及 AuthCredential 对象（Yahoo 凭据）。如需登录所需的提供方，用户必须首先登录现有提供方 (Google)，然后再关联到之前的 AuthCredential（Yahoo 凭据）。

弹出模式

如果您使用 signInWithPopup，可以通过与下例类似的代码来处理 auth/account-exists-with-different-credential 错误：

import {
  getAuth,
  linkWithCredential,
  signInWithPopup,
  OAuthProvider,
} from "firebase/auth";

try {
  // Step 1: User tries to sign in using Yahoo.
  let result = await signInWithPopup(getAuth(), new OAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending Yahoo credential.
    let pendingCred = error.credential;

    // Step 3: Save the pending credential in temporary storage,

    // Step 4: Let the user know that they already have an account
    // but with a different provider, and let them choose another
    // sign-in method.
  }
}

// ...

try {
  // Step 5: Sign the user in using their chosen method.
  let result = await signInWithPopup(getAuth(), userSelectedProvider);

  // Step 6: Link to the Yahoo credential.
  // TODO: implement `retrievePendingCred` for your app.
  let pendingCred = retrievePendingCred();

  if (pendingCred !== null) {
    // As you have access to the pending credential, you can directly call the
    // link method.
    let user = await linkWithCredential(result.user, pendingCred);
  }

  // Step 7: Continue to app.
} catch (error) {
  // ...
}

重定向模式

在重定向模式下，处理该错误的方法类似，不同的是待处理凭据必须在页面重定向之间缓存（例如，使用会话存储空间缓存）。

高级：手动处理登录流程

Firebase 所支持的其他 OAuth 提供方（如 Google、Facebook 和 Twitter）可以通过基于 OAuth 访问令牌的凭据直接实现登录，Firebase Auth 则不同。由于 Firebase Auth 服务器无法验证 Yahoo 等提供方的 OAuth 访问令牌的目标设备，因此 Firebase Auth 不支持通过这些提供方直接登录。 这是一项关键的安全要求，不满足该要求的应用和网站可能会受到重放攻击的威胁。在这种情况下，为某个项目（攻击者）获取的 Yahoo OAuth 访问令牌可能被用来登录另一个项目（受害者）。 因此，Firebase Auth 改为提供另一种功能，即使用在 Firebase 控制台中配置的 OAuth 客户端 ID 和密钥来处理整个 OAuth 流程和授权代码交换。由于授权代码只能与特定客户端 ID/密钥结合使用，因此为某个项目获取的授权代码不能用于另一个项目。

如果需要在不受支持的环境中使用这些提供方，则需使用第三方 OAuth 库和 Firebase 自定义身份验证。前者用于向提供方进行身份验证，后者则用于将提供方的凭据交换成自定义令牌。

在 Chrome 扩展程序中进行 Firebase 身份验证

如果您正在构建 Chrome 扩展程序应用，请参阅“屏幕外文档”指南。

为 Yahoo 登录服务自定义重定向网域

在创建项目时，Firebase 将为您的项目预配一个唯一的子网域：https://my-app-12345.firebaseapp.com。

它也将用作 OAuth 登录的重定向机制。该网域需要列入所有受支持的 OAuth 提供方的许可名单。但是，这意味着用户在登录 Yahoo 时可能会先看到该网域（前往：https://my-app-12345.firebaseapp.com），然后才重定向回应用。

如需避免显示子网域，您可以使用 Firebase Hosting 设置自定义网域：

1. 按照设置您的 Hosting 网域中的第 1 步到第 3 步执行操作。当您验证网域所有权时，Hosting 会为您的自定义网域预配一个 SSL 证书。
2. 在 Firebase 控制台中，将您的自定义域名添加到已获授权的域名列表：auth.custom.domain.com。
3. 在 Yahoo 开发者控制台或 OAuth 设置页面中，将可通过该自定义网域访问的重定向页面的网址 (https://auth.custom.domain.com/__/auth/handler) 加入许可名单。
4. 初始化 JavaScript 库时，使用 authDomain 字段指定您的自定义网域：

   var config = {
     apiKey: '...',
     // Changed from 'PROJECT_ID.firebaseapp.com'.
     authDomain: 'auth.custom.domain.com',
     databaseURL: 'https://PROJECT_ID.firebaseio.com',
     projectId: 'PROJECT_ID',
     storageBucket: 'PROJECT_ID.firebasestorage.app',
     messagingSenderId: 'SENDER_ID'
   };
   firebase.initializeApp(config);

后续步骤

在用户首次登录后，系统会创建一个新的用户账号，并将其与该用户登录时使用的凭据（即用户名和密码、电话号码或者身份验证提供方信息）相关联。此新账号存储在您的 Firebase 项目中，无论用户采用何种方式登录，您项目中的每个应用都可以使用此账号来识别用户。

• 在您的应用中，建议通过在 Auth 对象上设置观测器来了解用户的身份验证状态。然后，您便可从 User 对象获取用户的基本个人资料信息。请参阅管理用户。

• 在您的 Firebase Realtime Database 和 Cloud Storage 安全规则中，您可以从 auth 变量获取已登录用户的唯一用户 ID，然后利用此 ID 来控制用户可以访问哪些数据。

您可以通过将身份验证提供方凭据关联至现有用户账号，让用户可以使用多个身份验证提供方登录您的应用。

如需将用户退出登录，请调用 signOut：

Web

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

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
auth_sign_out.js

Web

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
index.js