เริ่มต้นใช้งาน Firebase Authentication บนเว็บไซต์

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

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

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/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 หรือการออกแบบ UI การลงชื่อเข้าใช้ต้นแบบ ความสามารถในการทำงานภายในเครื่องโดยไม่ต้องใช้บริการที่ใช้งานอยู่อาจเป็นแนวคิดที่ดี .

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

การใช้โปรแกรมจำลองการตรวจสอบสิทธิ์เกี่ยวข้องกับขั้นตอนเพียงไม่กี่ขั้นตอน:

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

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

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

ลงทะเบียนผู้ใช้ใหม่

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

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

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

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

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

• ลงชื่อเข้าใช้ Google
• เข้าสู่ระบบ Facebook
• เข้าสู่ระบบทวิตเตอร์
• เข้าสู่ระบบ GitHub
• การลงชื่อเข้าใช้แบบไม่ระบุชื่อ