使用 Yahoo 和 JavaScript 進行身份驗證

您可以使用 Firebase SDK 將通用 OAuth 登入整合到您的應用程式中，以執行端對端登入流程，讓您的使用者使用 Yahoo 等 OAuth 提供者透過 Firebase 進行身份驗證。

在你開始之前

若要使用 Yahoo 帳戶登入用戶，您必須先啟用 Yahoo 作為 Firebase 專案的登入提供者：

1. 將 Firebase 新增到您的 JavaScript 專案。
2. 在Firebase 控制台中，開啟「驗證」部分。
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 yahoo.com建立OAuthProvider的實例。

   Web modular API

   詳細了解可樹搖動的模組化 Web API 以及從命名空間 API進行升級。

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

   Web namespaced API

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

2. 可選：指定要與 OAuth 請求一起傳送的其他自訂 OAuth 參數。

   Web modular API

   詳細了解可樹搖動的模組化 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 namespaced API

   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 modular API

   詳細了解可樹搖動的模組化 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 namespaced 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');
   yahoo-oauth.js

   要了解更多信息，請參閱Yahoo 範圍文件。

4. 使用 OAuth 提供者物件透過 Firebase 進行身份驗證。您可以透過開啟彈出視窗或重定向到登入頁面來提示使用者使用其 Yahoo 帳戶登入。重定向方法在行動裝置上是首選。

   • 若要使用彈出視窗登錄，請呼叫signInWithPopup ：

     Web modular API

     詳細了解可樹搖動的模組化 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 namespaced API

     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 modular API

   詳細了解可樹搖動的模組化 Web API 以及從命名空間 API進行升級。

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

   Web namespaced API

   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 modular API

   詳細了解可樹搖動的模組化 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 namespaced API

   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 modular API

   詳細了解可樹搖動的模組化 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 namespaced API

   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 （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）不同，Firebase Auth 可以直接使用基於OAuth 存取權杖的憑證來實現登錄，而Firebase Auth 不支援Yahoo 等提供者的相同功能，因為Firebase 無法提供相同的功能。 Firebase Auth 伺服器用於驗證 Yahoo OAuth 存取權杖的受眾。這是一項關鍵的安全要求，可能會使應用程式和網站遭受重播攻擊，其中為一個專案（攻擊者）獲得的 Yahoo OAuth 存取權令牌可用於登入另一個專案（受害者）。相反，Firebase Auth 能夠使用 Firebase 控制台中配置的 OAuth 用戶端 ID 和金鑰來處理整個 OAuth 流程和授權程式碼交換。由於授權代碼只能與特定的客戶端 ID/秘密一起使用，因此為一個專案獲得的授權代碼不能與另一個項目一起使用。

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

在 Chrome 擴充功能中使用 Firebase 進行驗證

如果您正在建立 Chrome 擴充功能應用程式，則必須新增您的 Chrome 擴充功能 ID：

1. 在Firebase 控制台中開啟您的專案。
2. 在「身份驗證」部分中，開啟「登入方法」頁面。
3. 將如下所示的 URI 加入到授權網域清單中：

   chrome-extension://CHROME_EXTENSION_ID

Chrome 擴充功能只能使用彈出操作（ signInWithPopup 、 linkWithPopup和reauthenticateWithPopup ），因為 Chrome 擴充功能無法使用 HTTP 重新導向。您應該從後台頁面腳本而不是瀏覽器操作彈出視窗呼叫這些方法，因為身份驗證彈出視窗將取消瀏覽器操作彈出視窗。彈出方法只能在使用Manifest V2 的擴充中使用。較新的Manifest V3只允許 Service Worker 形式的後台腳本，根本無法執行彈出操作。

在 Chrome 擴充功能的清單檔案中，請確保將https://apis.google.com網址新增至content_security_policy白名單中。

自訂 Yahoo 登入的重定向網域

在建立專案時，Firebase 將為您的專案提供一個唯一的子網域： https://my-app-12345.firebaseapp.com 。

這也將用作 OAuth 登入的重定向機制。所有受支援的 OAuth 提供者都需要允許該網域。但是，這表示使用者在登入 Yahoo 時可能會看到該網域，然後再重定向回應用程式：繼續造訪： https://my-app-12345.firebaseapp.com 。

為了避免顯示您的子網域，您可以使用 Firebase Hosting 設定自訂網域：

1. 請依照設定您的託管網域中的步驟 1 到 3 進行操作。當您驗證網域所有權時，託管會為您的自訂網域提供 SSL 憑證。
2. 將您的自訂網域新增至Firebase 控制台中的授權網域清單： auth.custom.domain.com 。
3. 在 Yahoo 開發人員控制台或 OAuth 設定頁面中，將重定向頁面的 URL 列入白名單，該頁面可在您的自訂網域中存取： https://auth.custom.domain.com/__/auth/handler 。
4. 初始化 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 modular API

詳細了解可樹搖動的模組化 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 namespaced API

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