透過 JavaScript 使用 Yahoo 驗證

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

事前準備

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

  1. 將 Firebase 新增至您的 JavaScript 專案
  2. Firebase 控制台中開啟「Auth」專區。
  3. 在「登入方式」分頁中,啟用 Yahoo 供應商。
  4. 將供應商開發人員主控台中的「用戶端 ID」和「用戶端密鑰」新增至 提供者設定:
    1. 如要註冊 Yahoo OAuth 用戶端,請按照 Yahoo 開發人員的指示操作 的說明文件 向 Yahoo 註冊網頁應用程式

      請務必選取以下兩項 OpenID Connect API 權限: 《profile》和《email》。

    2. 向這些供應商註冊應用程式時,請務必註冊 專案的 *.firebaseapp.com 網域,做為專案的重新導向網域 應用程式。
  5. 按一下 [儲存]

使用 Firebase SDK 處理登入流程

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

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

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

    Web

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

    Web

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
  2. 選用:指定您想要的其他自訂 OAuth 參數。 與 OAuth 要求一起傳送

    Web

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

    Web

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

    如需 Yahoo 支援的參數,請參閱 Yahoo OAuth 說明文件。 請注意,您無法透過 setCustomParameters()。這些參數都是 client_id redirect_uriresponse_typescopestate

  3. 選用:指定 profile 和 以外其他 OAuth 2.0 範圍 您想要向驗證供應商要求的 email。如果您的 應用程式必須從 Yahoo API 存取使用者私人資料,而您 必須向 Yahoo API 提出「API 權限」要求 Yahoo! 開發人員控制台。要求的 OAuth 範圍必須與 。舉例來說,如果讀取/寫入 應用程式將要求存取使用者聯絡人,並在應用程式的 API 中預先設定 權限,必須傳遞 sdct-w,而非唯讀 OAuth 範圍 sdct-r。否則流程將失敗,且會向 而非個別使用者的帳戶

    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');

    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 範圍說明文件

  4. 使用 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.
        });

      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.
        });
    • 如要重新導向至登入頁面,請呼叫 signInWithRedirect

      firebase.auth().signInWithRedirect(provider);
      

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

    Web

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

    Web

    firebase.auth().signInWithRedirect(provider);

    成功完成後,相關聯的 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

  5. 以上範例著重登入流程,不過您可以 使用 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.
        });

    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.
        });
  6. 相同的模式 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.
        });

    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.
        });

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

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

後續步驟

使用者首次登入後,系統會建立新的使用者帳戶 也就是使用者的名稱和密碼 號碼或驗證提供者資訊,也就是使用者登入時使用的網址。這項新功能 帳戶儲存為 Firebase 專案的一部分,可用來識別 即可限制使用者登入專案中的所有應用程式

  • 在應用程式中得知使用者的驗證狀態,建議做法是 在 Auth 物件上設定觀察器。接著,您就能取得使用者的 User 物件的基本個人資料資訊。詳情請見 管理使用者

  • 在你的Firebase Realtime DatabaseCloud 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.
});

Web

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