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

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

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

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

ก่อนจะเริ่ม

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

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

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

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

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

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

      เว็บรุ่น 9

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

      เว็บรุ่น8

      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. ส่งลิงก์การตรวจสอบสิทธิ์ไปยังอีเมลของผู้ใช้ และบันทึกอีเมลของผู้ใช้ในกรณีที่ผู้ใช้ลงชื่อเข้าใช้อีเมลในอุปกรณ์เครื่องเดียวกันจนเสร็จสมบูรณ์

    เว็บรุ่น 9

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

    เว็บรุ่น8

    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 ด้วยอีเมลของผู้ใช้และการเชื่อมโยงอีเมลจริงที่มีรหัสเพียงครั้งเดียว

เว็บรุ่น 9

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

เว็บรุ่น8

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

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

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

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

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

เว็บรุ่น 9

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

เว็บรุ่น8

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

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

เว็บรุ่น 9

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

เว็บรุ่น8

// 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 ของผู้ใช้

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

เว็บรุ่น 9

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

// After asking the user for their email.
const email = window.prompt('Please provide your email');

const auth = getAuth();
fetchSignInMethodsForEmail(auth, email)
  .then((signInMethods) => {
    // This returns the same array as fetchProvidersForEmail but for email
    // provider identified by 'password' string, signInMethods would contain 2
    // different strings:
    // 'emailLink' if the user previously signed in with an email/link
    // 'password' if the user has a password.
    // A user could have both.
    if (signInMethods.indexOf(EmailAuthProvider.EMAIL_PASSWORD_SIGN_IN_METHOD) != -1) {
      // User can sign in with email/password.
    }
    if (signInMethods.indexOf(EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD) != -1) {
      // User can sign in with email/link.
    }
  })
  .catch((error) => {
    // Some error occurred, you can inspect the code: error.code
  });

เว็บรุ่น8

// After asking the user for their email.
var email = window.prompt('Please provide your email');
firebase.auth().fetchSignInMethodsForEmail(email)
  .then((signInMethods) => {
    // This returns the same array as fetchProvidersForEmail but for email
    // provider identified by 'password' string, signInMethods would contain 2
    // different strings:
    // 'emailLink' if the user previously signed in with an email/link
    // 'password' if the user has a password.
    // A user could have both.
    if (signInMethods.indexOf(
            firebase.auth.EmailAuthProvider.EMAIL_PASSWORD_SIGN_IN_METHOD) != -1) {
      // User can sign in with email/password.
    }
    if (signInMethods.indexOf(
            firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD) != -1) {
      // User can sign in with email/link.
    }
  })
  .catch((error) => {
    // Some error occurred, you can inspect the code: error.code
  });

ตามที่อธิบายไว้ข้างต้นอีเมล์ / รหัสผ่านและอีเมล์ลิงค์ / ได้รับการพิจารณาเดียวกัน firebase.auth.EmailAuthProvider (เช่นเดียว PROVIDER_ID ) ด้วยวิธีการที่แตกต่างกันของการลงชื่อเข้าใช้

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

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

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

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

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

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

เว็บรุ่น 9

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

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

เว็บรุ่น8

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