אימות באמצעות טוויטר ב-JavaScript

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

לפני שאתה מתחיל

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

טפל בזרימת הכניסה עם Firebase SDK

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

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

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

   Web modular API

   למד עוד על ממשק ה-API האינטרנט המודולרי הניתן לטלטלה עצים ושדרוג מ-API עם מרווח שמות.

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

   Web namespaced API

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

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

   Web modular API

   למד עוד על ממשק ה-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 namespaced API

   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 modular API

   למד עוד על ממשק ה-API האינטרנט המודולרי הניתן לטלטלה עצים ושדרוג מ-API עם מרווח שמות.

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

   Web namespaced API

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

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

     Web modular API

     למד עוד על ממשק ה-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 namespaced API

     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 של ספק טוויטר שניתן להשתמש בו כדי להביא נתונים נוספים באמצעות ממשקי ה-API של Twitter.

     זה גם המקום שבו אתה יכול לתפוס ולטפל בשגיאות. לקבלת רשימה של קודי שגיאה, עיין ב- Auth Reference Docs .

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

     Web modular API

     למד עוד על ממשק ה-API האינטרנט המודולרי הניתן לטלטלה עצים ושדרוג מ-API עם מרווח שמות.

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

     Web namespaced API

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

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

     Web modular API

     למד עוד על ממשק ה-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 namespaced API

     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 .

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

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

מצב הפניה מחדש

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

טפל בזרימת הכניסה באופן ידני

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

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 modular API

   למד עוד על ממשק ה-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 namespaced API

   // 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 הנתמכים. עם זאת, משמעות הדבר היא שמשתמשים עשויים לראות את הדומיין הזה בזמן הכניסה לטוויטר לפני שיפנו חזרה לאפליקציה: המשך אל: https://my-app-12345.firebaseapp.com .

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

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

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

כדי לצאת ממשתמש, התקשר ל- signOut :

Web modular API

למד עוד על ממשק ה-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 namespaced API

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