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

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

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

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

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

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

כדי לטפל בתהליך הכניסה באמצעות Firebase JavaScript SDK, צריך לפעול לפי שלבים:

1. יוצרים מופע של אובייקט הספק של Twitter:

   Web

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

   Web

   למד מידע נוסף על Web API המודולרי שניתן לניעור העצים שדרוג מה-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 המודולרי שניתן לניעור העצים שדרוג מה-API במרחב השמות.

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

   Web

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

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

     Web

     למד מידע נוסף על Web API המודולרי שניתן לניעור העצים שדרוג מה-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

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

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

   • כדי להיכנס באמצעות הפניה אוטומטית לדף הכניסה, צריך לבצע קריאה אל signInWithRedirect: יש לפעול לפי השיטות המומלצות כשמשתמשים ב-'signInWithRedirect'.

     Web

     למד מידע נוסף על Web API המודולרי שניתן לניעור העצים שדרוג מה-API במרחב השמות.

     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

     למד מידע נוסף על Web API המודולרי שניתן לניעור העצים שדרוג מה-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

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

טיפול בשגיאות שקשורות לחשבון קיים עם פרטי כניסה שונים

אם הפעלתם את ההגדרה One account per email address (חשבון אחד לכל כתובת אימייל) במסוף Firebase, כשמשתמש ינסה להיכנס לספק (כמו Twitter) באמצעות כתובת אימייל שכבר קיימת אצל ספק אחר של משתמש ב-Firebase (כמו Google), תוצג הודעת השגיאה auth/account-exists-with-different-credential יחד עם אובייקט AuthCredential (אסימון וסודות של OAuth ב-Twitter). כדי להשלים את הכניסה אל הספק הקיים צריך להיכנס קודם לספק הקיים (Google) ואז לקשר AuthCredential לשעבר (אסימון וסוד oauth של Twitter).

מצב חלון קופץ

אם אתם משתמשים ב-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) {
  // ...
}

מצב הפניה לכתובת URL אחרת

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

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

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

1. כדי לשלב את אימות Twitter באפליקציה, פועלים לפי התיעוד למפתחים. בסוף תהליך הכניסה בטוויטר, יקבל אסימון גישה ל-OAuth וסוד OAuth.
2. אם אתם צריכים להיכנס לאפליקציה ב-Node.js, אתם צריכים לשלוח את אסימון הגישה של OAuth ואת הסוד של OAuth לאפליקציה ב-Node.js.
3. אחרי שמשתמש נכנס באמצעות Twitter, מחליפים את אסימון הגישה של OAuth ואת הסוד של OAuth בפרטי כניסה ל-Firebase:

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

4. מבצעים אימות באמצעות Firebase באמצעות פרטי הכניסה ל-Firebase:

   Web

   למד מידע נוסף על Web API המודולרי שניתן לניעור העצים שדרוג מה-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

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

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

התאמה אישית של הדומיין להפניה אוטומטית לכניסה ל-Twitter

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

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

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

1. פועלים לפי השלבים 1 עד 3 במאמר הגדרת הדומיין ל-Hosting. כשמבצעים אימות הבעלות על הדומיין שלך, Hosting, מקצה אישור 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 Realtime Database ו-Cloud Storage, אפשר לקבל את מזהה המשתמש הייחודי של המשתמש שנכנס לחשבון מהמשתנה auth, ולהשתמש בו כדי לקבוע לאילו נתונים למשתמש תהיה גישה.

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

כדי לנתק משתמש מהחשבון, יש להתקשר אל signOut

Web

מידע נוסף על Web API מודולרי שניתן לניפוי עצים ושדרוג מ-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