คุณสามารถใช้ Firebase Authentication เพื่ออนุญาตให้ผู้ใช้ลงชื่อเข้าใช้แอปโดยใช้วิธีการลงชื่อเข้าใช้อย่างน้อย 1 วิธี ซึ่งรวมถึงการลงชื่อเข้าใช้ด้วยอีเมลและรหัสผ่าน รวมถึงผู้ให้บริการข้อมูลประจำตัวแบบรวมศูนย์ เช่น Google Sign-In และ Facebook Login บทแนะนำนี้จะเริ่มต้นใช้งาน Firebase Authentication โดยแสดงวิธีเพิ่มการลงชื่อเข้าใช้ด้วยอีเมลและรหัสผ่านลงในแอป
เพิ่มและเริ่มต้น Authentication SDK
หากยังไม่ได้ดำเนินการ ให้ติดตั้ง Firebase JS SDK และเริ่มต้น Firebase
เพิ่ม 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 บรรทัดลงในการกําหนดค่าการทดสอบของแอปเพื่อเชื่อมต่อกับโปรแกรมจําลอง
- จากรูทของไดเรกทอรีโปรเจ็กต์ในเครื่อง ให้เรียกใช้
firebase emulators:start
- การใช้ Local Emulator Suite UI สําหรับการสร้างต้นแบบแบบอินเทอร์แอกทีฟ หรือ Authentication 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; });
ตั้งค่าผู้สังเกตสถานะการตรวจสอบสิทธิ์และรับข้อมูลผู้ใช้
สําหรับหน้าแต่ละหน้าของแอปที่ต้องใช้ข้อมูลเกี่ยวกับผู้ใช้ที่ลงชื่อเข้าใช้ ให้แนบผู้สังเกตการณ์กับออบเจ็กต์การตรวจสอบสิทธิ์ส่วนกลาง ระบบจะเรียกใช้ผู้สังเกตการณ์นี้ทุกครั้งที่มีการเปลี่ยนแปลงสถานะการลงชื่อเข้าใช้ของผู้ใช้
แนบผู้สังเกตการณ์โดยใช้เมธอด 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 // ... } });
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 // ... } });
ขั้นตอนถัดไป
ดูวิธีเพิ่มการรองรับผู้ให้บริการข้อมูลประจำตัวรายอื่นๆ และบัญชีผู้ใช้ชั่วคราวที่ไม่ระบุชื่อ