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

אימות באמצעות Twitter ב-JavaScript

אתם יכולים לאפשר למשתמשים שלכם לבצע אימות ב-Firebase באמצעות חשבונות הטוויטר שלהם על ידי שילוב של אימות טוויטר באפליקציה שלכם. אתם יכולים לשלב אימות טוויטר באמצעות Firebase SDK כדי לבצע את תהליך הכניסה, או לבצע את תהליך Twitter OAuth באופן ידני ולהעביר את אסימון הגישה והסוד שמתקבלים ל-Firebase.

לפני שמתחילים

מוסיפים את Firebase לפרויקט ב-JavaScript.
במסוף Firebase, עוברים אל Security (אבטחה) > Authentication (אימות).
בכרטיסייה שיטת כניסה, מפעילים את ספק הכניסה Twitter.
מוסיפים את מפתח ה-API ואת סוד ה-API ממסוף המפתחים של הספק להגדרות הספק:
1. רושמים את האפליקציה כאפליקציה למפתחים בטוויטר ומקבלים את מפתח ה-API ואת הסוד של ה-API של האפליקציה ב-OAuth.
2. מוודאים שכתובת ה-URI להפניה אוטומטית של OAuth ב-Firebase (לדוגמה, my-app-12345.firebaseapp.com/__/auth/handler) מוגדרת ככתובת ה-URL של הקריאה החוזרת לאימות בדף ההגדרות של האפליקציה בהגדרות של אפליקציית טוויטר.
לוחצים על שמירה.

טיפול בתהליך הכניסה באמצעות Firebase SDK

אם אתם מפתחים אפליקציית אינטרנט, הדרך הכי קלה לאמת את המשתמשים ב-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. לדוגמה:

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 ואת הערך התואם. לדוגמה:
Web
```
provider.setCustomParameters({
  'lang': 'es'
});auth_twitter_provider_params.js
```
Web
```
provider.setCustomParameters({
  'lang': 'es'
});twitter.js
```
אסור להשתמש בפרמטרים שמורים של OAuth, והמערכת תתעלם מהם. פרטים נוספים מופיעים במאמר בנושא ספק אימות.

מתבצע אימות באמצעות Firebase באמצעות אובייקט הספק של טוויטר. אפשר לבקש מהמשתמשים להיכנס באמצעות חשבונות הטוויטר שלהם על ידי פתיחת חלון קופץ או על ידי הפניה לדף הכניסה. עדיף להשתמש בשיטת ההפניה במכשירים ניידים.

כדי להיכנס באמצעות חלון קופץ, קוראים לפונקציה 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

שימו לב גם שאפשר לאחזר את אסימון ה-OAuth של ספק Twitter, שבו אפשר להשתמש כדי לאחזר נתונים נוספים באמצעות ממשקי ה-API של Twitter.

כאן גם אפשר לזהות ולטפל בשגיאות. רשימה של קודי שגיאה זמינה במסמכי העזר בנושא אימות.

כדי להיכנס לחשבון על ידי הפניה לדף הכניסה, קוראים ל-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

אחר כך, תוכלו גם לאחזר את אסימון ה-OAuth של ספק Twitter על ידי קריאה ל- getRedirectResult כשהדף נטען:

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

כאן גם אפשר לזהות ולטפל בשגיאות. רשימה של קודי שגיאה זמינה במסמכי העזר בנושא אימות.

טיפול בשגיאות מסוג account-exists-with-different-credential

אם הפעלתם את ההגדרה חשבון אחד לכל כתובת אימייל במסוף Firebase, כשמשתמש מנסה להיכנס לספק (כמו טוויטר) עם כתובת אימייל שכבר קיימת אצל ספק אחר של משתמש Firebase (כמו Google), מוצגת השגיאה auth/account-exists-with-different-credential יחד עם אובייקט AuthCredential (אסימון OAuth וסוד של טוויטר). כדי להשלים את הכניסה לספק הרצוי, המשתמש צריך קודם להיכנס לספק הקיים (Google) ואז לקשר את האובייקט AuthCredential הקודם (אסימון 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) {
  // ...
}

מצב הפניה אוטומטית

השגיאה הזו מטופלת באופן דומה במצב ההפניה האוטומטית, אבל ההבדל הוא שצריך לשמור במטמון את פרטי הכניסה בהמתנה בין הפניות אוטומטיות לדפים (לדוגמה, באמצעות אחסון סשן).

טיפול בתהליך הכניסה באופן ידני

אפשר גם לבצע אימות באמצעות Firebase באמצעות חשבון Twitter. לשם כך צריך לטפל בתהליך הכניסה על ידי קריאה לנקודות הקצה של Twitter OAuth:

כדי לשלב את האימות של טוויטר באפליקציה, פועלים לפי התיעוד למפתחים. בסוף תהליך הכניסה לטוויטר, תקבלו טוקן גישה ל-OAuth וסוד ל-OAuth.
אם אתם צריכים להיכנס לאפליקציית Node.js, אתם צריכים לשלוח לאפליקציית Node.js את אסימון הגישה של OAuth ואת הסוד של OAuth.
אחרי שהמשתמש מתחבר בהצלחה באמצעות 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

אימות באמצעות Firebase בתוסף ל-Chrome

אם אתם מפתחים אפליקציית תוסף ל-Chrome, כדאי לעיין במדריך למסמכים מחוץ למסך.

כשיוצרים פרויקט, Firebase מקצה לפרויקט תת-דומיין ייחודי: https://my-app-12345.firebaseapp.com.

הכתובת הזו תשמש גם כמנגנון ההפניה לכניסה באמצעות OAuth. צריך לאשר את הדומיין הזה לכל ספקי ה-OAuth הנתמכים. עם זאת, יכול להיות שהמשתמשים יראו את הדומיין הזה כשהם נכנסים ל-Twitter לפני שהם מופנים בחזרה לאפליקציה: המשך אל: https://my-app-12345.firebaseapp.com.

כדי להימנע מהצגת תת-הדומיין, אפשר להגדיר דומיין מותאם אישית עם Firebase Hosting:

פועלים לפי שלבים 1 עד 3 במאמר בנושא הגדרת הדומיין ל-Hosting. כשאתם מאמתים את הבעלות על הדומיין, Hosting מקצה אישור SSL לדומיין המותאם אישית.
מוסיפים את הדומיין המותאם אישית לרשימת הדומיינים המורשים במסוף Firebase: auth.custom.domain.com.
במסוף למפתחים של טוויטר או בדף ההגדרה של OAuth, מוסיפים את כתובת ה-URL של דף ההפניה לרשימת ההיתרים, שתהיה נגישה בדומיין המותאם אישית: 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, ואפשר להשתמש בו כדי לזהות משתמש בכל האפליקציות בפרויקט, בלי קשר לשיטת הכניסה של המשתמש.

באפליקציות, הדרך המומלצת לדעת מה סטטוס האימות של המשתמש היא להגדיר אובייקט observer ב-Auth. אחרי כן תוכלו לקבל את פרטי הפרופיל הבסיסיים של המשתמש מאובייקט User. ניהול משתמשים
ב-Firebase Realtime Database וב-Cloud Storage Security Rules, אפשר לקבל את מזהה המשתמש הייחודי של המשתמש המחובר מהמשתנה auth, ולהשתמש בו כדי לקבוע לאילו נתונים משתמש יכול לגשת.

אתם יכולים לאפשר למשתמשים להיכנס לאפליקציה שלכם באמצעות כמה ספקי אימות על ידי קישור פרטי כניסה של ספק אימות לחשבון משתמש קיים.

כדי להוציא משתמש מהחשבון, מתקשרים אל 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

אימות באמצעות Twitter ב-JavaScript קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.