คุณสามารถใช้การตรวจสอบสิทธิ์ Firebase เพื่อลงชื่อเข้าใช้ผู้ใช้โดยส่งอีเมลที่มีลิงก์ซึ่งพวกเขาสามารถคลิกเพื่อลงชื่อเข้าใช้ได้ในระหว่างนี้ที่อยู่อีเมลของผู้ใช้จะได้รับการยืนยันด้วย
การลงชื่อเข้าใช้ทางอีเมลมีประโยชน์มากมาย:
- การสมัครและลงชื่อเข้าใช้ที่มีแรงเสียดทานต่ำ
- ลดความเสี่ยงในการใช้รหัสผ่านซ้ำในแอปพลิเคชันซึ่งอาจทำลายความปลอดภัยของรหัสผ่านที่เลือกไว้อย่างดี
- ความสามารถในการรับรองความถูกต้องของผู้ใช้ในขณะเดียวกันก็ยืนยันว่าผู้ใช้เป็นเจ้าของที่อยู่อีเมลที่ถูกต้อง
- ผู้ใช้ต้องการเพียงบัญชีอีเมลที่สามารถเข้าถึงได้ในการลงชื่อเข้าใช้ไม่จำเป็นต้องเป็นเจ้าของหมายเลขโทรศัพท์หรือบัญชีโซเชียลมีเดีย
- ผู้ใช้สามารถลงชื่อเข้าใช้ได้อย่างปลอดภัยโดยไม่จำเป็นต้องให้ (หรือจำ) รหัสผ่านซึ่งอาจเป็นเรื่องยุ่งยากในอุปกรณ์เคลื่อนที่
- ผู้ใช้ที่มีอยู่ซึ่งเคยลงชื่อเข้าใช้ด้วยตัวระบุอีเมล (รหัสผ่านหรือแบบรวมศูนย์) สามารถอัปเกรดเพื่อลงชื่อเข้าใช้ด้วยอีเมลเท่านั้น ตัวอย่างเช่นผู้ใช้ที่ลืมรหัสผ่านยังสามารถลงชื่อเข้าใช้ได้โดยไม่จำเป็นต้องรีเซ็ตรหัสผ่าน
ก่อนที่คุณจะเริ่ม
หากคุณยังไม่ได้ทำให้คัดลอกข้อมูลโค้ดการเริ่มต้นจาก คอนโซล Firebase ไปยังโปรเจ็กต์ของคุณตามที่อธิบายไว้ใน เพิ่ม Firebase ไปยังโปรเจ็กต์ JavaScript ของคุณ
เปิดใช้การลงชื่อเข้าใช้ลิงก์อีเมลสำหรับโครงการ Firebase ของคุณ
ในการลงชื่อเข้าใช้ผู้ใช้ด้วยลิงก์อีเมลก่อนอื่นคุณต้องเปิดใช้วิธีลงชื่อเข้าใช้ลิงก์ผู้ให้บริการอีเมลและอีเมลสำหรับโครงการ Firebase ของคุณ:
- ใน คอนโซล Firebase ให้เปิดส่วนการ ตรวจสอบสิทธิ์
- บนแท็บ วิธีการลงชื่อเข้า ใช้ให้เปิดใช้งานผู้ให้บริการ อีเมล / รหัสผ่าน โปรดทราบว่าต้องเปิดใช้งานการลงชื่อเข้าใช้อีเมล / รหัสผ่านเพื่อใช้การลงชื่อเข้าใช้ลิงก์อีเมล
- ในส่วนเดียวกันให้เปิดใช้วิธีการลงชื่อเข้าใช้ ลิงก์อีเมล (การลงชื่อเข้าใช้แบบไม่ใช้รหัสผ่าน)
- คลิก บันทึก
ส่งลิงค์รับรองความถูกต้องไปยังที่อยู่อีเมลของผู้ใช้
ในการเริ่มขั้นตอนการตรวจสอบสิทธิ์ให้นำเสนอผู้ใช้ด้วยอินเทอร์เฟซที่แจ้งให้ผู้ใช้ระบุที่อยู่อีเมลจากนั้นโทรไปที่ sendSignInLinkToEmail
เพื่อขอให้ Firebase ส่งลิงก์การตรวจสอบสิทธิ์ไปยังอีเมลของผู้ใช้
สร้างออบเจ็กต์
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' };
หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ ActionCodeSettings โปรดดูส่วน Passing State ใน Email Actions
-
ขออีเมลจากผู้ใช้
ส่งลิงก์การตรวจสอบสิทธิ์ไปยังอีเมลของผู้ใช้และบันทึกอีเมลของผู้ใช้ในกรณีที่ผู้ใช้ทำการลงชื่อเข้าใช้อีเมลบนอุปกรณ์เดียวกัน
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
ด้วยอีเมลของผู้ใช้และลิงก์อีเมลจริงที่มีรหัสแบบใช้ครั้งเดียว
// 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
หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับวิธีจัดการการลงชื่อเข้าใช้ด้วยลิงก์อีเมลในแอปพลิเคชัน 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. });
นอกจากนี้ยังสามารถใช้เพื่อตรวจสอบสิทธิ์ผู้ใช้ลิงก์อีเมลอีกครั้งก่อนดำเนินการที่ละเอียดอ่อน
// 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
สิ่งนี้มีประโยชน์สำหรับโฟลว์ตัวระบุแรกที่ผู้ใช้ถูกขอให้ระบุอีเมลก่อนจากนั้นจึงนำเสนอวิธีการลงชื่อเข้าใช้:
// 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
ของผู้ใช้ของคุณคือการตั้งค่าผู้สังเกตการณ์บนวัตถุAuth
จากนั้นคุณสามารถรับข้อมูลโปรไฟล์พื้นฐานของผู้ใช้จากวัตถุUser
ดู จัดการผู้ใช้ในฐานข้อมูลเรียลไทม์ Firebase และ กฎความปลอดภัยของที่ เก็บข้อมูลบนคลาวด์คุณสามารถรับ ID ผู้ใช้เฉพาะของผู้ใช้ที่ลงชื่อเข้าใช้จากตัวแปร
auth
และใช้เพื่อควบคุมข้อมูลที่ผู้ใช้เข้าถึงได้
คุณสามารถอนุญาตให้ผู้ใช้ลงชื่อเข้าใช้แอปของคุณโดยใช้ผู้ให้บริการการตรวจสอบสิทธิ์หลายรายโดย เชื่อมโยงข้อมูลรับรองของผู้ให้บริการรับรองความถูกต้องกับบัญชีผู้ใช้ที่มีอยู่
ในการออกจากระบบผู้ใช้โทร signOut
:
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });