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

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

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

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

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

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

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

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

    גרסת אינטרנט 9

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

    גרסת אינטרנט 8

    var provider = new firebase.auth.TwitterAuthProvider();
  2. אופציונלי: כדי למקם את זרימת 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();

    גרסת אינטרנט 8

    firebase.auth().languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();
  3. אופציונאלי: ציין פרמטרי ספק OAuth מנהג נוספים שאתה רוצה לשלוח עם בקשת OAuth. כדי להוסיף פרמטר מותאם אישית, קוראים setCustomParameters על ספק מאותחל עם אובייקט המכיל את המפתח כפי שצוין על ידי תיעוד ספק OAuth ואת הערך המתאים. לדוגמה:

    גרסת אינטרנט 9

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

    גרסת אינטרנט 8

    provider.setCustomParameters({
      'lang': 'es'
    });
    פרמטרים OAuth הנדרשים אינם מותרים ויתעלמו מהם. ראה התייחסות ספק אימות לפרטים נוספים.
  4. אימות באמצעות Firebase באמצעות אובייקט ספק הטוויטר. תוכל לבקש מהמשתמשים שלך להיכנס באמצעות חשבונות הטוויטר שלהם על ידי פתיחת חלון מוקפץ או על ידי הפניה לדף הכניסה. שיטת הפניה מועדפת במכשירים ניידים.
    • כדי להיכנס עם חלון מוקפץ, שיחת 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);
          // ...
        });

      גרסת אינטרנט 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;
          // ...
        });
      שים לב גם שאתה יכול לאחזר את אסימון ה- OAuth של ספק הטוויטר שניתן להשתמש בו כדי להביא נתונים נוספים באמצעות ממשקי ה- API של טוויטר.

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

    • כדי להיכנס ידי הפנייה אל דף הכניסה, קוראים signInWithRedirect :

      גרסת אינטרנט 9

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

      גרסת אינטרנט 8

      firebase.auth().signInWithRedirect(provider);
      לאחר מכן, תוכל גם לאחזר את אסימון 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);
          // ...
        });

      גרסת אינטרנט 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;
          // ...
        });
      זה גם המקום שבו אתה יכול לתפוס ולטפל בשגיאות. לקבלת רשימה של קודי שגיאה להעיף מבט לעבר Docs פניית המחבר .

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

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

  1. שלב אימות Twitter לתוך האפליקציה על ידי ביצוע התיעוד של המפתחים . בסוף זרימת הכניסה לטוויטר, תקבל אסימון גישה ל- OAuth וסוד OAuth.
  2. אם עליך להיכנס ליישום Node.js, שלח את אסימון הגישה OAuth ואת סוד OAuth ליישום Node.js.
  3. לאחר שמשתמש נכנס בהצלחה עם טוויטר, להחליף את גישת OAuth האסימון סוד OAuth עבור אישור Firebase:
    var credential = firebase.auth.TwitterAuthProvider.credential(token, secret);
    
  4. אימות באמצעות 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);
        // ...
      });

    גרסת אינטרנט 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;
        // ...
      });

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

אם אתה בונה יישום תוסף Chrome, עליך להוסיף את מזהה תוסף Chrome שלך:

  1. פתח הפרויקט שלך קונסולת Firebase .
  2. במקטע אימות, לפתוח את דף הכניסה השיטה.
  3. הוספת URI כמו הבאה לרשימת הדומיינים שמורשים:
    chrome-extension://CHROME_EXTENSION_ID

רק פעולות קופצות ( signInWithPopup , linkWithPopup , ו reauthenticateWithPopup ) זמינים רחבים לכרום, כתוספות Chrome לא יכולות להשתמש HTTP הפניות. עליך לקרוא לשיטות אלה מתוך סקריפט של דף רקע ולא מחלון קופץ של פעולות בדפדפן, מכיוון שצץ האימות יבטל את חלונות הפעולה של הדפדפן. השיטות הקופצות אולי רק לשמש תוספים באמצעות מניפסט V2 . החדש יותר V3 המניפסט מאפשר סקריפטים רקע רק בצורה של עובדי שירות, אשר לא ניתן לבצע את הפעולות הקופצות בכלל.

הופכים את הקובץ במניפסט של תוסף Chrome שלך בטוח שאתה מוסיף את https://apis.google.com URL אלי content_security_policy allowlist.

הצעדים הבאים

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

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

  • בבסיס הנתונים בזמן אמת Firebase שלך לאחסון בענן אבטחה חוקי , אתה יכול לקבל את שנכנסים למערכת זיהוי המשתמש הייחודי של המשתמש מן auth משתנה, ולהשתמש בו כדי לקבוע אילו נתונים גישה יכול משתמש.

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

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

גרסת אינטרנט 9

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

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

גרסת אינטרנט 8

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