您可以將 Twitter 驗證整合至您的應用程式,讓使用者使用自己的 Twitter 帳戶進行驗證。如要整合 Twitter 驗證,可使用 Firebase SDK 執行登入流程,或手動執行 Twitter OAuth 流程,並將產生的存取權杖和密鑰傳送至 Firebase。
事前準備
- 將 Firebase 新增至您的 JavaScript 專案。
- 在 Firebase 控制台開啟「驗證」專區。
- 在「Sign in method」分頁中,啟用 Twitter 供應商。
- 將供應商開發人員主控台中的 API 金鑰和 API 密鑰新增至供應商設定:
- 在 Twitter 上將應用程式註冊為開發人員應用程式,並取得應用程式的 OAuth API 金鑰和 API 密鑰。
- 前往 Twitter 應用程式設定的應用程式設定頁面,確認 Firebase OAuth 重新導向 URI (例如
my-app-12345.firebaseapp.com/__/auth/handler
) 已設為「授權回呼網址」。
- 點選「Save」。
使用 Firebase SDK 處理登入流程
如要建構網頁應用程式,使用 Twitter 帳戶透過 Firebase 驗證使用者最簡單的方式,就是處理使用 Firebase JavaScript SDK 的登入流程。(如果您要在 Node.js 或其他非瀏覽器環境驗證使用者,則必須手動處理登入流程)。
如要使用 Firebase JavaScript SDK 處理登入流程,請按照下列步驟操作:
- 建立 Twitter 提供者物件的例項:
網頁模組 API
import { TwitterAuthProvider } from "firebase/auth"; const provider = new TwitterAuthProvider();
網路命名空間 API
var provider = new firebase.auth.TwitterAuthProvider();
- 選用:如要將提供者的 OAuth 流程本地化到使用者偏好的語言,但不明確傳遞相關的自訂 OAuth 參數,請先更新驗證執行個體上的語言代碼,再啟動 OAuth 流程。例如:
網頁模組 API
import { getAuth } from "firebase/auth"; const auth = getAuth(); auth.languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // auth.useDeviceLanguage();
網路命名空間 API
firebase.auth().languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // firebase.auth().useDeviceLanguage();
- 選用:指定要與 OAuth 要求一起傳送的其他自訂 OAuth 供應商參數。如要新增自訂參數,請在已初始化的提供者上呼叫
setCustomParameters
,並使用包含 OAuth 供應商說明文件指定的金鑰和對應值的物件。例如:網頁模組 API
provider.setCustomParameters({ 'lang': 'es' });
網路命名空間 API
provider.setCustomParameters({ 'lang': 'es' });
- 使用 Twitter 供應商物件向 Firebase 進行驗證。您可以開啟彈出式視窗或重新導向至登入頁面,提示使用者登入自己的 Twitter 帳戶。建議在行動裝置上使用重新導向方法。
- 如要在彈出式視窗中登入,請呼叫
signInWithPopup
:網頁模組 API
import { getAuth, signInWithPopup, TwitterAuthProvider } from "firebase/auth"; const auth = getAuth(); signInWithPopup(auth, provider) .then((result) => { // This gives you a the Twitter OAuth 1.0 Access Token and Secret. // You can use these server side with your app's credentials to access the Twitter API. const credential = TwitterAuthProvider.credentialFromResult(result); const token = credential.accessToken; const secret = credential.secret; // The signed-in user info. const user = result.user; // IdP data available using getAdditionalUserInfo(result) // ... }).catch((error) => { // Handle Errors here. const errorCode = error.code; const errorMessage = error.message; // The email of the user's account used. const email = error.customData.email; // The AuthCredential type that was used. const credential = TwitterAuthProvider.credentialFromError(error); // ... });
網路命名空間 API
firebase .auth() .signInWithPopup(provider) .then((result) => { /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // This gives you a the Twitter OAuth 1.0 Access Token and Secret. // You can use these server side with your app's credentials to access the Twitter API. var token = credential.accessToken; var secret = credential.secret; // The signed-in user info. var user = result.user; // IdP data available in result.additionalUserInfo.profile. // ... }).catch((error) => { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // The email of the user's account used. var email = error.email; // The firebase.auth.AuthCredential type that was used. var credential = error.credential; // ... });
您也能在這裡找出並處理錯誤。如需錯誤代碼清單,請參閱驗證參考文件。
- 如要重新導向至登入頁面,請呼叫
signInWithRedirect
:使用「signInWithRedirect」時,請按照最佳做法操作。網頁模組 API
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
網路命名空間 API
firebase.auth().signInWithRedirect(provider);
getRedirectResult
,擷取 Twitter 供應商的 OAuth 權杖:網頁模組 API
import { getAuth, getRedirectResult, TwitterAuthProvider } from "firebase/auth"; const auth = getAuth(); getRedirectResult(auth) .then((result) => { // This gives you a the Twitter OAuth 1.0 Access Token and Secret. // You can use these server side with your app's credentials to access the Twitter API. const credential = TwitterAuthProvider.credentialFromResult(result); const token = credential.accessToken; const secret = credential.secret; // ... // The signed-in user info. const user = result.user; // IdP data available using getAdditionalUserInfo(result) // ... }).catch((error) => { // Handle Errors here. const errorCode = error.code; const errorMessage = error.message; // The email of the user's account used. const email = error.customData.email; // The AuthCredential type that was used. const credential = TwitterAuthProvider.credentialFromError(error); // ... });
網路命名空間 API
firebase.auth() .getRedirectResult() .then((result) => { if (result.credential) { /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // This gives you a the Twitter OAuth 1.0 Access Token and Secret. // You can use these server side with your app's credentials to access the Twitter API. var token = credential.accessToken; var secret = credential.secret; // ... } // The signed-in user info. var user = result.user; // IdP data available in result.additionalUserInfo.profile. // ... }).catch((error) => { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // The email of the user's account used. var email = error.email; // The firebase.auth.AuthCredential type that was used. var credential = error.credential; // ... });
- 如要在彈出式視窗中登入,請呼叫
手動處理登入流程
您也可以透過呼叫 Twitter OAuth 端點來處理登入流程,使用 Twitter 帳戶向 Firebase 進行驗證:
- 按照 開發人員說明文件的說明,將 Twitter 驗證整合至您的應用程式。Twitter 登入流程結束時,您會收到 OAuth 存取權杖和 OAuth 密鑰。
- 如果您需要登入 Node.js 應用程式,請將 OAuth 存取權杖和 OAuth 密鑰傳送至 Node.js 應用程式。
- 使用者成功登入 Twitter 後,請以 OAuth 存取權杖和 OAuth 密鑰交換 Firebase 憑證:
var credential = firebase.auth.TwitterAuthProvider.credential(token, secret);
- 使用 Firebase 憑證向 Firebase 進行驗證:
網頁模組 API
import { getAuth, signInWithCredential, FacebookAuthProvider } from "firebase/auth"; // Sign in with the credential from the Facebook user. const auth = getAuth(); signInWithCredential(auth, credential) .then((result) => { // Signed in const credential = FacebookAuthProvider.credentialFromResult(result); }) .catch((error) => { // Handle Errors here. const errorCode = error.code; const errorMessage = error.message; // The email of the user's account used. const email = error.customData.email; // The AuthCredential type that was used. const credential = FacebookAuthProvider.credentialFromError(error); // ... });
網路命名空間 API
// Sign in with the credential from the Facebook user. firebase.auth().signInWithCredential(credential) .then((result) => { // Signed in var credential = result.credential; // ... }) .catch((error) => { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // The email of the user's account used. var email = error.email; // The firebase.auth.AuthCredential type that was used. var credential = error.credential; // ... });
在 Chrome 擴充功能中使用 Firebase 驗證
如要建構 Chrome 擴充功能應用程式,請參閱 螢幕外文件指南。
後續步驟
使用者首次登入時,系統會建立新的使用者帳戶,並連結至憑證 (即使用者名稱與密碼、電話號碼或驗證提供者資訊),也就是使用者登入時使用的憑證。這個新帳戶會儲存在您的 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. });
網路命名空間 API
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });