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