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

透過 JavaScript 使用 Yahoo 驗證

您可以讓使用者使用 OAuth 供應商通過 Firebase 驗證，例如透過 Firebase SDK 將一般 OAuth 登入整合至您的應用程式，以改善 Yahoo，執行端對端登入流程

事前準備

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

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

使用 Firebase SDK 處理登入流程

如要建構網頁應用程式，最簡單的方法就是 Firebase 使用 Yahoo 帳戶來處理整個登入流程已與 Firebase JavaScript SDK 整合

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

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

Web

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

選用：指定您想要的其他自訂 OAuth 參數。與 OAuth 要求一起傳送
Web

瞭解詳情進一步瞭解可樹狀結構的模組化 Web 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()。這些參數都是 client_id redirect_uri、response_type、scope 和 state。
選用：指定 profile 和以外其他 OAuth 2.0 範圍您想要向驗證供應商要求的 email。如果您的應用程式必須從 Yahoo API 存取使用者私人資料，而您必須向 Yahoo API 提出「API 權限」要求 Yahoo! 開發人員控制台。要求的 OAuth 範圍必須與。舉例來說，如果讀取/寫入應用程式會要求存取使用者聯絡人，並在應用程式的 API 中預先設定權限，必須傳遞 sdct-w，而非唯讀 OAuth 範圍 sdct-r。否則流程將失敗，且會向而非個別使用者的帳戶
Web

瞭解詳情進一步瞭解可樹狀結構的模組化 Web 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 範圍說明文件。

使用 OAuth 提供者物件向 Firebase 進行驗證。您可以提示使用者只要開啟彈出式視窗，或重新導向至登入頁面。重新導向方法是在行動裝置上顯示。

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

Web

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：

  firebase.auth().signInWithRedirect(provider);

使用者完成登入並返回頁面後，您就可以取得呼叫 getRedirectResult 來取得登入結果。

Web

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

成功完成後，相關聯的 OAuth ID 權杖和存取權杖無法從 firebase.auth.UserCredential 擷取物件。

使用 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。

以上範例著重登入流程，不過您可以使用 linkWithPopup/linkWithRedirect。舉例來說以便將兩者登入

Web

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

相同的模式 reauthenticateWithPopup/reauthenticateWithRedirect，可用於為需要近期執行的敏感作業擷取新憑證登入。

Web

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

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

如果您已在 Firebase 控制台中啟用「每個電子郵件地址一個帳戶」設定：使用者嘗試使用現有的電子郵件地址登入供應器 (例如 Yahoo) 時與其他 Firebase 使用者的供應商 (例如 Google) 重複，發生錯誤 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 無法使用驗證伺服器，用於驗證 Yahoo OAuth 存取權杖的目標對象。這是重大的安全需求，可能會公開應用程式和網站重新發動攻擊，亦即為一個專案 (攻擊者) 可用來登入另一個專案 (受害者)。而是讓 Firebase 驗證能夠處理整個 OAuth 流程，使用 OAuth 用戶端 ID 和密鑰進行授權碼交換就可在 Firebase 控制台設定因為授權碼搭配特定的用戶端 ID/密鑰 (授權碼) 每項專案取得的均無法與另一項專案搭配使用

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

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

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

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

這也會用來做為 OAuth 登入的重新導向機制。網域允許所有支援的 OAuth 供應商。不過，這表示使用者可能會看到網域登入 Yahoo，然後再重新導向至應用程式： 繼續前往：https://my-app-12345.firebaseapp.com。

如要避免顯示子網域，你可以使用 Firebase Hosting 設定自訂網域：

按照以下步驟 1 到 3：為 Hosting 設定網域。完成驗證後的影響您的網域擁有權，Hosting 會為自訂網域佈建 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 Realtime Database和Cloud Storage中查看安全性規則透過 auth 變數取得已登入使用者的不重複使用者 ID。控管使用者可以存取的資料

您可以讓使用者透過多重驗證機制登入您的應用程式將驗證供應商憑證連結至現有的使用者帳戶

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

Web

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

透過 JavaScript 使用 Yahoo 驗證

事前準備

使用 Firebase SDK 處理登入流程

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

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

彈出式視窗模式

重新導向模式

進階：手動處理登入流程

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

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

後續步驟

Web

Web