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