คุณสามารถใช้การตรวจสอบสิทธิ์ Firebase เพื่ออนุญาตให้ผู้ใช้ลงชื่อเข้าใช้แอปของคุณโดยใช้วิธีการลงชื่อเข้าใช้ตั้งแต่หนึ่งวิธีขึ้นไป รวมถึงที่อยู่อีเมลและรหัสผ่านในการลงชื่อเข้าใช้ และผู้ให้บริการข้อมูลประจำตัวแบบรวมศูนย์ เช่น การลงชื่อเข้าใช้ Google และการเข้าสู่ระบบด้วย Facebook บทช่วยสอนนี้ช่วยให้คุณเริ่มต้นใช้งาน Firebase Authentication โดยแสดงวิธีเพิ่มที่อยู่อีเมลและรหัสผ่านในการลงชื่อเข้าใช้แอปของคุณ
เพิ่มและเริ่มต้น Authentication SDK
หากคุณยังไม่ได้ ดำเนินการ ให้ติดตั้ง Firebase JS SDK และเริ่มต้น Firebase
เพิ่ม Firebase Authentication JS SDK และเริ่มต้น Firebase Authentication:
API แบบโมดูลาร์ของเว็บ
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);
API เนมสเปซของเว็บ
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
ก่อนที่จะพูดถึงวิธีที่แอปของคุณตรวจสอบสิทธิ์ผู้ใช้ เรามาแนะนำชุดเครื่องมือที่คุณสามารถใช้เพื่อสร้างต้นแบบและทดสอบฟังก์ชันการตรวจสอบสิทธิ์: Firebase Local Emulator Suite หากคุณกำลังตัดสินใจเลือกเทคนิคและผู้ให้บริการการตรวจสอบสิทธิ์ การลองใช้โมเดลข้อมูลที่แตกต่างกันด้วยข้อมูลสาธารณะและส่วนตัวโดยใช้กฎการตรวจสอบสิทธิ์และ Firebase Security Rules หรือการสร้างต้นแบบการออกแบบ UI การลงชื่อเข้าใช้ ความสามารถในการทำงานในพื้นที่โดยไม่ต้องปรับใช้บริการสดอาจเป็นความคิดที่ดี .
โปรแกรมจำลองการตรวจสอบสิทธิ์เป็นส่วนหนึ่งของ Local Emulator Suite ซึ่งช่วยให้แอปของคุณโต้ตอบกับเนื้อหาและการกำหนดค่าฐานข้อมูลที่จำลองได้ รวมถึงทรัพยากรโปรเจ็กต์ที่จำลอง (ฟังก์ชัน ฐานข้อมูลอื่นๆ และกฎความปลอดภัย)
การใช้โปรแกรมจำลองการรับรองความถูกต้องมีเพียงไม่กี่ขั้นตอน:
- การเพิ่มบรรทัดโค้ดลงในการกำหนดค่าทดสอบของแอปเพื่อเชื่อมต่อกับโปรแกรมจำลอง
- จากรากของไดเร็กทอรีโปรเจ็กต์ในเครื่องของคุณ ให้รัน
firebase emulators:start
- การใช้ Local Emulator Suite UI สำหรับการสร้างต้นแบบเชิงโต้ตอบ หรือ REST API โปรแกรมจำลองการตรวจสอบสิทธิ์สำหรับการทดสอบแบบไม่โต้ตอบ
ดูคำแนะนำโดยละเอียดได้ที่ เชื่อมต่อแอปของคุณกับโปรแกรมจำลองการตรวจสอบสิทธิ์ สำหรับข้อมูลเพิ่มเติม โปรดดูที่ การแนะนำ Local Emulator Suite
ตอนนี้เรามาดูวิธีการตรวจสอบสิทธิ์ผู้ใช้กันต่อ
ลงทะเบียนผู้ใช้ใหม่
สร้างแบบฟอร์มที่อนุญาตให้ผู้ใช้ใหม่ลงทะเบียนกับแอปของคุณโดยใช้ที่อยู่อีเมลและรหัสผ่าน เมื่อผู้ใช้กรอกแบบฟอร์ม ให้ตรวจสอบที่อยู่อีเมลและรหัสผ่านที่ผู้ใช้ให้ไว้ จากนั้นส่งต่อไปยังเมธอด createUserWithEmailAndPassword
:
Web modular API
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 namespaced API
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 modular API
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 namespaced API
firebase.auth().signInWithEmailAndPassword(email, password) .then((userCredential) => { // Signed in var user = userCredential.user; // ... }) .catch((error) => { var errorCode = error.code; var errorMessage = error.message; });
ตั้งค่าผู้สังเกตการณ์สถานะการตรวจสอบสิทธิ์และรับข้อมูลผู้ใช้
สำหรับแต่ละหน้าของแอปที่ต้องการข้อมูลเกี่ยวกับผู้ใช้ที่ลงชื่อเข้าใช้ ให้แนบผู้สังเกตการณ์เข้ากับออบเจ็กต์การตรวจสอบสิทธิ์ส่วนกลาง ผู้สังเกตการณ์นี้จะถูกเรียกทุกครั้งที่สถานะการลงชื่อเข้าใช้ของผู้ใช้เปลี่ยนแปลง
แนบผู้สังเกตการณ์โดยใช้เมธอด onAuthStateChanged
เมื่อผู้ใช้ลงชื่อเข้าใช้สำเร็จ คุณจะได้รับข้อมูลเกี่ยวกับผู้ใช้ในตัวผู้สังเกตการณ์
Web modular API
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 namespaced API
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 // ... } });
ขั้นตอนถัดไป
เรียนรู้วิธีเพิ่มการสนับสนุนสำหรับผู้ให้บริการข้อมูลประจำตัวรายอื่นและบัญชีผู้เยี่ยมชมที่ไม่ระบุชื่อ:
- ลงชื่อเข้าใช้ Google
- เข้าสู่ระบบเฟสบุ๊ค
- เข้าสู่ระบบทวิตเตอร์
- เข้าสู่ระบบ GitHub
- การลงชื่อเข้าใช้แบบไม่ระบุชื่อ