在 JavaScript 中使用 Twitter 驗證

您可以將 Twitter 驗證整合至您的應用程式，讓使用者使用自己的 Twitter 帳戶進行驗證。如要整合 Twitter 驗證，可使用 Firebase SDK 執行登入流程，或手動執行 Twitter OAuth 流程，並將產生的存取權杖和密鑰傳送至 Firebase。

事前準備

1. 將 Firebase 新增至您的 JavaScript 專案。
2. 在 Firebase 控制台開啟「驗證」專區。
3. 在「Sign in method」分頁中，啟用 Twitter 供應商。
4. 將供應商開發人員主控台中的 API 金鑰和 API 密鑰新增至供應商設定：
   1. 在 Twitter 上將應用程式註冊為開發人員應用程式，並取得應用程式的 OAuth API 金鑰和 API 密鑰。
   2. 前往 Twitter 應用程式設定的應用程式設定頁面，確認 Firebase OAuth 重新導向 URI (例如 my-app-12345.firebaseapp.com/__/auth/handler) 已設為「授權回呼網址」。
5. 點選「Save」。

使用 Firebase SDK 處理登入流程

如要建構網頁應用程式，使用 Twitter 帳戶透過 Firebase 驗證使用者最簡單的方式，就是處理使用 Firebase JavaScript SDK 的登入流程。(如果您要在 Node.js 或其他非瀏覽器環境驗證使用者，則必須手動處理登入流程)。

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

1. 建立 Twitter 提供者物件的例項：

   網頁模組 API

   進一步瞭解可樹狀結構的模組化 Web API，以及透過命名空間 API 升級。

   import { TwitterAuthProvider } from "firebase/auth";
   
   const provider = new TwitterAuthProvider();
   auth_twitter_provider_create.js

   網路命名空間 API

   var provider = new firebase.auth.TwitterAuthProvider();
   twitter.js

2. 選用：如要將提供者的 OAuth 流程本地化到使用者偏好的語言，但不明確傳遞相關的自訂 OAuth 參數，請先更新驗證執行個體上的語言代碼，再啟動 OAuth 流程。例如：

   網頁模組 API

   進一步瞭解可樹狀結構的模組化 Web API，以及透過命名空間 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();
   auth_set_language_code.js

   網路命名空間 API

   firebase.auth().languageCode = 'it';
   // To apply the default browser preference instead of explicitly setting it.
   // firebase.auth().useDeviceLanguage();
   index.js

3. 選用：指定要與 OAuth 要求一起傳送的其他自訂 OAuth 供應商參數。如要新增自訂參數，請在已初始化的提供者上呼叫 setCustomParameters，並使用包含 OAuth 供應商說明文件指定的金鑰和對應值的物件。例如：

   網頁模組 API

   進一步瞭解可樹狀結構的模組化 Web API，以及透過命名空間 API 升級。

   provider.setCustomParameters({
     'lang': 'es'
   });
   auth_twitter_provider_params.js

   網路命名空間 API

   provider.setCustomParameters({
     'lang': 'es'
   });
   twitter.js

   系統不允許保留的必要 OAuth 參數，因此會遭到忽略。詳情請參閱 驗證供應商參考資料。
4. 使用 Twitter 供應商物件向 Firebase 進行驗證。您可以開啟彈出式視窗或重新導向至登入頁面，提示使用者登入自己的 Twitter 帳戶。建議在行動裝置上使用重新導向方法。
   • 如要在彈出式視窗中登入，請呼叫 signInWithPopup：

     網頁模組 API

     進一步瞭解可樹狀結構的模組化 Web API，以及透過命名空間 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);
         // ...
       });
     auth_twitter_signin_popup.js

     網路命名空間 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;
         // ...
       });
     twitter.js

     另請注意，你可以擷取 Twitter 供應商的 OAuth 權杖，用於透過 Twitter API 擷取額外資料。

     您也能在這裡找出並處理錯誤。如需錯誤代碼清單，請參閱驗證參考文件。

   • 如要重新導向至登入頁面，請呼叫 signInWithRedirect：使用「signInWithRedirect」時，請按照最佳做法操作。

     網頁模組 API

     進一步瞭解可樹狀結構的模組化 Web API，以及透過命名空間 API 升級。

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

     網路命名空間 API

     firebase.auth().signInWithRedirect(provider);
     index.js

     接著，您也可以在網頁載入時呼叫 getRedirectResult，擷取 Twitter 供應商的 OAuth 權杖：

     網頁模組 API

     進一步瞭解可樹狀結構的模組化 Web API，以及透過命名空間 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);
         // ...
       });
     auth_twitter_signin_redirect_result.js

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

     您也能在這裡找出並處理錯誤。如需錯誤代碼清單，請參閱驗證參考文件。

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

如果您在 Firebase 主控台啟用了「每個電子郵件地址一個帳戶」設定，當使用者嘗試使用其他 Firebase 使用者供應商 (例如 Google) 內現有的電子郵件地址登入供應商 (例如 Twitter)，系統就會擲回 AuthCredential 物件 (Twitter OAuth 權杖和密鑰)。auth/account-exists-with-different-credential如要完成目標提供者的登入程序，使用者必須先登入現有的供應商 (Google)，然後連結至先前的 AuthCredential (Twitter OAuth 權杖和密鑰)。

彈出式視窗模式

如果使用 signInWithPopup，您可以使用如以下範例的程式碼處理 auth/account-exists-with-different-credential 錯誤：

import {
  getAuth,
  linkWithCredential,
  signInWithPopup,
  TwitterAuthProvider,
} from "firebase/auth";

try {
  // Step 1: User tries to sign in using Twitter.
  let result = await signInWithPopup(getAuth(), new TwitterAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending Twitter 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 Twitter 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) {
  // ...
}

重新導向模式

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

手動處理登入流程

您也可以透過呼叫 Twitter OAuth 端點來處理登入流程，使用 Twitter 帳戶向 Firebase 進行驗證：

1. 按照 開發人員說明文件的說明，將 Twitter 驗證整合至您的應用程式。Twitter 登入流程結束時，您會收到 OAuth 存取權杖和 OAuth 密鑰。
2. 如果您需要登入 Node.js 應用程式，請將 OAuth 存取權杖和 OAuth 密鑰傳送至 Node.js 應用程式。
3. 使用者成功登入 Twitter 後，請以 OAuth 存取權杖和 OAuth 密鑰交換 Firebase 憑證：

   var credential = firebase.auth.TwitterAuthProvider.credential(token, secret);
   

4. 使用 Firebase 憑證向 Firebase 進行驗證：

   網頁模組 API

   進一步瞭解可樹狀結構的模組化 Web API，以及透過命名空間 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);
       // ...
     });
   auth_facebook_signin_credential.js

   網路命名空間 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;
       // ...
     });
   facebook.js

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

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

自訂 Twitter 登入專用的重新導向網域

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

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

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

1. 按照為託管設定網域中的步驟 1 至 3 操作。驗證網域擁有權之後，「託管」會為您的自訂網域佈建安全資料傳輸層 (SSL) 憑證。
2. 將您的自訂網域新增至 Firebase 控制台的授權網域清單：auth.custom.domain.com。
3. 在 Twitter 開發人員主控台或 OAuth 設定頁面中，將重新導向網頁網址 (https://auth.custom.domain.com/__/auth/handler) 加入許可清單，這樣才能透過您的自訂網域存取。
4. 初始化 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

進一步瞭解可樹狀結構的模組化 Web API，以及透過命名空間 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