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

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

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

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

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

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

เปิดใช้การลงชื่อเข้าใช้ลิงก์อีเมลสำหรับโครงการ Firebase ของคุณ

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

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

ส่งลิงค์รับรองความถูกต้องไปยังที่อยู่อีเมลของผู้ใช้

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

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

   • url : ลิงก์ในรายละเอียดสำหรับฝังและสถานะเพิ่มเติมที่จะส่งต่อไป ต้องเพิ่มโดเมนของลิงก์ในรายการโดเมนที่ได้รับอนุญาตของ Firebase Console ซึ่งสามารถพบได้โดยไปที่แท็บวิธีการลงชื่อเข้าใช้ (วิธีการตรวจสอบสิทธิ์ -> การลงชื่อเข้าใช้)
   • android และ ios : แอปที่จะใช้เมื่อเปิดลิงก์ลงชื่อเข้าใช้บนอุปกรณ์ Android หรือ iOS เรียนรู้เพิ่มเติมเกี่ยวกับวิธี กำหนดค่าลิงก์แบบไดนามิกของ Firebase เพื่อเปิดลิงก์การดำเนินการทางอีเมลผ่านแอปบนอุปกรณ์เคลื่อนที่
   • handleCodeInApp : ตั้งค่าเป็น true การดำเนินการลงชื่อเข้าใช้จะต้องเสร็จสมบูรณ์ในแอปเสมอซึ่งแตกต่างจากการดำเนินการอีเมลนอกวง (การรีเซ็ตรหัสผ่านและการยืนยันอีเมล) เนื่องจากในตอนท้ายของขั้นตอนผู้ใช้คาดว่าจะลงชื่อเข้าใช้และสถานะการตรวจสอบสิทธิ์ยังคงอยู่ภายในแอป

   • dynamicLinkDomain : เมื่อมีการกำหนดโดเมนลิงก์แบบไดนามิกที่กำหนดเองหลายโดเมนสำหรับโปรเจ็กต์ให้ระบุโดเมนที่จะใช้เมื่อลิงก์ถูกเปิดผ่านแอพมือถือที่ระบุ (ตัวอย่างเช่น example.page.link ) มิฉะนั้นโดเมนแรกจะถูกเลือกโดยอัตโนมัติ

     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'
     };
     email-link-auth.js

   หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ ActionCodeSettings โปรดดูส่วน Passing State ใน Email Actions

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

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

   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;
       // ...
     });
   email-link-auth.js

ลงชื่อเข้าใช้ให้เสร็จสมบูรณ์ด้วยลิงก์อีเมล

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

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

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

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

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

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

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

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

// 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.
    });
}
email-link-auth.js

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

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

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

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

การเชื่อมโยง / การตรวจสอบสิทธิ์อีกครั้งด้วยลิงก์อีเมล

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

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

// 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.
  });
email-link-auth.js

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

// 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.
  });
email-link-auth.js

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

การแยกอีเมล / รหัสผ่านจากลิงก์อีเมล

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

// 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
  });
email-link-auth.js

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

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

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

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

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

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

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

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