在 JavaScript 中使用 Twitter 進行身份驗證

您可以通過將 Twitter 身份驗證集成到您的應用中，讓您的用戶使用他們的 Twitter 帳戶通過 Firebase 進行身份驗證。您可以通過使用 Firebase SDK 執行登錄流程，或通過手動執行 Twitter OAuth 流程並將生成的訪問令牌和密鑰傳遞給 Firebase 來集成 Twitter 身份驗證。

在你開始之前

1. 添加火力地堡到你的JavaScript項目。
2. 在火力地堡控制台，打開驗證部分。
3. 在登錄方法選項卡，選中Twitter的提供商。
4. 添加來自供應商的開發者控制台提供者配置的API密鑰和API的秘密：
   1. 註冊您的應用程序作為在Twitter上開發的應用程序，讓你的應用程序的OAuth API密鑰和API的秘密。
   2. 確保你的火力地堡的OAuth重定向URI（如my-app-12345.firebaseapp.com/__/auth/handler ）設置為你的應用程序的設置頁面的授權回調網址，您的Twitter的應用程序的配置。
5. 單擊保存。

使用 Firebase SDK 處理登錄流程

如果您正在構建 Web 應用程序，使用他們的 Twitter 帳戶通過 Firebase 對您的用戶進行身份驗證的最簡單方法是使用 Firebase JavaScript SDK 處理登錄流程。 （如果要在 Node.js 或其他非瀏覽器環境中對用戶進行身份驗證，則必須手動處理登錄流程。）

要使用 Firebase JavaScript SDK 處理登錄流程，請按以下步驟操作：

1. 創建 Twitter 提供程序對象的實例：

   網頁版 9

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

   網頁版 8

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

2. 可選：要本地化供應商的OAuth流向用戶的首選語言沒有明確地傳遞相關的定制OAuth的參數，在開始的OAuth流之前更新的驗證實例的語言代碼。例如：

   網頁版 9

   import { getAuth } from "firebase/auth";
   
   const auth = getAuth();
   auth.languageCode = 'it';
   // To apply the default browser preference instead of explicitly setting it.
   // firebase.auth().useDeviceLanguage();
   auth_set_language_code.js

   網頁版 8

   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文檔和相應的值來指定包含密鑰的對象。例如：

   網頁版 9

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

   網頁版 8

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

   不允許保留的必需 OAuth 參數，將被忽略。見身份驗證提供參考更多的細節。
4. 使用 Twitter 提供程序對象通過 Firebase 進行身份驗證。您可以通過打開彈出窗口或重定向到登錄頁面來提示您的用戶使用他們的 Twitter 帳戶登錄。在移動設備上首選重定向方法。
   • 要使用彈出窗口登錄，電話signInWithPopup ：

     網頁版 9

     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;
         // ...
       }).catch((error) => {
         // Handle Errors here.
         const errorCode = error.code;
         const errorMessage = error.message;
         // The email of the user's account used.
         const email = error.email;
         // The AuthCredential type that was used.
         const credential = TwitterAuthProvider.credentialFromError(error);
         // ...
       });
     auth_twitter_signin_popup.js

     網頁版 8

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

     網頁版 9

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

     網頁版 8

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

     然後，你還可以通過調用檢索Twitter的提供商的OAuth令牌getRedirectResult當你的頁面加載：

     網頁版 9

     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;
       }).catch((error) => {
         // Handle Errors here.
         const errorCode = error.code;
         const errorMessage = error.message;
         // The email of the user's account used.
         const email = error.email;
         // The AuthCredential type that was used.
         const credential = TwitterAuthProvider.credentialFromError(error);
         // ...
       });
     auth_twitter_signin_redirect_result.js

     網頁版 8

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

     這也是您可以捕獲和處理錯誤的地方。有關錯誤代碼列表，看看在驗證參考文檔。

// Step 1.
// User tries to sign in to Twitter.
auth.signInWithPopup(new firebase.auth.TwitterAuthProvider()).catch(function(error) {
  // An error happened.
  if (error.code === 'auth/account-exists-with-different-credential') {
    // Step 2.
    // User's email already exists.
    // The pending Twitter credential.
    var pendingCred = error.credential;
    // The provider account's email address.
    var email = error.email;
    // Get sign-in methods for this email.
    auth.fetchSignInMethodsForEmail(email).then(function(methods) {
      // Step 3.
      // If the user has several sign-in methods,
      // the first method in the list will be the "recommended" method to use.
      if (methods[0] === 'password') {
        // Asks the user their password.
        // In real scenario, you should handle this asynchronously.
        var password = promptUserForPassword(); // TODO: implement promptUserForPassword.
        auth.signInWithEmailAndPassword(email, password).then(function(result) {
          // Step 4a.
          return result.user.linkWithCredential(pendingCred);
        }).then(function() {
          // Twitter account successfully linked to the existing Firebase user.
          goToApp();
        });
        return;
      }
      // All the other cases are external providers.
      // Construct provider object for that provider.
      // TODO: implement getProviderForProviderId.
      var provider = getProviderForProviderId(methods[0]);
      // At this point, you should let the user know that they already have an account
      // but with a different provider, and let them validate the fact they want to
      // sign in with this provider.
      // Sign in to provider. Note: browsers usually block popup triggered asynchronously,
      // so in real scenario you should ask the user to click on a "continue" button
      // that will trigger the signInWithPopup.
      auth.signInWithPopup(provider).then(function(result) {
        // Remember that the user may have signed in with an account that has a different email
        // address than the first one. This can happen as Firebase doesn't control the provider's
        // sign in flow and the user is free to login using whichever account they own.
        // Step 4b.
        // Link to Twitter credential.
        // As we have access to the pending credential, we can directly call the link method.
        result.user.linkAndRetrieveDataWithCredential(pendingCred).then(function(usercred) {
          // Twitter account successfully linked to the existing Firebase user.
          goToApp();
        });
      });
    });
  }
});

手動處理登錄流程

您還可以通過調用 Twitter OAuth 端點來處理登錄流程，從而使用 Twitter 帳戶對 Firebase 進行身份驗證：

1. 整合Twitter的認證集成到你的應用程序通過以下的開發者文檔。在 Twitter 登錄流程結束時，您將收到一個 OAuth 訪問令牌和一個 OAuth 機密。
2. 如果您需要登錄 Node.js 應用程序，請將 OAuth 訪問令牌和 OAuth 密鑰發送到 Node.js 應用程序。
3. 當用戶在與Twitter成功的跡象，換來一個火力地堡證書令牌OAuth訪問和OAuth秘密：

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

4. 使用 Firebase 憑據通過 Firebase 進行身份驗證：

   網頁版 9

   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.email;
       // The AuthCredential type that was used.
       const credential = FacebookAuthProvider.credentialFromError(error);
       // ...
     });
   auth_facebook_signin_credential.js

   網頁版 8

   // 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 擴展程序應用程序，則必須添加您的 Chrome 擴展程序 ID：

1. 打開在項目火力地堡控制台。
2. 在身份驗證部分，打開登錄方法頁。
3. 添加一個URI類似下面的授權域的列表：

   chrome-extension://CHROME_EXTENSION_ID

只有彈出操作（ signInWithPopup ， linkWithPopup和reauthenticateWithPopup ）可供選擇Chrome瀏覽器擴展，如Chrome擴展不能使用HTTP重定向。您應該從後台頁面腳本而不是瀏覽器操作彈出窗口調用這些方法，因為身份驗證彈出窗口將取消瀏覽器操作彈出窗口。彈出窗口的方法可以只使用擴展使用清單V2 。較新的清單V3只允許在服務人員的形式，不能在所有執行彈出操作後台腳本。

在您的Chrome擴展程序清單文件確保您添加https://apis.google.com URL到content_security_policy允許列表。

下一步

用戶首次登錄後，將創建一個新用戶帳戶並將其鏈接到用戶登錄時使用的憑據（即用戶名和密碼、電話號碼或身份驗證提供商信息）。這個新帳戶作為 Firebase 項目的一部分存儲，可用於識別項目中每個應用中的用戶，無論用戶如何登錄。

• 在您的應用程序，要知道你的用戶的身份驗證狀態的推薦方法是設置一個觀察者的Auth的對象。然後，您可以從用戶的基本個人資料信息User對象。請參閱管理用戶。

• 在你的火力地堡實時數據庫和雲存儲安全規則，你可以得到簽署的，從用戶的唯一的用戶ID auth的變量，並用它來控制哪些數據的用戶可以訪問。

您可以允許用戶通過使用多個身份驗證提供登錄到您的應用程序連接身份驗證提供憑據到現有的用戶帳戶。

要註銷用戶，請撥打signOut ：

import { getAuth, signOut } from "firebase/auth";

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

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