เริ่มต้นใช้งานการตรวจสอบสิทธิ์ 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
    // ...
  }
});

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

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