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

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

หากต้องการความช่วยเหลือจาก AI ให้คัดลอกพรอมต์ด้านล่างลงใน Agent การเขียนโค้ด AI (เช่น Antigravity, Claude Code, Codex และ Cursor) คุณสามารถปรับแต่งพรอมต์และทำซ้ำกับเอเจนต์ได้ ดูข้อมูลการติดตั้งโดยละเอียดได้ที่ ทักษะเอเจนต์ Firebase 

Help me use Firebase in my app.
1. Make sure that **Firebase agent skills** are installed and updated. For Claude Code, Codex, or Cursor agents, help me install the Firebase plugin. For other agents, run `npx skills add firebase/agent-skills`.  Always try to use **Firebase agent skills** for Firebase-related tasks.
2. Help me set up and use Firebase Authentication with email and password authentication in my app.

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

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

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

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

  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;
    // ..
  });

    Web

    firebase.auth().createUserWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in 
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ..
  });
    หากสร้างบัญชีใหม่แล้ว ระบบจะลงชื่อเข้าใช้ให้ผู้ใช้โดยอัตโนมัติ ดูรายละเอียดผู้ใช้ที่ลงชื่อเข้าใช้ได้ที่ส่วนขั้นตอนถัดไปด้านล่าง

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

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

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

  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;
  });

    Web

    firebase.auth().signInWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
  });
    ดูรายละเอียดผู้ใช้ที่ลงชื่อเข้าใช้ได้ที่ส่วนขั้นตอนถัดไปด้านล่าง

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

แนะนำ: ตั้งค่านโยบายรหัสผ่าน

คุณสามารถเพิ่มความปลอดภัยให้กับบัญชีได้ด้วยการบังคับใช้ข้อกำหนดรหัสผ่านที่ซับซ้อน

หากต้องการกำหนดค่านโยบายรหัสผ่านสำหรับโปรเจ็กต์ ให้เปิดส่วนนโยบายรหัสผ่าน ในแท็บความปลอดภัย > การตรวจสอบสิทธิ์ > การตั้งค่าของ 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 บางอย่างที่ใช้อีเมลเป็นพารามิเตอร์จะแสดงข้อผิดพลาดที่เฉพาะเจาะจง หากอีเมลไม่ได้ลงทะเบียนในกรณีที่ต้องลงทะเบียน (เช่น เมื่อลงชื่อเข้าใช้ด้วยอีเมลและรหัสผ่าน) หรือลงทะเบียน ในกรณีที่ต้องไม่ได้ใช้ (เช่น เมื่อเปลี่ยนอีเมลของผู้ใช้) แม้ว่าวิธีนี้จะเป็นประโยชน์ในการแนะนำวิธีแก้ไขปัญหาที่เฉพาะเจาะจงแก่ผู้ใช้ แต่ก็อาจถูกผู้ไม่ประสงค์ดีนำไปใช้ในทางที่ผิดเพื่อค้นหาอีเมลที่ผู้ใช้ของคุณลงทะเบียนไว้

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

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

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

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

  • ในแอป วิธีที่แนะนำในการทราบสถานะการให้สิทธิ์ของผู้ใช้คือการ ตั้งค่า Observer ในออบเจ็กต์ 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.
});

Web

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