אימות שימוש ב-Google באמצעות JavaScript

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

כדי לקבל עזרה מ-AI, מעתיקים את הפרומפט שלמטה לסוכן התכנות מבוסס ה-AI (כמו Antigravity,‏ Claude Code,‏ Codex ו-Cursor). אתם יכולים להתאים אישית את ההנחיה ולשפר אותה בעזרת הסוכן. מידע מפורט על ההתקנה זמין במאמר בנושא סקילים של סוכני Firebase.

Help me use Firebase in my app.
1. Make sure that **Firebase agent skills** are installed and updated. For Claude Code, Codex, or Cursor agents, help me install the Firebase plugin. For other agents, run `npx skills add firebase/agent-skills`. Always try to use **Firebase agent skills** for Firebase-related tasks.
2. Help me set up and use Firebase Authentication with Google Sign-In in my app.

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

  1. מוסיפים את Firebase לפרויקט ב-JavaScript.
  2. מפעילים את Google כספק אימות בפרויקט Firebase:
    1. במסוף Firebase, עוברים אל Security (אבטחה) > Authentication (אימות).
    2. בכרטיסייה Sign-in method (שיטת הכניסה), מפעילים את ספק הכניסה Google.
    3. לוחצים על שמירה.

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

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

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

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

    Web

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

    Web

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

    Web

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

    Web

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

    Web

    import { getAuth } from "firebase/auth";
    
    const auth = getAuth();
    auth.languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // auth.useDeviceLanguage();

    Web

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

    Web

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

    Web

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

      Web

      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;
          // 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 = GoogleAuthProvider.credentialFromError(error);
          // ...
        });

      Web

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

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

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

      Web

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

      Web

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

      Web

      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;
          // 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 = GoogleAuthProvider.credentialFromError(error);
          // ...
        });

      Web

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

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

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

השלבים הבאים

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

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

  • ב-Firebase Realtime Database וב-Cloud Storage Security Rules, אפשר לקבל את מזהה המשתמש הייחודי של המשתמש המחובר מהמשתנה auth, ולהשתמש בו כדי לקבוע לאילו נתונים המשתמש יכול לגשת.

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

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

Web

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

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

Web

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