在 JavaScript 中使用 Twitter 驗證

您可以讓使用者透過 Twitter 帳戶向 Firebase 進行驗證 將 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. 請確認您的 Firebase OAuth 重新導向 URI (例如 my-app-12345.firebaseapp.com/__/auth/handler) 在應用程式「設定」頁面的「授權回呼網址」中， Twitter 應用程式的設定。
5. 按一下 [儲存]。

使用 Firebase SDK 處理登入流程

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

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

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

   Web

   瞭解詳情 進一步瞭解可樹狀結構的模組化 Web API 升級 新增命名空間

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

   Web

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

2. 選用：根據使用者偏好的設定，將提供者的 OAuth 流程本地化 或者在不明確傳送相關自訂 OAuth 參數的情況下，更新 ，再啟動 OAuth 流程。例如：

   Web

   瞭解詳情 進一步瞭解可樹狀結構的模組化 Web 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

   Web

   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 供應商說明文件所載，以及相應的值中。例如：

   Web

   瞭解詳情 進一步瞭解可樹狀結構的模組化 Web API 升級 新增命名空間

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

   Web

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

   系統不允許保留的必要 OAuth 參數，因此會予以忽略。 請參閱 驗證服務供應商參考資料。
4. 使用 Twitter 供應商物件向 Firebase 進行驗證。你可以 提示使用者透過 彈出式視窗，或重新導向至登入頁面。重新導向方法是 在行動裝置上顯示。
   • 如要透過彈出式視窗登入，請呼叫 signInWithPopup：

     Web

     瞭解詳情 進一步瞭解可樹狀結構的模組化 Web 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

     Web

     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」時，請遵循最佳做法。

     Web

     瞭解詳情 進一步瞭解可樹狀結構的模組化 Web API 升級 新增命名空間

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

     Web

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

     接著，您也可以呼叫 getRedirectResult：

     Web

     瞭解詳情 進一步瞭解可樹狀結構的模組化 Web 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

     Web

     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 控制台中啟用「每個電子郵件地址一個帳戶」設定： 使用者嘗試使用現有的電子郵件地址登入供應商 (例如 Twitter) 時 與其他 Firebase 使用者的供應商 (例如 Google) 重複，發生錯誤 auth/account-exists-with-different-credential 會與 AuthCredential 物件 (Twitter OAuth 權杖和密鑰)。如要完成 使用者必須先登入現有的供應商 (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 帳戶進行 Firebase 驗證，方法是處理 登入流程，方法是呼叫 Twitter OAuth 端點：

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

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

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

   Web

   瞭解詳情 進一步瞭解可樹狀結構的模組化 Web 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

   Web

   // 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 供應商。不過，這表示使用者可能會看到 網域，然後再重新導向回應用程式： 繼續前往：https://my-app-12345.firebaseapp.com。

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

1. 按照以下步驟 1 到 3： 為託管設定網域。完成驗證後的影響 您的網域擁有權，Host 會為自訂網域佈建 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。 控管使用者可以存取的資料

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

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

Web

瞭解詳情 進一步瞭解可樹狀結構的模組化 Web 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

Web

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