จัดการผู้ใช้ใน Firebase

สร้างผู้ใช้

คุณมีตัวเลือกต่อไปนี้ในการสร้างผู้ใช้ใหม่

• จากแอป: สร้างผู้ใช้ใหม่ในโปรเจ็กต์ Firebase โดยเรียกใช้เมธอด createUserWithEmailAndPassword หรือลงชื่อเข้าใช้ผู้ใช้เป็นครั้งแรกโดยใช้ผู้ให้บริการข้อมูลประจำตัวแบบรวม เช่น Google Sign-In หรือ การเข้าสู่ระบบด้วย Facebook

• ในFirebaseคอนโซล: สร้างผู้ใช้ใหม่ที่ตรวจสอบสิทธิ์ด้วยรหัสผ่าน ในความปลอดภัย > การตรวจสอบสิทธิ์ > แท็บผู้ใช้

รับผู้ใช้ที่ลงชื่อเข้าใช้อยู่ในปัจจุบัน

วิธีที่แนะนำในการรับผู้ใช้ปัจจุบันคือการตั้งค่า Observer ในออบเจ็กต์ Auth ดังนี้

Web

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

const auth = getAuth();
onAuthStateChanged(auth, (user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/auth.user
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});
auth_state_listener.js

Web

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/v8/firebase.User
    var uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});
index.js

การใช้ Observer จะช่วยให้มั่นใจได้ว่าออบเจ็กต์ Auth จะไม่อยู่ในสถานะกลาง เช่น การเริ่มต้น เมื่อคุณรับผู้ใช้ปัจจุบัน เมื่อใช้ signInWithRedirect Observer onAuthStateChanged จะรอจนกว่า getRedirectResult จะแก้ไขก่อนที่จะทริกเกอร์

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

Web

import { getAuth } from "firebase/auth";

const auth = getAuth();
const user = auth.currentUser;

if (user) {
  // User is signed in, see docs for a list of available properties
  // https://firebase.google.com/docs/reference/js/auth.user
  // ...
} else {
  // No user is signed in.
}
auth_current_user.js

Web

const user = firebase.auth().currentUser;

if (user) {
  // User is signed in, see docs for a list of available properties
  // https://firebase.google.com/docs/reference/js/v8/firebase.User
  // ...
} else {
  // No user is signed in.
}
index.js

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

รับโปรไฟล์ของผู้ใช้

หากต้องการรับข้อมูลโปรไฟล์ของผู้ใช้ ให้ใช้พร็อพเพอร์ตี้ของอินสแตนซ์ของ User เช่น

Web

import { getAuth } from "firebase/auth";

const auth = getAuth();
const user = auth.currentUser;
if (user !== null) {
  // The user object has basic properties such as display name, email, etc.
  const displayName = user.displayName;
  const email = user.email;
  const photoURL = user.photoURL;
  const emailVerified = user.emailVerified;

  // The user's ID, unique to the Firebase project. Do NOT use
  // this value to authenticate with your backend server, if
  // you have one. Use User.getToken() instead.
  const uid = user.uid;
}
auth_get_user_profile.js

Web

const user = firebase.auth().currentUser;
if (user !== null) {
  // The user object has basic properties such as display name, email, etc.
  const displayName = user.displayName;
  const email = user.email;
  const photoURL = user.photoURL;
  const emailVerified = user.emailVerified;

  // The user's ID, unique to the Firebase project. Do NOT use
  // this value to authenticate with your backend server, if
  // you have one. Use User.getIdToken() instead.
  const uid = user.uid;
}
manage.js

สำคัญ: โปรดระมัดระวังเมื่อตั้งค่า (และแสดงในภายหลัง) ค่า UI ที่อาจแสดงต่อผู้ใช้ เช่น displayName และ photoURL API จะไม่กรองค่า เพื่อป้องกันการโจมตีประเภท XSS ที่อาจเกิดขึ้น

รับข้อมูลโปรไฟล์ของผู้ใช้ที่เฉพาะเจาะจงสำหรับผู้ให้บริการ

หากต้องการรับข้อมูลโปรไฟล์ที่ดึงมาจากผู้ให้บริการลงชื่อเข้าใช้ที่ลิงก์กับผู้ใช้ ให้ใช้พร็อพเพอร์ตี้ providerData เช่น

Web

import { getAuth } from "firebase/auth";

const auth = getAuth();
const user = auth.currentUser;

if (user !== null) {
  user.providerData.forEach((profile) => {
    console.log("Sign-in provider: " + profile.providerId);
    console.log("  Provider-specific UID: " + profile.uid);
    console.log("  Name: " + profile.displayName);
    console.log("  Email: " + profile.email);
    console.log("  Photo URL: " + profile.photoURL);
  });
}
auth_get_user_profile_provider.js

Web

const user = firebase.auth().currentUser;

if (user !== null) {
  user.providerData.forEach((profile) => {
    console.log("Sign-in provider: " + profile.providerId);
    console.log("  Provider-specific UID: " + profile.uid);
    console.log("  Name: " + profile.displayName);
    console.log("  Email: " + profile.email);
    console.log("  Photo URL: " + profile.photoURL);
  });
}
manage.js

อัปเดตโปรไฟล์ของผู้ใช้

คุณอัปเดตข้อมูลโปรไฟล์พื้นฐานของผู้ใช้ ซึ่งได้แก่ ชื่อที่แสดงของผู้ใช้ และ URL ของรูปโปรไฟล์ ได้ด้วยเมธอด updateProfile เช่น

Web

import { getAuth, updateProfile } from "firebase/auth";
const auth = getAuth();
updateProfile(auth.currentUser, {
  displayName: "Jane Q. User", photoURL: "https://example.com/jane-q-user/profile.jpg"
}).then(() => {
  // Profile updated!
  // ...
}).catch((error) => {
  // An error occurred
  // ...
});
auth_update_user_profile.js

Web

const user = firebase.auth().currentUser;

user.updateProfile({
  displayName: "Jane Q. User",
  photoURL: "https://example.com/jane-q-user/profile.jpg"
}).then(() => {
  // Update successful
  // ...
}).catch((error) => {
  // An error occurred
  // ...
});  
manage.js

ตั้งค่าอีเมลของผู้ใช้

คุณตั้งค่าอีเมลของผู้ใช้ได้ด้วยเมธอด updateEmail เช่น

Web

import { getAuth, updateEmail } from "firebase/auth";
const auth = getAuth();
updateEmail(auth.currentUser, "[e-mail]").then(() => {
  // Email updated!
  // ...
}).catch((error) => {
  // An error occurred
  // ...
});
auth_update_user_email.js

Web

const user = firebase.auth().currentUser;

user.updateEmail("[e-mail]").then(() => {
  // Update successful
  // ...
}).catch((error) => {
  // An error occurred
  // ...
});
manage.js

สำคัญ: หากต้องการตั้งค่าอีเมลของผู้ใช้ ผู้ใช้ต้องลงชื่อเข้าใช้เมื่อเร็วๆ นี้ ดูหัวข้อตรวจสอบสิทธิ์ผู้ใช้อีกครั้ง

ส่งอีเมลยืนยันให้ผู้ใช้

คุณสามารถส่งอีเมลยืนยันที่อยู่ไปยังผู้ใช้ด้วยวิธี sendEmailVerification ได้ เช่น

Web

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

const auth = getAuth();
sendEmailVerification(auth.currentUser)
  .then(() => {
    // Email verification sent!
    // ...
  });
auth_send_email_verification.js

Web

firebase.auth().currentUser.sendEmailVerification()
  .then(() => {
    // Email verification sent!
    // ...
  });
email.js

คุณปรับแต่งเทมเพลตอีเมลที่จะใช้ได้ในแท็บเทมเพลตของคอนโซล Firebase ดูเทมเพลตอีเมลในศูนย์ช่วยเหลือของ Firebase

นอกจากนี้ คุณยังส่งสถานะผ่าน URL สำหรับดำเนินการต่อเพื่อเปลี่ยนเส้นทางกลับ ไปยังแอปเมื่อส่งอีเมลยืนยันได้ด้วย

นอกจากนี้ คุณยังแปลอีเมลยืนยันเป็นภาษาท้องถิ่นได้โดยการอัปเดตรหัสภาษาในอินสแตนซ์ Auth ก่อนส่งอีเมล เช่น

Web

import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// auth.useDeviceLanguage();
auth_set_language_code.js

Web

firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();
index.js

ตั้งรหัสผ่านของผู้ใช้

คุณตั้งรหัสผ่านของผู้ใช้ได้ด้วยupdatePasswordวิธี เช่น

Web

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

const auth = getAuth();

const user = auth.currentUser;
const newPassword = getASecureRandomPassword();

updatePassword(user, newPassword).then(() => {
  // Update successful.
}).catch((error) => {
  // An error ocurred
  // ...
});
auth_update_password.js

Web

const user = firebase.auth().currentUser;
const newPassword = getASecureRandomPassword();

user.updatePassword(newPassword).then(() => {
  // Update successful.
}).catch((error) => {
  // An error ocurred
  // ...
});
manage.js

สำคัญ: หากต้องการตั้งรหัสผ่านของผู้ใช้ ผู้ใช้ต้องลงชื่อเข้าใช้เมื่อเร็วๆ นี้ ดูตรวจสอบสิทธิ์ผู้ใช้อีกครั้ง

ส่งอีเมลรีเซ็ตรหัสผ่าน

คุณสามารถส่งอีเมลรีเซ็ตรหัสผ่านไปยังผู้ใช้ด้วยsendPasswordResetEmail เมธอด เช่น

Web

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

const auth = getAuth();
sendPasswordResetEmail(auth, email)
  .then(() => {
    // Password reset email sent!
    // ..
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ..
  });
auth_send_password_reset.js

Web

firebase.auth().sendPasswordResetEmail(email)
  .then(() => {
    // Password reset email sent!
    // ..
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ..
  });
email.js

คุณปรับแต่งเทมเพลตอีเมลที่จะใช้ได้ในแท็บเทมเพลตของคอนโซล Firebase ดูเทมเพลตอีเมลในศูนย์ช่วยเหลือของ Firebase

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

นอกจากนี้ คุณยังแปลอีเมลรีเซ็ตรหัสผ่านได้โดยการอัปเดตรหัสภาษา ในอินสแตนซ์ Auth ก่อนส่งอีเมล เช่น

Web

import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// auth.useDeviceLanguage();
auth_set_language_code.js

Web

firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();
index.js

นอกจากนี้ คุณยังส่งอีเมลรีเซ็ตรหัสผ่านจากคอนโซล Firebase ได้ด้วย

ลบผู้ใช้

คุณลบบัญชีผู้ใช้ได้ด้วยวิธี delete เช่น

Web

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

const auth = getAuth();
const user = auth.currentUser;

deleteUser(user).then(() => {
  // User deleted.
}).catch((error) => {
  // An error ocurred
  // ...
});
auth_delete_user.js

Web

const user = firebase.auth().currentUser;

user.delete().then(() => {
  // User deleted.
}).catch((error) => {
  // An error ocurred
  // ...
});
manage.js

สำคัญ: หากต้องการลบผู้ใช้ ผู้ใช้ต้องลงชื่อเข้าใช้เมื่อเร็วๆ นี้ ดูตรวจสอบสิทธิ์ผู้ใช้อีกครั้ง

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

ตรวจสอบสิทธิ์ผู้ใช้อีกครั้ง

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

Web

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

const auth = getAuth();
const user = auth.currentUser;

// TODO(you): prompt the user to re-provide their sign-in credentials
const credential = promptForCredentials();

reauthenticateWithCredential(user, credential).then(() => {
  // User re-authenticated.
}).catch((error) => {
  // An error ocurred
  // ...
});
auth_reauth_with_credential.js

Web

const user = firebase.auth().currentUser;

// TODO(you): prompt the user to re-provide their sign-in credentials
const credential = promptForCredentials();

user.reauthenticateWithCredential(credential).then(() => {
  // User re-authenticated.
}).catch((error) => {
  // An error occurred
  // ...
});
manage.js

นำเข้าบัญชีผู้ใช้

คุณสามารถนำเข้าบัญชีผู้ใช้จากไฟล์ไปยังโปรเจ็กต์ Firebase ได้โดยใช้คำสั่ง auth:import ของ Firebase CLI เช่น

firebase auth:import users.json --hash-algo=scrypt --rounds=8 --mem-cost=14