אימות באמצעות Google עם JavaScript

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

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

  1. הוסף את Firebase לפרויקט JavaScript שלך .
  2. הפעל את Google כשיטת כניסה במסוף Firebase:
    1. במסוף Firebase , פתח את הקטע Auth .
    2. בכרטיסייה שיטת כניסה , הפעל את שיטת הכניסה של Google ולחץ על שמור .

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

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

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

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

    Web version 9

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

    Web version 8

    var provider = new firebase.auth.GoogleAuthProvider();
  2. אופציונלי : ציין היקפי OAuth 2.0 נוספים שברצונך לבקש מספק האימות. כדי להוסיף היקף, התקשר addScope . לדוגמה:

    Web version 9

    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');

    Web version 8

    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    עיין בתיעוד של ספק האימות .
  3. אופציונלי : כדי להתאים את זרימת ה-OAuth של הספק לשפה המועדפת על המשתמש מבלי להעביר במפורש את פרמטרי ה-OAuth המותאמים אישית הרלוונטיים, עדכן את קוד השפה במופע ה-Auth לפני התחלת זרימת ה-OAuth. לדוגמה:

    Web version 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();

    Web version 8

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

    Web version 9

    provider.setCustomParameters({
      'login_hint': 'user@example.com'
    });

    Web version 8

    provider.setCustomParameters({
      'login_hint': 'user@example.com'
    });
    פרמטרי OAuth נדרשים שמורים אינם מותרים ויתעלמו מהם. עיין בהפניה של ספק האימות לפרטים נוספים.
  5. בצע אימות עם Firebase באמצעות אובייקט הספק של Google. אתה יכול לבקש מהמשתמשים שלך להיכנס עם חשבונות Google שלהם על ידי פתיחת חלון מוקפץ או על ידי הפנייה מחדש לדף הכניסה. שיטת ההפניה מועדפת במכשירים ניידים.
    • כדי להיכנס באמצעות חלון מוקפץ, התקשר signInWithPopup :

      Web version 9

      import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      signInWithPopup(auth, provider)
        .then((result) => {
          // This gives you a Google Access Token. You can use it to access the Google API.
          const credential = GoogleAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
          // 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.customData.email;
          // The AuthCredential type that was used.
          const credential = GoogleAuthProvider.credentialFromError(error);
          // ...
        });

      Web version 8

      firebase.auth()
        .signInWithPopup(provider)
        .then((result) => {
          /** @type {firebase.auth.OAuthCredential} */
          var credential = result.credential;
      
          // This gives you a Google Access Token. You can use it to access the Google API.
          var token = credential.accessToken;
          // 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 של ספק Google שבו ניתן להשתמש כדי להביא נתונים נוספים באמצעות ממשקי ה-API של Google.

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

    • כדי להיכנס על ידי הפנייה מחדש לדף הכניסה, התקשר signInWithRedirect :

      Web version 9

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

      Web version 8

      firebase.auth().signInWithRedirect(provider);
      לאחר מכן, תוכל גם לאחזר את אסימון ה-OAuth של ספק Google על ידי קריאה getRedirectResult כאשר הדף שלך נטען:

      Web version 9

      import { getAuth, getRedirectResult, GoogleAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      getRedirectResult(auth)
        .then((result) => {
          // This gives you a Google Access Token. You can use it to access Google APIs.
          const credential = GoogleAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
      
          // 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.customData.email;
          // The AuthCredential type that was used.
          const credential = GoogleAuthProvider.credentialFromError(error);
          // ...
        });

      Web version 8

      firebase.auth()
        .getRedirectResult()
        .then((result) => {
          if (result.credential) {
            /** @type {firebase.auth.OAuthCredential} */
            var credential = result.credential;
      
            // This gives you a Google Access Token. You can use it to access the Google API.
            var token = credential.accessToken;
            // ...
          }
          // 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;
          // ...
        });
      זה גם המקום שבו אתה יכול לתפוס ולטפל בשגיאות. לרשימה של קודי שגיאה, עיין ב- Auth Reference Docs .

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

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

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

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

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

הצעדים הבאים

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

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

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

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

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

Web version 9

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

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

Web version 8

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