本頁面由 Cloud Translation API 翻譯而成。

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

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

在你開始之前

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

使用 Firebase SDK 處理登錄流程

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

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

創建 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

可選：要本地化供應商的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

可選：指定其他定制的OAuth提供者參數要使用OAuth發送請求。要添加自定義參數，調用setCustomParameters上初始化提供商與如由提供商的OAuth文檔和相應的值來指定包含密鑰的對象。例如：
網頁版 9
了解更多關於樹可搖動的Web V9模塊化SDK和升級，從8版本。
```
provider.setCustomParameters({
  'lang': 'es'
});auth_twitter_provider_params.js
```
網頁版 8
```
provider.setCustomParameters({
  'lang': 'es'
});twitter.js
```
不允許保留的必需 OAuth 參數，將被忽略。見身份驗證提供參考更多的細節。

使用 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

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

處理 account-exists-with- different-credential 錯誤

如果啟用每個電子郵件地址設置了一個帳戶，在火力地堡控制台，當用戶試圖在一個已存在的另一個火力地堡用戶的供應商（如谷歌）的電子郵件登錄提供商（如Twitter），錯誤auth/account-exists-with-different-credential與一個沿拋出AuthCredential對象特（Twitter OAuth令牌和密鑰）。完成登錄到預期的提供商，用戶必須先登錄到現有的供應商（谷歌），然後鏈接到前AuthCredential （Twitter的OAuth令牌和密碼）。

如果你使用signInWithPopup ，你可以處理auth/account-exists-with-different-credential錯誤使用類似於下面的示例代碼：


// 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 進行身份驗證：

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

使用 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：

打開在項目火力地堡控制台。
在身份驗證部分，打開登錄方法頁。
添加一個URI類似下面的授權域的列表：
```
chrome-extension://CHROME_EXTENSION_ID
```

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

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

在項目創建，火力地堡將提供為你的項目唯一子： https://my-app-12345.firebaseapp.com 。

這也將用作 OAuth 登錄的重定向機制。所有受支持的 OAuth 提供程序都需要允許該域。然而，這意味著用戶可以看到該域名而重新導向到應用程序之前在給Twitter簽署：繼續：https://my-app-12345.firebaseapp.com。

為避免顯示您的子域，您可以使用 Firebase 託管設置自定義域：

按照步驟1至3設置您的域名託管。當您驗證域所有權時，Hosting 會為您的自定義域提供 SSL 證書。
您的自定義域添加到在授權域的列表火力地堡控制台： auth.custom.domain.com 。
在Twitter的開發者控制台或OAuth設置頁面，白名單的重定向頁面，這將是您的自定義域名訪問的URL： https://auth.custom.domain.com/__/auth/handler 。

當初始化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對象。請參閱管理用戶。
在你的火力地堡實時數據庫和雲存儲安全規則，你可以得到簽署的，從用戶的唯一的用戶ID auth的變量，並用它來控制哪些數據的用戶可以訪問。

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

要註銷用戶，請撥打signOut ：

網頁版 9

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

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

網頁版 8

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

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

在你開始之前

使用 Firebase SDK 處理登錄流程

網頁版 9

網頁版 8

網頁版 9

網頁版 8

網頁版 9

網頁版 8

網頁版 9

網頁版 8

網頁版 9

網頁版 8

網頁版 9

網頁版 8

處理 account-exists-with- different-credential 錯誤

彈出模式

重定向模式

手動處理登錄流程

網頁版 9

網頁版 8

在 Chrome 擴展程序中使用 Firebase 進行身份驗證

自定義 Twitter 登錄的重定向域

下一步

網頁版 9

網頁版 8