ตรวจสอบสิทธิ์ด้วย Firebase โดยใช้บัญชีแบบรหัสผ่านที่ใช้ JavaScript

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

ก่อนเริ่มต้น

  1. เพิ่ม Firebase ลงในโปรเจ็กต์ JavaScript
  2. หากยังไม่ได้เชื่อมต่อแอปกับโปรเจ็กต์ Firebase ให้ดำเนินการจาก คอนโซล Firebase
  3. เปิดใช้งานการลงชื่อเข้าใช้ด้วยอีเมล/รหัสผ่าน:
    1. ในคอนโซล Firebase ให้เปิด ส่วน Auth
    2. ในแท็บวิธีการลงชื่อเข้าใช้ ให้เปิดใช้การลงชื่อเข้าใช้อีเมล/รหัสผ่าน แล้วคลิกบันทึก

สร้างบัญชีที่ใช้รหัสผ่าน

หากต้องการสร้างบัญชีผู้ใช้ใหม่ด้วยรหัสผ่าน ให้ทำตามขั้นตอนต่อไปนี้ใน หน้าลงชื่อสมัครใช้ของแอป

  1. เมื่อผู้ใช้ใหม่ลงชื่อสมัครใช้โดยใช้แบบฟอร์มลงชื่อสมัครใช้ของแอป ให้กรอก ขั้นตอนการตรวจสอบบัญชีที่แอปของคุณต้องการ เช่น การยืนยันว่า รหัสผ่านของบัญชีใหม่ได้พิมพ์อย่างถูกต้องและตรงกับความซับซ้อนของคุณ
  2. สร้างบัญชีใหม่ด้วยการส่งอีเมลและรหัสผ่านของผู้ใช้ใหม่ ถึง 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;
    // ..
  });
    auth_signup_password.js

    Web

    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
    หากสร้างบัญชีใหม่ ผู้ใช้จะลงชื่อเข้าใช้โดยอัตโนมัติ โปรดดูส่วนขั้นตอนถัดไปด้านล่างเพื่อดูรายละเอียดผู้ใช้ที่ลงชื่อเข้าใช้

    นอกจากนี้ คุณจะสามารถตรวจหาและจัดการข้อผิดพลาดได้ด้วย โปรดดูรายการรหัสข้อผิดพลาดในเอกสารข้อมูลอ้างอิงการตรวจสอบสิทธิ์

ลงชื่อเข้าใช้ผู้ใช้ด้วยอีเมลและรหัสผ่าน

ขั้นตอนในการลงชื่อเข้าใช้ให้ผู้ใช้ด้วยรหัสผ่านคล้ายกับขั้นตอนสำหรับ การสร้างบัญชีใหม่ ในหน้าลงชื่อเข้าใช้ของแอป ให้ทำดังนี้

  1. เมื่อผู้ใช้ลงชื่อเข้าใช้แอป ให้ส่งอีเมลของผู้ใช้และ รหัสผ่านไปยัง 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;
  });
    auth_signin_password.js

    Web

    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
    โปรดดูส่วนขั้นตอนถัดไปด้านล่างเพื่อดูรายละเอียดผู้ใช้ที่ลงชื่อเข้าใช้

    นอกจากนี้ คุณจะสามารถตรวจหาและจัดการข้อผิดพลาดได้ด้วย โปรดดูรายการรหัสข้อผิดพลาดในเอกสารข้อมูลอ้างอิงการตรวจสอบสิทธิ์

แนะนำ: เปิดใช้การป้องกันการนับอีเมล

เมธอด Firebase Authentication บางรายการที่ใช้อีเมลเป็นพารามิเตอร์ส่ง ข้อผิดพลาดที่เจาะจงหากอีเมลไม่ได้ลงทะเบียนเมื่อต้องลงทะเบียน (เช่น เมื่อลงชื่อเข้าใช้ด้วยอีเมลและรหัสผ่าน) หรือลงทะเบียน เมื่อไม่จำเป็นต้องใช้ (เช่น เมื่อเปลี่ยนอีเมลของผู้ใช้) แม้วิธีนี้จะมีประโยชน์ในการแนะนําวิธีรักษาที่เฉพาะเจาะจงให้กับผู้ใช้ แต่ก็อาจ ถูกผู้ประสงค์ร้ายละเมิดเพื่อค้นหาที่อยู่อีเมลที่ลงทะเบียนไว้โดย ผู้ใช้

เพื่อลดความเสี่ยงนี้ เราขอแนะนำให้คุณเปิดใช้การป้องกันการแจงนับอีเมล สำหรับโปรเจ็กต์โดยใช้เครื่องมือ Google Cloud gcloud โปรดทราบว่าการเปิดใช้ ฟีเจอร์จะเปลี่ยนลักษณะการรายงานข้อผิดพลาดของ Firebase Authentication โปรดตรวจสอบว่าแอปของคุณ ไม่ได้ขึ้นอยู่กับข้อผิดพลาดที่เจาะจงมากกว่า

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

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

  • ทางที่แนะนำในแอปเพื่อให้ทราบสถานะการตรวจสอบสิทธิ์ของผู้ใช้ ตั้งค่าผู้สังเกตการณ์ในออบเจ็กต์ Auth จากนั้นคุณจะสามารถดู ข้อมูลโปรไฟล์พื้นฐานจากออบเจ็กต์ User โปรดดู จัดการผู้ใช้

  • ในFirebase Realtime DatabaseและCloud Storage กฎความปลอดภัย คุณสามารถทำสิ่งต่อไปนี้ รับรหัสผู้ใช้ที่ไม่ซ้ำของผู้ใช้ที่ลงชื่อเข้าใช้จากตัวแปร auth และใช้เพื่อควบคุมข้อมูลที่ผู้ใช้เข้าถึงได้

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

หากต้องการนำผู้ใช้ออกจากระบบ โปรดโทร signOut

Web

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
auth_sign_out.js

Web

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
index.js