Check out what’s new from Firebase@ Google I/O 2021, and join our alpha program for early access to the new Remote Config personalization feature. Learn more

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

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

เชื่อมต่อแอปของคุณกับ Firebase

ติดตั้ง Firebase SDK อย่าลืมวางรหัสการกำหนดค่าลงในหน้าเว็บของคุณตามที่อธิบายไว้

(ไม่บังคับ) ต้นแบบและทดสอบด้วย Firebase Local Emulator Suite

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

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

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

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

มีคำแนะนำโดยละเอียดที่ Connect your app to the Authentication emulator สำหรับข้อมูลเพิ่มเติม โปรดดูที่การ แนะนำ Local Emulator Suite

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

สมัครสมาชิกใหม่

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

เว็บ v8

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

เว็บ v9

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

เข้าสู่ระบบผู้ใช้ที่มีอยู่

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

เว็บ v8

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

เว็บ v9

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

ตั้งค่าผู้สังเกตการณ์สถานะการรับรองความถูกต้องและรับข้อมูลผู้ใช้

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

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

เว็บ v8

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

เว็บ v9

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

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

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