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