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

透過 JavaScript 使用 Yahoo 驗證

您可以使用 Firebase SDK 將一般 OAuth 登入整合至您的應用程式，讓使用者透過 OAuth 供應商向 Firebase 進行驗證，藉此執行端對端登入流程。

事前準備

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

將 Firebase 新增至您的 JavaScript 專案。
在 Firebase 控制台開啟「驗證」專區。
在「登入方式」分頁中，啟用 Yahoo 供應商。
從供應商的 Play 管理中心，新增「用戶端 ID」和「用戶端密鑰」到供應商設定：
1. 如要註冊 Yahoo OAuth 用戶端，請按照 Yahoo 開發人員說明文件向 Yahoo 註冊網頁應用程式中的指示操作。
  
  請務必選取以下兩項 OpenID Connect API 權限：profile 和 email。
2. 向這些供應商註冊應用程式時，請務必為專案的 *.firebaseapp.com 網域註冊應用程式的重新導向網域。
點選「Save」。

使用 Firebase SDK 處理登入流程

如要建構網頁應用程式，使用 Yahoo 帳戶透過 Firebase 驗證使用者最簡單的方式，就是透過 Firebase JavaScript SDK 處理整個登入流程。

如要使用 Firebase JavaScript SDK 處理登入流程，請按照下列步驟操作：

使用提供者 ID yahoo.com 建立 OAuthProvider 的執行個體。

網頁模組 API

import { OAuthProvider } from "firebase/auth";

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

網路命名空間 API

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

選用：指定要與 OAuth 要求一起傳送的其他自訂 OAuth 參數。
網頁模組 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
```
網路命名空間 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。
選用：指定您想向驗證供應商要求的額外 OAuth 2.0 範圍 (超過 profile 和 email)。如果您的應用程式需要透過 Yahoo API 存取使用者私人資料，您就必須前往 Yahoo 開發人員主控台的 API 權限，向 Yahoo API 要求權限。要求的 OAuth 範圍必須與應用程式 API 權限中的預先設定範圍完全相符。舉例來說，如果向使用者聯絡人要求讀取/寫入權限，並在應用程式的 API 權限中預先設定，就必須傳遞 sdct-w，而非唯讀 OAuth 範圍 sdct-r。否則資料流會失敗，且使用者會看到錯誤訊息。
網頁模組 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
```
網路命名空間 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 範圍說明文件。

使用 OAuth 提供者物件向 Firebase 進行驗證。您可以開啟彈出式視窗或重新導向至登入頁面，提示使用者使用自己的 Yahoo 帳戶登入。建議在行動裝置上使用重新導向方法。

如要透過彈出式視窗登入，請呼叫 signInWithPopup：

網頁模組 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

網路命名空間 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 來取得登入結果。

網頁模組 API

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

const auth = getAuth();
signInWithRedirect(auth, provider);auth_yahoo_signin_redirect.js

網路命名空間 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 是可從 firebase.auth().currentUser.providerData[0].uid 欄位或 result.additionalUserInfo.profile 擷取的 Yahoo 使用者 ID。

雖然上述範例著重於登入流程，但您也可以使用 linkWithPopup/linkWithRedirect 將 Yahoo 供應商連結至現有使用者。舉例來說，您可以將多個提供者連結至同一個使用者，讓對方透過任一提供者登入。

網頁模組 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

網路命名空間 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

相同的模式可與 reauthenticateWithPopup/reauthenticateWithRedirect 搭配使用，針對需要近期登入的敏感作業擷取最新憑證。

網頁模組 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

網路命名空間 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) 時，系統會擲回 AuthCredential 物件 (Yahoo 憑證) 和 AuthCredential 物件 (Yahoo 憑證)。auth/account-exists-with-different-credential如要完成目標提供者的登入程序，使用者必須先登入現有的提供者 (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) {
  // ...
}

重新導向模式

這項錯誤的處理方式與重新導向模式類似，但不同頁面重新導向之間必須快取待處理憑證 (例如使用工作階段儲存空間)。

與 Google、Facebook 和 Twitter 等 Firebase 支援的其他 OAuth 提供者不同，後者可使用 OAuth 存取權杖式憑證直接登入，由於 Firebase 驗證伺服器無法驗證 Yahoo OAuth 存取權杖的目標對象，因此 Firebase 驗證不支援類似 Yahoo 這類供應商的功能。這是重大的安全要求，可能會使應用程式和網站暴露在重送攻擊中，攻擊者可以使用為某個專案 (攻擊者) 取得的 Yahoo OAuth 存取權杖登入其他專案 (受害者)。相反地，Firebase 驗證可使用在 Firebase 控制台中設定的 OAuth 用戶端 ID 和密鑰，處理整個 OAuth 流程和授權碼交換。由於授權碼只能與特定用戶端 ID/密鑰搭配使用，因此為某項專案取得的授權碼不能與其他專案搭配使用。

如果必須在不支援的環境中使用這些提供者，就需要使用第三方 OAuth 程式庫和 Firebase 自訂驗證。前者須與提供者進行驗證，後者需要交換提供者的憑證，以用於自訂權杖。

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

如要建構 Chrome 擴充功能應用程式，請參閱螢幕外文件指南。

建立專案時，Firebase 會為專案佈建一個專屬的子網域：https://my-app-12345.firebaseapp.com。

這也會用來做為 OAuth 登入的重新導向機制。所有支援的 OAuth 供應商均須允許該網域。不過，這意味著，在重新導向返回應用程式前，使用者可能會在登入 Yahoo 可能會看到該網域：Continue to: https://my-app-12345.firebaseapp.com。

如要避免顯示子網域，你可以透過 Firebase 託管設定自訂網域：

按照為託管設定網域中的步驟 1 至 3 操作。驗證網域擁有權之後，「託管」會為您的自訂網域佈建安全資料傳輸層 (SSL) 憑證。
將您的自訂網域新增至 Firebase 控制台的授權網域清單：auth.custom.domain.com。
在 Yahoo 開發人員主控台或 OAuth 設定頁面中，將重新導向網頁網址 (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 即時資料庫和 Cloud Storage 安全性規則中，您可以透過 auth 變數取得登入使用者的專屬 ID，並使用該 ID 控管使用者可存取哪些資料。

您可以將驗證供應商憑證連結至現有的使用者帳戶，讓使用者透過多個驗證服務提供者登入您的應用程式。

如要登出使用者，請呼叫 signOut：

網頁模組 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

網路命名空間 API

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

透過 JavaScript 使用 Yahoo 驗證

事前準備

使用 Firebase SDK 處理登入流程

網頁模組 API

網路命名空間 API

網頁模組 API

網路命名空間 API

網頁模組 API

網路命名空間 API

網頁模組 API

網路命名空間 API

網頁模組 API

網路命名空間 API

網頁模組 API

網路命名空間 API

網頁模組 API

網路命名空間 API

處理具有不同憑證錯誤的帳戶

彈出式視窗模式

重新導向模式

進階：手動處理登入流程

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

自訂 Yahoo 登入的重新導向網域

後續步驟

網頁模組 API

網路命名空間 API