Google is committed to advancing racial equity for Black communities. See how.
דף זה תורגם על ידי Cloud Translation API.
Switch to English

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

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

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

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

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

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

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

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

    אינטרנט v8

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

    אינטרנט v9

    import { TwitterAuthProvider } from "firebase/auth";
    
    const provider = new TwitterAuthProvider();
  2. אופציונלי : כדי למקם את זרימת ה- OAuth של הספק לשפה המועדפת על המשתמש מבלי להעביר במפורש את פרמטרי ה- OAuth המותאמים אישית, עדכן את קוד השפה במופע Auth לפני שתתחיל את זרימת OAuth. לדוגמה:

    אינטרנט v8

    firebase.auth().languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();

    אינטרנט v9

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

    אינטרנט v8

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

    אינטרנט v9

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

      אינטרנט v8

      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;
          // ...
        });

      אינטרנט v9

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

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

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

      אינטרנט v8

      firebase.auth().signInWithRedirect(provider);

      אינטרנט v9

      import { getAuth, signInWithRedirect } from "firebase/auth";
      
      const auth = getAuth();
      signInWithRedirect(auth, provider);
      לאחר מכן תוכל גם לאחזר את אסימון ה- OAuth של ספק הטוויטר על ידי קריאה ל- getRedirectResult כאשר העמוד שלך נטען:

      אינטרנט v8

      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;
          // ...
        });

      אינטרנט v9

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

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

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

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

    אינטרנט v8

    // 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;
        // ...
      });

    אינטרנט v9

    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);
        // ...
      });

אמת עם Firebase בתוסף Chrome

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

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

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

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

הצעדים הבאים

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

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

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

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

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

אינטרנט v8

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

אינטרנט v9

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

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