您可以讓使用者使用 OAuth 供應商通過 Firebase 驗證,例如 透過 Firebase SDK 將一般 OAuth 登入整合至您的應用程式,以改善 Yahoo, 執行端對端登入流程
事前準備
如要使用 Yahoo 帳戶登入使用者,您必須先啟用 Yahoo 做為登入方式 為 Firebase 專案提供供應商:
- 將 Firebase 新增至您的 JavaScript 專案。
- 在 Firebase 控制台中開啟「Auth」專區。
- 在「登入方式」分頁中,啟用 Yahoo 供應商。
- 將供應商開發人員主控台中的「用戶端 ID」和「用戶端密鑰」新增至
提供者設定:
-
如要註冊 Yahoo OAuth 用戶端,請按照 Yahoo 開發人員的指示操作 的說明文件 向 Yahoo 註冊網頁應用程式。
請務必選取以下兩項 OpenID Connect API 權限: 《
profile
》和《email
》。 - 向這些供應商註冊應用程式時,請務必註冊
專案的
*.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');
Web
var provider = new firebase.auth.OAuthProvider('yahoo.com');
選用:指定您想要的其他自訂 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_uri、response_type、scope 和 state。選用:指定
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 範圍說明文件。
使用 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 使用者 IDfirebase.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. });
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. });
相同的模式
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 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. });
Web
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });