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

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

เพิ่มและเริ่มต้น SDK ของ Authentication

  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 สำหรับการสร้างต้นแบบแบบอินเทอร์แอกทีฟ หรือ REST API โปรแกรมจำลอง Authentication สำหรับการทดสอบแบบไม่โต้ตอบ

คุณสามารถดูคำแนะนำโดยละเอียดได้ที่เชื่อมต่อแอปกับโปรแกรมจำลอง 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;
    // ..
  });
auth_signup_password.js

Web

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:

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

Web

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 เมื่อผู้ใช้ ลงชื่อเข้าใช้เรียบร้อยแล้ว คุณจะได้รับข้อมูลเกี่ยวกับผู้ใช้ในผู้สังเกตการณ์

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

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

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

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