ตรวจสอบสิทธิ์กับ Firebase โดยใช้ลิงก์อีเมลใน JavaScript

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

การลงชื่อเข้าใช้ทางอีเมลมีประโยชน์มากมาย:

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

ก่อนที่คุณจะเริ่ม

หากคุณยังไม่ได้คัดลอกข้อมูลโค้ดการเริ่มต้นจาก คอนโซล Firebase ไปยังโปรเจ็กต์ของคุณตามที่อธิบายไว้ใน เพิ่ม Firebase ไปยังโปรเจ็กต์ JavaScript ของคุณ

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

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

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

  1. สร้างออบเจ็กต์ ActionCodeSettings ซึ่งให้คำแนะนำเกี่ยวกับวิธีสร้างลิงก์อีเมลแก่ Firebase ตั้งค่าฟิลด์ต่อไปนี้:

    • url : ลิงก์ในรายละเอียดที่จะฝังและสถานะเพิ่มเติมใดๆ ที่จะส่งต่อ ต้องเพิ่มโดเมนของลิงก์ในรายการคอนโซล Firebase ของโดเมนที่ได้รับอนุญาต ซึ่งสามารถพบได้โดยไปที่แท็บวิธีการลงชื่อเข้าใช้ (การรับรองความถูกต้อง -> การตั้งค่า)
    • android และ ios : แอปที่จะใช้เมื่อเปิดลิงก์ลงชื่อเข้าใช้บนอุปกรณ์ Android หรือ Apple เรียนรู้เพิ่มเติมเกี่ยวกับวิธี กำหนดค่า Firebase Dynamic Links เพื่อเปิดลิงก์การดำเนินการอีเมลผ่านแอปมือถือ
    • handleCodeInApp : ตั้งค่าเป็นจริง การลงชื่อเข้าใช้จะต้องเสร็จสิ้นในแอปเสมอ ไม่เหมือนกับการดำเนินการอีเมลนอกกลุ่มอื่นๆ (การรีเซ็ตรหัสผ่านและการยืนยันอีเมล) เนื่องจากในตอนท้ายของโฟลว์ ผู้ใช้จะต้องลงชื่อเข้าใช้และสถานะการรับรองความถูกต้องยังคงอยู่ในแอป
    • dynamicLinkDomain : เมื่อมีการกำหนดโดเมนลิงก์ไดนามิกแบบกำหนดเองหลายโดเมนสำหรับโปรเจ็กต์ ให้ระบุว่าจะใช้โดเมนใดเมื่อจะเปิดลิงก์ผ่านแอปมือถือที่ระบุ (เช่น example.page.link ) มิฉะนั้น โดเมนแรกจะถูกเลือกโดยอัตโนมัติ

      Web modular API

      const actionCodeSettings = {
        // URL you want to redirect back to. The domain (www.example.com) for this
        // URL must be in the authorized domains list in the Firebase Console.
        url: 'https://www.example.com/finishSignUp?cartId=1234',
        // This must be true.
        handleCodeInApp: true,
        iOS: {
          bundleId: 'com.example.ios'
        },
        android: {
          packageName: 'com.example.android',
          installApp: true,
          minimumVersion: '12'
        },
        dynamicLinkDomain: 'example.page.link'
      };

      Web namespaced API

      var actionCodeSettings = {
        // URL you want to redirect back to. The domain (www.example.com) for this
        // URL must be in the authorized domains list in the Firebase Console.
        url: 'https://www.example.com/finishSignUp?cartId=1234',
        // This must be true.
        handleCodeInApp: true,
        iOS: {
          bundleId: 'com.example.ios'
        },
        android: {
          packageName: 'com.example.android',
          installApp: true,
          minimumVersion: '12'
        },
        dynamicLinkDomain: 'example.page.link'
      };

    หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ ActionCodeSettings โปรดดูส่วน สถานะการส่งผ่านในการดำเนินการกับอีเมล

  2. ขออีเมลจากผู้ใช้

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

    Web modular API

    import { getAuth, sendSignInLinkToEmail } from "firebase/auth";
    
    const auth = getAuth();
    sendSignInLinkToEmail(auth, email, actionCodeSettings)
      .then(() => {
        // The link was successfully sent. Inform the user.
        // Save the email locally so you don't need to ask the user for it again
        // if they open the link on the same device.
        window.localStorage.setItem('emailForSignIn', email);
        // ...
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        // ...
      });

    Web namespaced API

    firebase.auth().sendSignInLinkToEmail(email, actionCodeSettings)
      .then(() => {
        // The link was successfully sent. Inform the user.
        // Save the email locally so you don't need to ask the user for it again
        // if they open the link on the same device.
        window.localStorage.setItem('emailForSignIn', email);
        // ...
      })
      .catch((error) => {
        var errorCode = error.code;
        var errorMessage = error.message;
        // ...
      });

ข้อกังวลด้านความปลอดภัย

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

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

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

ตรวจสอบให้แน่ใจว่าคุณใช้ HTTPS URL ในการใช้งานจริงเพื่อหลีกเลี่ยงไม่ให้เซิร์ฟเวอร์ตัวกลางดักจับลิงก์ของคุณ

เสร็จสิ้นการลงชื่อเข้าใช้ในหน้าเว็บ

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

หากต้องการลงชื่อเข้าใช้ให้เสร็จสมบูรณ์บนหน้า Landing Page ให้โทรหา signInWithEmailLink พร้อมอีเมลของผู้ใช้และลิงก์อีเมลจริงที่มีรหัสแบบใช้ครั้งเดียว

Web modular API

import { getAuth, isSignInWithEmailLink, signInWithEmailLink } from "firebase/auth";

// Confirm the link is a sign-in with email link.
const auth = getAuth();
if (isSignInWithEmailLink(auth, window.location.href)) {
  // Additional state parameters can also be passed via URL.
  // This can be used to continue the user's intended action before triggering
  // the sign-in operation.
  // Get the email if available. This should be available if the user completes
  // the flow on the same device where they started it.
  let email = window.localStorage.getItem('emailForSignIn');
  if (!email) {
    // User opened the link on a different device. To prevent session fixation
    // attacks, ask the user to provide the associated email again. For example:
    email = window.prompt('Please provide your email for confirmation');
  }
  // The client SDK will parse the code from the link for you.
  signInWithEmailLink(auth, email, window.location.href)
    .then((result) => {
      // Clear email from storage.
      window.localStorage.removeItem('emailForSignIn');
      // You can access the new user via result.user
      // Additional user info profile not available via:
      // result.additionalUserInfo.profile == null
      // You can check if the user is new or existing:
      // result.additionalUserInfo.isNewUser
    })
    .catch((error) => {
      // Some error occurred, you can inspect the code: error.code
      // Common errors could be invalid email and invalid or expired OTPs.
    });
}

Web namespaced API

// Confirm the link is a sign-in with email link.
if (firebase.auth().isSignInWithEmailLink(window.location.href)) {
  // Additional state parameters can also be passed via URL.
  // This can be used to continue the user's intended action before triggering
  // the sign-in operation.
  // Get the email if available. This should be available if the user completes
  // the flow on the same device where they started it.
  var email = window.localStorage.getItem('emailForSignIn');
  if (!email) {
    // User opened the link on a different device. To prevent session fixation
    // attacks, ask the user to provide the associated email again. For example:
    email = window.prompt('Please provide your email for confirmation');
  }
  // The client SDK will parse the code from the link for you.
  firebase.auth().signInWithEmailLink(email, window.location.href)
    .then((result) => {
      // Clear email from storage.
      window.localStorage.removeItem('emailForSignIn');
      // You can access the new user via result.user
      // Additional user info profile not available via:
      // result.additionalUserInfo.profile == null
      // You can check if the user is new or existing:
      // result.additionalUserInfo.isNewUser
    })
    .catch((error) => {
      // Some error occurred, you can inspect the code: error.code
      // Common errors could be invalid email and invalid or expired OTPs.
    });
}

ลงชื่อเข้าใช้แอปมือถือให้เสร็จสิ้น

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

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับวิธีจัดการการลงชื่อเข้าใช้ด้วยลิงก์อีเมลในแอปพลิเคชัน Android โปรดดู คู่มือ Android

หากต้องการเรียนรู้วิธีเพิ่มเติมเกี่ยวกับวิธีจัดการการลงชื่อเข้าใช้ด้วยลิงก์อีเมลในแอปพลิเคชันของ Apple โปรดดู คู่มือแพลตฟอร์มของ Apple

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

ความแตกต่างจะอยู่ในช่วงครึ่งหลังของการดำเนินการ:

Web modular API

import { getAuth, linkWithCredential, EmailAuthProvider } from "firebase/auth";

// Construct the email link credential from the current URL.
const credential = EmailAuthProvider.credentialWithLink(
  email, window.location.href);

// Link the credential to the current user.
const auth = getAuth();
linkWithCredential(auth.currentUser, credential)
  .then((usercred) => {
    // The provider is now successfully linked.
    // The phone user can now sign in with their phone number or email.
  })
  .catch((error) => {
    // Some error occurred.
  });

Web namespaced API

// Construct the email link credential from the current URL.
var credential = firebase.auth.EmailAuthProvider.credentialWithLink(
  email, window.location.href);

// Link the credential to the current user.
firebase.auth().currentUser.linkWithCredential(credential)
  .then((usercred) => {
    // The provider is now successfully linked.
    // The phone user can now sign in with their phone number or email.
  })
  .catch((error) => {
    // Some error occurred.
  });

นอกจากนี้ยังสามารถใช้เพื่อตรวจสอบสิทธิ์ผู้ใช้ลิงก์อีเมลอีกครั้งก่อนที่จะดำเนินการที่ละเอียดอ่อน

Web modular API

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

// Construct the email link credential from the current URL.
const credential = EmailAuthProvider.credentialWithLink(
  email, window.location.href);

// Re-authenticate the user with this credential.
const auth = getAuth();
reauthenticateWithCredential(auth.currentUser, credential)
  .then((usercred) => {
    // The user is now successfully re-authenticated and can execute sensitive
    // operations.
  })
  .catch((error) => {
    // Some error occurred.
  });

Web namespaced API

// Construct the email link credential from the current URL.
var credential = firebase.auth.EmailAuthProvider.credentialWithLink(
  email, window.location.href);

// Re-authenticate the user with this credential.
firebase.auth().currentUser.reauthenticateWithCredential(credential)
  .then((usercred) => {
    // The user is now successfully re-authenticated and can execute sensitive
    // operations.
  })
  .catch((error) => {
    // Some error occurred.
  });

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

หากคุณสร้างโปรเจ็กต์ในหรือหลังวันที่ 15 กันยายน 2023 การป้องกันการแจงนับอีเมลจะถูกเปิดใช้งานตามค่าเริ่มต้น ฟีเจอร์นี้ปรับปรุงการรักษาความปลอดภัยของบัญชีผู้ใช้โปรเจ็กต์ของคุณ แต่จะปิดใช้เมธอด fetchSignInMethodsForEmail() ซึ่งก่อนหน้านี้เราแนะนำให้ใช้โฟลว์ที่เน้นตัวระบุเป็นหลัก

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

ดูเอกสารประกอบเกี่ยวกับ การป้องกันการแจงนับอีเมล สำหรับรายละเอียดเพิ่มเติม

เทมเพลตอีเมลเริ่มต้นสำหรับการลงชื่อเข้าใช้ลิงก์

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

เทมเพลตนี้ใช้กับภาษาต่อไปนี้:

รหัส ภาษา
อาร์ ภาษาอาหรับ
zh-CN จีน (ตัวย่อ)
zh-TW จีน (ตัวเต็ม)
ไม่มี ภาษาดัตช์
ห้องน้ำในตัว ภาษาอังกฤษ
en-GB อังกฤษ (สหราชอาณาจักร)
ภาษาฝรั่งเศส
เดอ เยอรมัน
รหัส ชาวอินโดนีเซีย
มัน ภาษาอิตาลี
ใช่แล้ว ญี่ปุ่น
เกาะ เกาหลี
กรุณา ขัด
พีที-บีอาร์ โปรตุเกส (บราซิล)
พีที-พีที โปรตุเกส (โปรตุเกส)
รุ ภาษารัสเซีย
เช่น สเปน
เอส-419 สเปน (ละตินอเมริกา)
ไทย แบบไทย

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

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

  • ในแอปของคุณ วิธีที่แนะนำในการทราบสถานะการตรวจสอบสิทธิ์ของผู้ใช้คือการตั้งค่าผู้สังเกตการณ์บนออบเจ็ Auth จากนั้น คุณสามารถรับข้อมูลโปรไฟล์พื้นฐานของผู้ใช้ได้จากออบเจ็กต์ User ดู จัดการผู้ใช้

  • ในฐานข้อมูลเรียลไทม์ Firebase และ กฎความปลอดภัยของ พื้นที่เก็บข้อมูลบนคลาวด์ คุณสามารถรับ ID ผู้ใช้เฉพาะของผู้ใช้ที่ลงชื่อเข้าใช้จากตัวแปร auth และใช้เพื่อควบคุมข้อมูลที่ผู้ใช้สามารถเข้าถึงได้

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

หากต้องการออกจากระบบผู้ใช้ ให้โทร signOut :

Web modular API

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

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

Web namespaced API

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