Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

在 JavaScript 中使用 Twitter 驗證

在應用程式中整合 Twitter 驗證功能，即可讓使用者透過 Twitter 帳戶向 Firebase 驗證身分。您可以透過 Firebase SDK 執行登入流程，或手動執行 Twitter OAuth 流程，然後將產生的存取權杖和密碼傳遞至 Firebase，藉此整合 Twitter 驗證功能。

事前準備

將 Firebase 新增至 JavaScript 專案。
在 Firebase 控制台中，依序前往「安全性」>「驗證」。
在「登入方法」分頁中，啟用「Twitter」登入供應商。
將該供應商開發人員控制台的 API 金鑰和 API 密鑰新增至供應商設定：
1. 在 Twitter 上將應用程式註冊為開發人員應用程式，並取得應用程式的 OAuth API 金鑰和 API 密鑰。
2. 請確認 Firebase OAuth 重新導向 URI (例如 my-app-12345.firebaseapp.com/__/auth/handler) 已在 Twitter 應用程式設定的應用程式設定頁面中，設為授權回呼網址。
按一下「儲存」。

使用 Firebase SDK 處理登入流程

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

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

建立 Twitter 提供者物件的執行個體：

Web

import { TwitterAuthProvider } from "firebase/auth";

const provider = new TwitterAuthProvider();auth_twitter_provider_create.js

Web

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

選用：如要將供應商的 OAuth 流程本地化為使用者偏好的語言，而不需明確傳遞相關的自訂 OAuth 參數，請在啟動 OAuth 流程前，更新 Auth 執行個體上的語言代碼。例如： <0x

Web

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

選用：指定要隨 OAuth 要求傳送的其他自訂 OAuth 供應商參數。如要新增自訂參數，請在已初始化的供應商上呼叫 setCustomParameters，並使用包含鍵的物件 (如 OAuth 供應商文件所指定) 和對應的值。例如： <0x
Web
```
provider.setCustomParameters({
  'lang': 'es'
});auth_twitter_provider_params.js
```
Web
```
provider.setCustomParameters({
  'lang': 'es'
});twitter.js
```
系統不允許使用保留的必要 OAuth 參數，且會忽略這類參數。詳情請參閱驗證供應商參考資料。

使用 Twitter 提供者物件向 Firebase 驗證。您可以開啟彈出式視窗或重新導向至登入頁面，提示使用者透過 Twitter 帳戶登入。在行動裝置上，建議使用重新導向方法。

如要使用彈出式視窗登入，請呼叫 signInWithPopup：

Web

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 擷取其他資料。

您也可以在這裡擷取及處理錯誤。如需錯誤代碼清單，請參閱「Auth Reference Docs」。

如要重新導向至登入頁面來登入，請呼叫 signInWithRedirect：使用 `signInWithRedirect` 時，請遵循最佳做法。

Web

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

const auth = getAuth();
signInWithRedirect(auth, provider);auth_signin_redirect.js

Web

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

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

Web

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

您也可以在這裡擷取及處理錯誤。如需錯誤代碼清單，請參閱「Auth Reference Docs」。

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

如果您在 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 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 進行驗證：

Web

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 擴充功能應用程式，請參閱螢幕外文件指南。

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

這也會做為 OAuth 登入的重新導向機制。該網域必須允許所有支援的 OAuth 供應商存取。不過，這表示使用者在登入 Twitter 時，可能會看到該網域，然後才會重新導向回應用程式：「繼續前往：https://my-app-12345.firebaseapp.com」。

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

請按照「為 Hosting 設定網域」一文中的步驟 1 到 3 操作。驗證網域擁有權後，Hosting 會為自訂網域佈建 SSL 憑證。
在 Firebase 控制台中，將自訂網域新增至授權網域清單：auth.custom.domain.com。
在 Twitter 開發人員控制台或 OAuth 設定頁面中，將重新導向頁面的網址加入白名單，該網址可透過自訂網域存取：https://auth.custom.domain.com/__/auth/handler。

初始化 JavaScript 程式庫時，請使用 authDomain 欄位指定自訂網域：

var config = {
  apiKey: '...',
  // Changed from 'PROJECT_ID.firebaseapp.com'.
  authDomain: 'auth.custom.domain.com',
  databaseURL: 'https://PROJECT_ID.firebaseio.com',
  projectId: 'PROJECT_ID',
  storageBucket: 'PROJECT_ID.firebasestorage.app',
  messagingSenderId: 'SENDER_ID'
};
firebase.initializeApp(config);

後續步驟

使用者首次登入後，系統會建立新的使用者帳戶，並連結至使用者登入時使用的憑證 (即使用者名稱和密碼、電話號碼或驗證供應商資訊)。這個新帳戶會儲存在 Firebase 專案中，可用於識別專案中每個應用程式的使用者，無論使用者登入方式為何。

在應用程式中，如要瞭解使用者的驗證狀態，建議在 Auth 物件上設定觀察器。接著，您就能從 User 物件取得使用者的基本設定檔資訊。請參閱「管理使用者」。
在 Firebase Realtime Database 和 Cloud Storage 安全規則中，您可以從 auth 變數取得已登入使用者的專屬使用者 ID，並使用該 ID 控制使用者可存取的資料。

您可以將驗證供應商憑證連結至現有使用者帳戶，允許使用者透過多個驗證供應商登入應用程式。

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

Web

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

在 JavaScript 中使用 Twitter 驗證 透過集合功能整理內容 你可以依據偏好儲存及分類內容。