ตรวจสอบสิทธิ์ด้วย 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:

การตั้งค่าการตรวจสอบสิทธิ์

นโยบายรหัสผ่าน Firebase Authentication รองรับข้อกำหนดด้านรหัสผ่านต่อไปนี้

  • ต้องมีอักขระตัวพิมพ์เล็ก

  • ต้องมีอักขระตัวพิมพ์ใหญ่

  • ต้องมีอักขระที่เป็นตัวเลข

  • ต้องมีอักขระที่ไม่ใช่ตัวอักษรและตัวเลขคละกัน

    อักขระต่อไปนี้เป็นไปตามข้อกำหนดอักขระที่ไม่ใช่ตัวอักษรและตัวเลขคละกัน ^ $ * . [ ] { } ( ) ? " ! @ # % & / \ , > < ' : ; | _ ~

  • ความยาวรหัสผ่านขั้นต่ำ (ช่วง 6-30 อักขระ โดยค่าเริ่มต้นคือ 6)

  • ความยาวสูงสุดของรหัสผ่าน (สูงสุด 4096 อักขระ)

คุณสามารถเปิดการบังคับใช้นโยบายรหัสผ่านได้ใน 2 โหมดดังต่อไปนี้

  • ข้อกำหนด: ความพยายามลงชื่อสมัครใช้จะไม่สำเร็จจนกว่าผู้ใช้จะอัปเดตรหัสผ่านที่สอดคล้องกับนโยบายของคุณ

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

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

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

การตรวจสอบรหัสผ่านในไคลเอ็นต์

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

const status = await validatePassword(getAuth(), passwordFromUser);
if (!status.isValid) {
  // Password could not be validated. Use the status to show what
  // requirements are met and which are missing.

  // If a criterion is undefined, it is not required by policy. If the
  // criterion is defined but false, it is required but not fulfilled by
  // the given password. For example:
  const needsLowerCase = status.containsLowercaseLetter !== true;
}

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

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

เพื่อลดความเสี่ยงนี้ เราขอแนะนำให้คุณเปิดใช้การป้องกันการแจงนับอีเมลสำหรับโปรเจ็กต์ของคุณโดยใช้เครื่องมือ gcloud ของ Google Cloud โปรดทราบว่าการเปิดใช้ฟีเจอร์นี้จะเปลี่ยนลักษณะการรายงานข้อผิดพลาดของ 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