Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

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

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

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

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

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

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

Web version 9

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

Web version 8

import firebase from "firebase/app";
import "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
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 :

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

Web version 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 :

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

Web version 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 . כאשר משתמש נכנס בהצלחה, אתה יכול לקבל מידע על המשתמש ב-observator.

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

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

הצעדים הבאים

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