Save the date - Google I/O returns May 18-20. Register to get the most out of the digital experience: Build your schedule, reserve space, participate in Q&As, earn Google Developer profile badges, and more. Register now

התחל בעבודה עם אימות Firebase באתרים

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

חבר את האפליקציה שלך ל- Firebase

התקן את ה- SDK של Firebase . הקפד להדביק את קוד התצורה בדף האינטרנט שלך כמתואר.

(אופציונלי) אב טיפוס ובדיקה באמצעות חבילת אמולטור מקומית של Firebase

לפני שנדבר על האופן שבו האפליקציה שלך מאמתת משתמשים, בואו להציג קבוצה של כלים שבהם תוכלו להשתמש באב טיפוס ובדיקת פונקציונליות אימות: Firebase Local Emulator Suite. אם אתה מחליט בין טכניקות וספקי אימות, לנסות מודלים שונים של נתונים עם נתונים ציבוריים ופרטיים באמצעות כללי אימות ואבטחת Firebase, או אבות טיפוס של עיצובי ממשק משתמש של כניסה, היכולת לעבוד באופן מקומי ללא פריסת שירותים חיים יכולה להיות רעיון נהדר .

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

השימוש באמולטור האימות כולל כמה צעדים:

  1. הוספת שורת קוד לתצורת הבדיקה של האפליקציה שלך כדי להתחבר לאמולטור.
  2. משורש ספריית הפרויקטים המקומית שלך, הפעלת firebase emulators:start .
  3. שימוש בממשק המשתמש של אמולטור הסוויטה המקומי לצורך יצירת טיפוס אינטראקטיבי, או REST API של אמולטור האימות לצורך בדיקות לא אינטראקטיביות.

מדריך מפורט זמין בחיבור האפליקציה שלך לאמולטור האימות . למידע נוסף, עיין במבוא של Local Emulator Suite .

עכשיו בואו נמשיך כיצד לאמת משתמשים.

הרשמו משתמשים חדשים

צור טופס המאפשר למשתמשים חדשים להירשם לאפליקציה שלך באמצעות כתובת הדוא"ל והסיסמה שלהם. כאשר משתמש משלים את הטופס, אמת את כתובת הדוא"ל והסיסמה שסופקו על ידי המשתמש, ואז העביר אותם לשיטת createUserWithEmailAndPassword :

אינטרנט v8

firebase.auth().createUserWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in 
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ..
  });

אינטרנט v9

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

const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ..
  });

היכנס למשתמשים קיימים

צור טופס המאפשר למשתמשים קיימים להיכנס באמצעות כתובת הדוא"ל והסיסמה שלהם. כאשר משתמש signInWithEmailAndPassword את הטופס, התקשר לשיטת signInWithEmailAndPassword :

אינטרנט v8

firebase.auth().signInWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
  });

אינטרנט v9

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

const auth = getAuth();
signInWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
  });

הגדר משקיף על מצב אימות וקבל נתוני משתמשים

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

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

אינטרנט v8

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/firebase.User
    var uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

אינטרנט v9

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

const auth = getAuth();
onAuthStateChanged(auth, (user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/firebase.User
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

הצעדים הבאים

למד כיצד להוסיף תמיכה לספקי זהות אחרים ולחשבונות אורחים אנונימיים: