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

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

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

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

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

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

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

  1. יוצרים מופע של אובייקט הספק של Google:
    WebWeb
    import { GoogleAuthProvider } from "firebase/auth";

const provider = new GoogleAuthProvider();
    auth_google_provider_create.js
     
    var provider = new firebase.auth.GoogleAuthProvider();
    google-signin.js
  2. אופציונלי: מציינים היקפי הרשאות נוספים של OAuth 2.0 שרוצים לבקש מספק האימות. כדי להוסיף היקף, צריך להפעיל את הפונקציה addScope. לדוגמה:
    WebWeb
    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    auth_google_provider_scopes.js
     
    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    google-signin.js
    לעיון בספק האימות תיעוד.
  3. אופציונלי: אפשר להתאים את זרימת ה-OAuth של הספק לשוק המקומי בהתאם להעדפות המשתמש מבלי להעביר באופן מפורש את הפרמטרים המותאמים אישית הרלוונטיים של OAuth, מעדכנים את השפה במופע האימות לפני שמתחילים בתהליך OAuth. לדוגמה:
    WebWeb
    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
     
    firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();
    index.js
  4. אופציונלי: ציון פרמטרים מותאמים אישית נוספים של ספק OAuth שרוצים לשלוח בבקשת ה-OAuth. כדי להוסיף פרמטר מותאם אישית, קוראים לפונקציה setCustomParameters בספק שאותחל עם אובייקט שמכיל את המפתח כפי שמצוין במסמכים של ספק ה-OAuth ובערך המתאים. לדוגמה:
    WebWeb
    provider.setCustomParameters({
  'login_hint': 'user@example.com'
});
    auth_google_provider_params.js
     
    provider.setCustomParameters({
  'login_hint': 'user@example.com'
});
    google-signin.js
    פרמטרים נדרשים של OAuth שמורים אינם מותרים. המערכת תתעלם מהם. פרטים נוספים על ספק האימות.
  5. מבצעים אימות עם Firebase באמצעות אובייקט הספק של Google. אפשר ולבקש מהמשתמשים להיכנס באמצעות חשבונות Google שלהם, על ידי פתיחת חלון קופץ או על ידי הפניה אוטומטית לדף הכניסה. השיטה להפניה אוטומטית היא המועדפת במכשירים ניידים.
    • כדי להיכנס באמצעות חלון קופץ, צריך להתקשר אל signInWithPopup:
      WebWeb
      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);
    // ...
  });
      auth_google_signin_popup.js
       
      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;
    // ...
  });
      google-signin.js
      לתשומת ליבך, אפשר גם לאחזר את אסימון ה-OAuth של ספק Google, כדי להשתמש בו כדי לאחזר נתונים נוספים באמצעות Google APIs.

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

    • כדי להיכנס באמצעות הפניה אוטומטית לדף הכניסה, קוראים לפונקציה signInWithRedirect: יש לפעול לפי השיטות המומלצות כשמשתמשים ב-'signInWithRedirect'.
      WebWeb
      import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);
      auth_signin_redirect.js
       
      firebase.auth().signInWithRedirect(provider);
      index.js
      לאחר מכן, תוכלו גם לאחזר את אסימון ה-OAuth של ספק Google באמצעות קריאה ל-getRedirectResult כשהדף נטען:
      WebWeb
      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);
    // ...
  });
      auth_google_signin_redirect_result.js
       
      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;
    // ...
  });
      google-signin.js
      כאן אפשר גם לזהות ולטפל בשגיאות. רשימה של קודי שגיאה מופיעה במסמכי העזר לאימות.

אם הפעלתם את ההגדרה חשבון אחד לכל כתובת אימייל במסוף Firebase, כשמשתמש מנסה להיכנס לחשבון אצל ספק (כמו Google) באמצעות כתובת אימייל שכבר קיים אצל ספק אחר של Firebase (כמו Facebook), השגיאה זריקת auth/account-exists-with-different-credential ביחד עם אובייקט AuthCredential (אסימון מזהה של Google). כדי להשלים את הכניסה אל בספק המיועד, המשתמש צריך קודם להיכנס לספק הקיים (Facebook) ולאחר מכן לקשר אל AuthCredential לשעבר (אסימון מזהה של Google).

אם משתמשים ב-signInWithPopup, אפשר auth/account-exists-with-different-credential שגיאות עם קוד כמו הבא דוגמה:

import {
  getAuth,
  linkWithCredential,
  signInWithPopup,
  GoogleAuthProvider,
} from "firebase/auth";

try {
  // Step 1: User tries to sign in using Google.
  let result = await signInWithPopup(getAuth(), new GoogleAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending Google 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 Google 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) {
  // ...
}

מצב הפניה לכתובת URL אחרת

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

אפשר גם לבצע אימות ב-Firebase באמצעות חשבון Google באמצעות תהליך הכניסה באמצעות הספרייה 'כניסה באמצעות חשבון Google':

  1. משלבים את הכניסה באמצעות חשבון Google באפליקציה. לשם כך, פועלים לפי מדריך ההטמעה חשוב להגדיר את הכניסה באמצעות חשבון Google באמצעות מזהה הלקוח של Google שנוצר לפרויקט Firebase. מספר הלקוח של הפרויקט ב-Google מופיע בדף פרטי הכניסה ב-Developer Console של הפרויקט.
  2. בקריאה החוזרת (callback) של תוצאת הכניסה, צריך להחליף את האסימון המזהה מתגובת האימות של Google בפרטי כניסה ל-Firebase, ולהשתמש בו כדי לבצע אימות מול Firebase: 
    function handleCredentialResponse(response) {
  // Build Firebase credential with the Google ID token.
  const idToken = response.credential;
  const credential = GoogleAuthProvider.credential(idToken);

  // Sign in with credential from the Google user.
  signInWithCredential(auth, credential).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 credential that was used.
    const credential = GoogleAuthProvider.credentialFromError(error);
    // ...
  });
}

כדי לבצע אימות באמצעות Firebase באפליקציה של Node.js:

  1. עליך להיכנס למשתמש באמצעות חשבון Google שלו ולקבל את מזהה Google של המשתמש ב-Assistant. ניתן לעשות זאת בכמה דרכים. לדוגמה:
    • אם לאפליקציה יש ממשק קצה בדפדפן, צריך להשתמש בכניסה באמצעות חשבון Google כפי שמתואר בקטע טיפול ידני בתהליך הכניסה. קבלת אסימון מזהה של Google מהאימות תגובה: 
      var id_token = googleUser.getAuthResponse().id_token
       לאחר מכן, שולחים את האסימון הזה לאפליקציית Node.js.
    • אם האפליקציה פועלת במכשיר עם יכולות קלט מוגבלות, כמו בטלוויזיה, אפשר להשתמש Google תהליך הכניסה לטלוויזיות ולמכשירים.
  2. אחרי שמקבלים את האסימון המזהה של המשתמש ב-Google, אפשר להשתמש בו כדי ליצור פרטי כניסה ואז נכנסים למשתמש עם פרטי הכניסה:
    WebWeb
    import { getAuth, signInWithCredential, GoogleAuthProvider } from "firebase/auth";

// Build Firebase credential with the Google ID token.
const credential = GoogleAuthProvider.credential(id_token);

// Sign in with credential from the Google user.
const auth = getAuth();
signInWithCredential(auth, credential).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);
  // ...
});
    auth_google_build_signin.js
     
    // Build Firebase credential with the Google ID token.
var credential = firebase.auth.GoogleAuthProvider.credential(id_token);

// Sign in with credential from the Google user.
firebase.auth().signInWithCredential(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;
  // ...
});
    google-signin.js

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

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

בזמן יצירת הפרויקט, מערכת Firebase תקצה תת-דומיין ייחודי לפרויקט: https://my-app-12345.firebaseapp.com

הוא ישמש גם כמנגנון ההפניה האוטומטית לכניסה ל-OAuth. הדומיין הזה צריך להיות מותרת לכל ספקי ה-OAuth הנתמכים. עם זאת, המשמעות היא שהמשתמשים עשויים לראות הדומיין בזמן הכניסה ל-Google לפני הפניה מחדש לאפליקציה: המשך לכתובת: https://my-app-12345.firebaseapp.com.

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

  1. מבצעים את שלבים 1 עד 3 אינץ' מגדירים את הדומיין ל-Hosting. כשמבצעים אימות הבעלות על הדומיין שלך, Hosting, מקצה אישור SSL לדומיין המותאם אישית.
  2. מוסיפים את הדומיין המותאם אישית לרשימת הדומיינים המורשים מסוף Firebase: auth.custom.domain.com.
  3. במסוף המפתחים של Google או בדף ההגדרה של OAuth, מוסיפים את כתובת ה-URL של דף ההפניה האוטומטית לרשימת ההיתרים שיהיה זמין בדומיין המותאם אישית: https://auth.custom.domain.com/__/auth/handler
  4. כשמאתחלים את ספריית JavaScript, מציינים את הדומיין המותאם אישית עם השדה authDomain: 
    var config = {
  apiKey: '...',
  // Changed from 'PROJECT_ID.firebaseapp.com'.
  authDomain: 'auth.custom.domain.com',
  databaseURL: 'https://PROJECT_ID.firebaseio.com',
  projectId: 'PROJECT_ID',
  storageBucket: 'PROJECT_ID.firebasestorage.app',
  messagingSenderId: 'SENDER_ID'
};
firebase.initializeApp(config);

השלבים הבאים

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

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

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

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

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

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

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