เริ่มต้นใช้งานการตรวจสอบสิทธิ์ Firebase ในเว็บไซต์

คุณสามารถใช้ Firebase Authentication เพื่ออนุญาตให้ผู้ใช้ลงชื่อเข้าใช้แอปโดยใช้วิธีการลงชื่อเข้าใช้ตั้งแต่ 1 วิธีขึ้นไป ซึ่งรวมถึงการลงชื่อเข้าใช้ด้วยอีเมลและรหัสผ่าน รวมถึงผู้ให้บริการข้อมูลประจำตัวแบบรวมศูนย์ เช่น Google Sign-in และ Facebook Login บทแนะนำนี้จะช่วยให้คุณเริ่มต้นใช้งาน Firebase Authentication โดยแสดงวิธีเพิ่มการลงชื่อเข้าใช้ด้วยอีเมลและรหัสผ่านลงในแอป

เพิ่มและเริ่มต้นใช้งาน Authentication SDK

  1. หากยังไม่ได้ติดตั้ง ให้ ติดตั้ง Firebase JS SDK และเริ่มต้นใช้งาน Firebase

  2. เพิ่ม Firebase Authentication JS SDK และเริ่มต้นใช้งาน Firebase Authentication โดยทำดังนี้

Web 

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 

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

ก่อนจะพูดถึงวิธีที่แอปตรวจสอบสิทธิ์ผู้ใช้ เรามาแนะนำชุด เครื่องมือที่คุณใช้สร้างต้นแบบและทดสอบ Authentication ฟังก์ชันการทำงานได้: Firebase Local Emulator Suite หากคุณกำลังตัดสินใจเลือกเทคนิคการตรวจสอบสิทธิ์ และผู้ให้บริการ ลองใช้โมเดลข้อมูลต่างๆ กับข้อมูลสาธารณะและข้อมูลส่วนตัว โดยใช้ Authentication และ Firebase Security Rules หรือสร้างต้นแบบการออกแบบ UI ของการลงชื่อเข้าใช้ การทำงานในเครื่องโดยไม่ต้องติดตั้งใช้งานบริการจริง อาจเป็นความคิดที่ดี

โปรแกรมจำลองAuthenticationเป็นส่วนหนึ่งของLocal Emulator Suiteซึ่ง ช่วยให้แอปโต้ตอบกับเนื้อหาและการกำหนดค่าฐานข้อมูลที่จำลองขึ้น รวมถึง ทรัพยากรโปรเจ็กต์ที่จำลองขึ้น (ฟังก์ชัน ฐานข้อมูลอื่นๆ และกฎความปลอดภัย) ได้ด้วย

การใช้โปรแกรมจำลอง Authentication มีขั้นตอนง่ายๆ ดังนี้

  1. เพิ่มบรรทัดโค้ดลงในการกำหนดค่าการทดสอบของแอปเพื่อเชื่อมต่อกับโปรแกรมจำลอง
  2. เรียกใช้ firebase emulators:start จากไดเรกทอรีรากของโปรเจ็กต์ที่อยู่ในเครื่อง
  3. ใช้ UI ของ Local Emulator Suite เพื่อสร้างต้นแบบแบบอินเทอร์แอกทีฟ หรือใช้ Authentication emulator REST API สำหรับการทดสอบแบบไม่โต้ตอบ

ดูคำแนะนำโดยละเอียดได้ที่หัวข้อ เชื่อมต่อแอปกับโปรแกรมจำลองAuthentication ดูข้อมูลเพิ่มเติมได้ที่หัวข้อLocal Emulator Suiteบทนำ

ตอนนี้เรามาดูวิธีตรวจสอบสิทธิ์ผู้ใช้กันต่อ

ลงชื่อสมัครใช้ผู้ใช้ใหม่

สร้างแบบฟอร์มที่อนุญาตให้ผู้ใช้ใหม่ลงทะเบียนกับแอปโดยใช้อีเมลและรหัสผ่าน เมื่อผู้ใช้กรอกแบบฟอร์มเสร็จแล้ว ให้ตรวจสอบอีเมลและรหัสผ่านที่ผู้ใช้ระบุ จากนั้นส่งไปยังเมธอด createUserWithEmailAndPassword ดังนี้

Web

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

Web

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

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

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

ตั้งค่า Observer สถานะการตรวจสอบสิทธิ์และรับข้อมูลผู้ใช้

สำหรับแต่ละหน้าของแอปที่ต้องใช้ข้อมูลเกี่ยวกับผู้ใช้ที่ลงชื่อเข้าใช้ ให้แนบ Observer กับออบเจ็กต์การตรวจสอบสิทธิ์ส่วนกลาง ระบบจะเรียก Observer นี้เมื่อใดก็ตามที่สถานะการลงชื่อเข้าใช้ของผู้ใช้เปลี่ยนแปลง

แนบ Observer โดยใช้เมธอด onAuthStateChanged เมื่อผู้ใช้ลงชื่อเข้าใช้สำเร็จ คุณจะดูข้อมูลเกี่ยวกับผู้ใช้ใน Observer ได้

Web

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

Web

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

ขั้นตอนถัดไป

ดูวิธีเพิ่มการรองรับผู้ให้บริการข้อมูลประจำตัวอื่นๆ และบัญชีผู้ใช้ชั่วคราวที่ไม่ระบุชื่อ