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

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

הוסף ואתחל את ה-SDK של Authentication

1. אם עדיין לא עשית זאת, התקן את Firebase JS SDK ואתחל את Firebase .

2. הוסף את Firebase Authentication JS SDK ואתחל את Firebase Authentication:

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = getAuth(app);

import firebase from "firebase/compat/app";
import "firebase/compat/auth";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = firebase.auth();

(אופציונלי) אב-טיפוס ובדיקה עם Firebase Local Emulator Suite

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

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

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

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

מדריך מפורט זמין ב- Connect your app to the Authentication emulator . למידע נוסף, עיין במבוא של Local Emulator Suite .

כעת נמשיך עם איך לאמת משתמשים.

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

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

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

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

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

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

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

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

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

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

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

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

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/auth.user
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});
auth_state_listener.js

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/v8/firebase.User
    var uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});
index.js

הצעדים הבאים

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

• כניסה לגוגל
• כניסה לפייסבוק
• כניסה לטוויטר
• התחברות GitHub
• כניסה אנונימית