Firebase is back at Google I/O on May 10! Register now

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

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

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

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

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

ก่อนจะเริ่ม

  1. หากคุณยังไม่ได้ดำเนินการ ให้ทำตามขั้นตอนในคู่มือ เริ่มต้น ใช้งาน

  2. เปิดใช้การลงชื่อเข้าใช้ลิงก์อีเมลสำหรับโปรเจ็กต์ Firebase

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

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

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

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

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

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

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

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

    var acs = ActionCodeSettings(
        // URL you want to redirect back to. The domain (www.example.com) for this
        // URL must be whitelisted in the Firebase Console.
        url: 'https://www.example.com/finishSignUp?cartId=1234',
        // This must be true
        handleCodeInApp: true,
        iOSBundleId: 'com.example.ios',
        androidPackageName: 'com.example.android',
        // installIfNotAvailable
        androidInstallApp: true,
        // minimumVersion
        androidMinimumVersion: '12');
    
  2. ขออีเมลจากผู้ใช้

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

    var emailAuth = 'someemail@domain.com';
    FirebaseAuth.instance.sendSignInLinkToEmail(
            email: emailAuth, actionCodeSettings: acs)
        .catchError((onError) => print('Error sending email verification $onError'))
        .then((value) => print('Successfully sent email verification'));
    });
    

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

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

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

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

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

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

  1. ตั้งค่าแอปของคุณเพื่อรับ Dynamic Links บน Flutter ใน คู่มือ

  2. ในตัวจัดการลิงก์ ให้ตรวจสอบว่าลิงก์มีไว้สำหรับการตรวจสอบลิงก์อีเมลหรือไม่ และหากใช่ ให้ทำตามขั้นตอนการลงชื่อเข้าใช้ให้เสร็จสิ้น

    // Confirm the link is a sign-in with email link.
    if (FirebaseAuth.instance.isSignInWithEmailLink(emailLink)) {
      try {
        // The client SDK will parse the code from the link for you.
        final userCredential = await FirebaseAuth.instance
            .signInWithEmailLink(email: emailAuth, emailLink: emailLink);
    
        // You can access the new user via userCredential.user.
        final emailAddress = userCredential.user?.email;
    
        print('Successfully signed in with email link!');
      } catch (error) {
        print('Error signing in with email link.');
      }
    }
    

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

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

final authCredential = EmailAuthProvider
    .credentialWithLink(email: emailAuth, emailLink: emailLink.toString());
try {
    await FirebaseAuth.instance.currentUser
        ?.linkWithCredential(authCredential);
} catch (error) {
    print("Error linking emailLink credential.");
}

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

final authCredential = EmailAuthProvider
    .credentialWithLink(email: emailAuth, emailLink: emailLink.toString());
try {
    await FirebaseAuth.instance.currentUser
        ?.reauthenticateWithCredential(authCredential);
} catch (error) {
    print("Error reauthenticating credential.");
}

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

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

try {
    final signInMethods =
        await FirebaseAuth.instance.fetchSignInMethodsForEmail(emailAuth);
    final userExists = signInMethods.isNotEmpty;
    final canSignInWithLink = signInMethods
        .contains(EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD);
    final canSignInWithPassword = signInMethods
        .contains(EmailAuthProvider.EMAIL_PASSWORD_SIGN_IN_METHOD);
} on FirebaseAuthException catch (exception) {
    switch (exception.code) {
        case "invalid-email":
            print("Not a valid email address.");
            break;
        default:
            print("Unknown error.");
    }
}

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

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

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

ในแอพของคุณ คุณสามารถรับข้อมูลโปรไฟล์พื้นฐานของผู้ใช้จากออบเจ็กต์ User ดู จัดการผู้ใช้

ในฐานข้อมูล Firebase Realtime Database และ Cloud Storage Security Rules คุณสามารถรับ ID ผู้ใช้เฉพาะของผู้ใช้ที่ลงชื่อเข้าใช้จากตัวแปร auth และใช้เพื่อควบคุมข้อมูลที่ผู้ใช้สามารถเข้าถึงได้

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

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

await FirebaseAuth.instance.signOut();