本頁面由 Cloud Translation API 翻譯而成。

Switch to English

使用帶有 JavaScript 的 Yahoo 進行身份驗證

您可以通過使用 Firebase SDK 將通用 OAuth 登錄集成到您的應用中來執行端到端登錄流程，從而讓您的用戶使用 Yahoo 等 OAuth 提供商向 Firebase 進行身份驗證。

在你開始之前

要使用 Yahoo 帳戶登錄用戶，您必須首先啟用 Yahoo 作為 Firebase 項目的登錄提供程序：

將 Firebase 添加到您的 JavaScript 項目中。
在Firebase 控制台中，打開Auth部分。
在登錄方法選項卡上，啟用Yahoo提供程序。
將該提供者的開發者控制台中的客戶端 ID和客戶端密碼添加到提供者配置中：
1. 要註冊 Yahoo OAuth 客戶端，請遵循 Yahoo 開發人員文檔中關於向 Yahoo註冊 Web 應用程序的操作。
  請務必選擇兩個 OpenID Connect API 權限： profile和email 。
2. 向這些提供商註冊應用程序時，請務必將項目的*.firebaseapp.com域註冊為應用程序的重定向域。
單擊保存。

使用 Firebase SDK 處理登錄流程

如果您正在構建一個網絡應用程序，使用他們的 Yahoo 帳戶通過 Firebase 對您的用戶進行身份驗證的最簡單方法是使用 Firebase JavaScript SDK 處理整個登錄流程。

要使用 Firebase JavaScript SDK 處理登錄流程，請按以下步驟操作：

使用提供者 ID yahoo.com創建OAuthProvider的實例。

Web version 9

import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('yahoo.com');auth_yahoo_provider_create.js

Web version 8

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

可選：指定要隨 OAuth 請求一起發送的其他自定義 OAuth 參數。
Web version 9
詳細了解可搖樹的 Web v9 模塊化 SDK 並從版本 8升級。
```
provider.setCustomParameters({
  // Prompt user to re-authenticate to Yahoo.
  prompt: 'login',
  // Localize to French.
  language: 'fr'
});  auth_yahoo_provider_params.js
```
Web version 8
```
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 。
可選：指定要從身份驗證提供程序請求的profile和email之外的其他 OAuth 2.0 範圍。如果您的應用程序需要從 Yahoo API 訪問私有用戶數據，您需要在 Yahoo 開發者控制台的API Permissions下請求對 Yahoo API 的權限。請求的 OAuth 範圍必須與應用 API 權限中預配置的範圍完全匹配。例如，如果向用戶聯繫人請求讀/寫訪問權限並在應用程序的 API 權限中預配置，則必須傳遞sdct-w而不是只讀 OAuth 範圍sdct-r 。否則，流程將失敗，並向最終用戶顯示錯誤。
Web version 9
詳細了解可搖樹的 Web v9 模塊化 SDK 並從版本 8升級。
```
// 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 version 8
```
// 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 範圍文檔。

使用 OAuth 提供程序對象向 Firebase 進行身份驗證。您可以通過打開一個彈出窗口或重定向到登錄頁面來提示您的用戶使用他們的 Yahoo 帳戶登錄。重定向方法在移動設備上是首選。

要使用彈出窗口登錄，請調用signInWithPopup ：

Web version 9

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 version 8

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 ：
```
firebase.auth().signInWithRedirect(provider);
```
用戶完成登錄並返回頁面後，可以通過調用getRedirectResult獲取登錄結果。
Web version 9
詳細了解可搖樹的 Web v9 模塊化 SDK 並從版本 8升級。
```
import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);auth_yahoo_signin_redirect.js
```
Web version 8
```
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 firebase.auth().currentUser.providerData[0].uid字段或result.additionalUserInfo.profile中檢索。

雖然上述示例側重於登錄流程，但您還可以使用linkWithPopup / linkWithRedirect將 Yahoo 提供程序鏈接到現有用戶。例如，您可以將多個提供商鏈接到同一個用戶，允許他們使用其中任何一個登錄。

Web version 9

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 version 8

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

相同的模式可以與reauthenticateWithPopup / reauthenticateWithRedirect一起使用，可用於檢索需要最近登錄的敏感操作的新憑據。

Web version 9

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 version 8

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

處理具有不同憑據的帳戶存在錯誤

如果您在Firebase 控制台中啟用了每個電子郵件地址一個帳戶設置，當用戶嘗試使用其他 Firebase 用戶的提供商（例如 Google）已經存在的電子郵件登錄到提供商（例如 Yahoo）時，錯誤auth/account-exists-with-different-credential與AuthCredential對象（Yahoo 憑據）一起拋出。要完成對預期提供商的登錄，用戶必須先登錄現有提供商 (Google)，然後鏈接到以前的AuthCredential （雅虎憑據）。

如果您使用signInWithPopup ，您可以使用如下示例的代碼處理auth/account-exists-with-different-credential錯誤：


// Step 1.
// User tries to sign in to Yahoo.
auth.signInWithPopup(new firebase.auth.OAuthProvider('yahoo.com')).catch(function(error) {
  // An error happened.
  if (error.code === 'auth/account-exists-with-different-credential') {
    // Step 2.
    // User's email already exists.
    // The pending Yahoo credential.
    var pendingCred = error.credential;
    // The provider account's email address.
    var email = error.email;
    // Get sign-in methods for this email.
    auth.fetchSignInMethodsForEmail(email).then(function(methods) {
      // Step 3.
      // If the user has several sign-in methods,
      // the first method in the list will be the "recommended" method to use.
      if (methods[0] === 'password') {
        // Asks the user their password.
        // In real scenario, you should handle this asynchronously.
        var password = promptUserForPassword(); // TODO: implement promptUserForPassword.
        auth.signInWithEmailAndPassword(email, password).then(function(result) {
          // Step 4a.
          return result.user.linkWithCredential(pendingCred);
        }).then(function() {
          // Yahoo account successfully linked to the existing Firebase user.
          goToApp();
        });
        return;
      }
      // All the other cases are external providers.
      // Construct provider object for that provider.
      // TODO: implement getProviderForProviderId.
      var provider = getProviderForProviderId(methods[0]);
      // At this point, you should let the user know that they already have an account
      // but with a different provider, and let them validate the fact they want to
      // sign in with this provider.
      // Sign in to provider. Note: browsers usually block popup triggered asynchronously,
      // so in real scenario you should ask the user to click on a "continue" button
      // that will trigger the signInWithPopup.
      auth.signInWithPopup(provider).then(function(result) {
        // Remember that the user may have signed in with an account that has a different email
        // address than the first one. This can happen as Firebase doesn't control the provider's
        // sign in flow and the user is free to login using whichever account they own.
        // Step 4b.
        // Link to Yahoo credential.
        // As we have access to the pending credential, we can directly call the link method.
        result.user.linkAndRetrieveDataWithCredential(pendingCred).then(function(usercred) {
          // Yahoo account successfully linked to the existing Firebase user.
          goToApp();
        });
      });
    });
  }
});

重定向模式

此錯誤在重定向模式中以類似的方式處理，不同之處在於必須在頁面重定向之間緩存掛起的憑據（例如，使用會話存儲）。

與 Firebase 支持的其他 OAuth 提供者（例如 Google、Facebook 和 Twitter）不同，可以使用基於 OAuth 訪問令牌的憑據直接實現登錄，Firebase Auth 不支持提供者（例如 Yahoo）的相同功能，因為無法使用Firebase 身份驗證服務器，用於驗證 Yahoo OAuth 訪問令牌的受眾。這是一項關鍵的安全要求，可能會使應用程序和網站遭受重放攻擊，其中為一個項目（攻擊者）獲得的 Yahoo OAuth 訪問令牌可用於登錄另一個項目（受害者）。相反，Firebase Auth 提供了使用在 Firebase 控制台中配置的 OAuth 客戶端 ID 和密碼來處理整個 OAuth 流程和授權代碼交換的能力。由於授權碼只能與特定的客戶 ID/密碼一起使用，因此為一個項目獲得的授權碼不能與另一個項目一起使用。

如果需要在不受支持的環境中使用這些提供程序，則需要使用第三方 OAuth 庫和Firebase 自定義身份驗證。前者需要與提供者進行身份驗證，後者需要將提供者的憑據交換為自定義令牌。

在 Chrome 擴展程序中使用 Firebase 進行身份驗證

如果您正在構建 Chrome 擴展應用程序，則必須添加您的 Chrome 擴展 ID：

在Firebase 控制台中打開您的項目。
在身份驗證部分中，打開登錄方法頁面。
將如下 URI 添加到授權域列表中：
```
chrome-extension://CHROME_EXTENSION_ID
```

Chrome 擴展程序只能使用彈出操作（ signInWithPopup 、 linkWithPopup和reauthenticateWithPopup ），因為 Chrome 擴展程序不能使用 HTTP 重定向。您應該從後台頁面腳本而不是瀏覽器操作彈出窗口調用這些方法，因為身份驗證彈出窗口將取消瀏覽器操作彈出窗口。彈出方法只能用於使用Manifest V2的擴展。較新的Manifest V3只允許服務工作者形式的後台腳本，根本無法執行彈出操作。

在 Chrome 擴展程序的清單文件中，確保將https://apis.google.com URL 添加到content_security_policy許可名單。

在創建項目時，Firebase 將為您的項目配置一個唯一的子域： https://my-app-12345.firebaseapp.com ://my-app-12345.firebaseapp.com。

這也將用作 OAuth 登錄的重定向機制。所有受支持的 OAuth 提供者都需要允許該域。但是，這意味著用戶在登錄到 Yahoo 時可能會看到該域，然後重定向回應用程序：繼續：https://my-app-12345.firebaseapp.com 。

為避免顯示您的子域，您可以使用 Firebase 託管設置自定義域：

按照為託管設置域中的步驟 1 到 3 進行操作。當您驗證您的域所有權時，Hosting 會為您的自定義域提供 SSL 證書。
將您的自定義域添加到Firebase 控制台中的授權域列表： auth.custom.domain.com 。
在 Yahoo 開發者控制台或 OAuth 設置頁面中，將重定向頁面的 URL 列入白名單，該 URL 可在您的自定義域上訪問： https://auth.custom.domain.com/__/auth/handler 。

初始化 JavaScript 庫時，使用authDomain字段指定您的自定義域：

var config = {
  apiKey: '...',
  // Changed from 'my-app-12345.firebaseapp.com'.
  authDomain: 'auth.custom.domain.com',
  databaseURL: 'https://my-app-12345.firebaseio.com',
  projectId: 'my-app-12345',
  storageBucket: 'my-app-12345.appspot.com',
  messagingSenderId: '1234567890'
};
firebase.initializeApp(config);

下一步

用戶首次登錄後，會創建一個新用戶帳戶並將其鏈接到憑據（即用戶名和密碼、電話號碼或身份驗證提供商信息），即用戶登錄時使用的憑據。這個新帳戶作為 Firebase 項目的一部分存儲，可用於在項目中的每個應用中識別用戶，無論用戶如何登錄。

在您的應用程序中，了解用戶身份驗證狀態的推薦方法是在Auth對像上設置觀察者。然後，您可以從User對像中獲取用戶的基本配置文件信息。請參閱管理用戶。
在您的 Firebase 實時數據庫和雲存儲安全規則中，您可以從auth變量中獲取登錄用戶的唯一用戶 ID，並使用它來控制用戶可以訪問哪些數據。

您可以通過將身份驗證提供程序憑據鏈接到現有用戶帳戶來允許用戶使用多個身份驗證提供程序登錄您的應用程序。

要註銷用戶，請調用signOut ：

Web version 9

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 version 8

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

使用帶有 JavaScript 的 Yahoo 進行身份驗證

在你開始之前

使用 Firebase SDK 處理登錄流程

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

處理具有不同憑據的帳戶存在錯誤

彈出模式

重定向模式

高級：手動處理登錄流程

在 Chrome 擴展程序中使用 Firebase 進行身份驗證

為 Yahoo 登錄自定義重定向域

下一步

Web version 9

Web version 8