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

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

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

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

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

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

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

השימוש באמולטור האימות כולל רק כמה שלבים:

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

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

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

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

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

גרסת אינטרנט 9

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

גרסת אינטרנט 8

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

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

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

גרסת אינטרנט 9

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

גרסת אינטרנט 8

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

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

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

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

גרסת אינטרנט 9

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

גרסת אינטרנט 8

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

הצעדים הבאים

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