แนวทางปฏิบัติที่ดีที่สุดสำหรับการใช้ signInWithRedirect บนเบราว์เซอร์ที่บล็อกการเข้าถึงพื้นที่เก็บข้อมูลของบุคคลที่สาม

เอกสารนี้อธิบายแนวทางปฏิบัติที่ดีที่สุดในการใช้การลงชื่อเข้าใช้เปลี่ยนเส้นทางบนเบราว์เซอร์ที่บล็อกคุกกี้ของบุคคลที่สาม คุณต้องปฏิบัติตามตัวเลือกใดตัวเลือกหนึ่งที่แสดงไว้ที่นี่เพื่อให้ signInWithRedirect() ทำงานตามที่ต้องการในสภาพแวดล้อมการใช้งานจริงบนเบราว์เซอร์ทั้งหมด

ภาพรวม

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

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

  • หากคุณโฮสต์แอปของคุณด้วยโฮสติ้งของ Firebase บนโดเมนย่อยของ firebaseapp.com คุณจะไม่ได้รับผลกระทบจากปัญหานี้และไม่จำเป็นต้องดำเนินการใดๆ
  • หากคุณโฮสต์แอปของคุณด้วยโฮสติ้งของ Firebase บนโดเมนที่กำหนดเองหรือโดเมนย่อยของ web.app ให้ใช้ ตัวเลือกที่ 1
  • หากคุณโฮสต์แอปด้วยบริการอื่นที่ไม่ใช่ Firebase ให้ใช้ ตัวเลือก 2 , ตัวเลือก 3 , ตัวเลือก 4 หรือ ตัวเลือก 5

ตัวเลือกที่ 1: อัปเดตการกำหนดค่า Firebase เพื่อใช้โดเมนที่กำหนดเองเป็น authDomain

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

หากต้องการอัปเดตการกำหนดค่า Firebase เพื่อใช้โดเมนที่กำหนดเองเป็นโดเมนการตรวจสอบสิทธิ์ ให้ทำดังต่อไปนี้:

  1. กำหนดค่า Firebase JS SDK เพื่อใช้โดเมนที่คุณกำหนดเองเป็น authDomain :

    const firebaseConfig = {
  apiKey: "<api-key>",
  authDomain: "<the-domain-that-serves-your-app>",
  databaseURL: "<database-url>",
  projectId: "<project-id>",
  appId: "<app-id>"
};

  2. เพิ่ม authDomain ใหม่ลงในรายการ URI การเปลี่ยนเส้นทางที่ได้รับอนุญาตของผู้ให้บริการ OAuth วิธีดำเนินการนี้จะขึ้นอยู่กับผู้ให้บริการ แต่โดยทั่วไปคุณสามารถปฏิบัติตามส่วน "ก่อนเริ่มต้น" ในผู้ให้บริการรายใดก็ได้เพื่อดูคำแนะนำที่ถูกต้อง (เช่น ผู้ให้บริการ Facebook ) URI ที่อัปเดตเพื่อให้สิทธิ์มีลักษณะดังนี้ https://<the-domain-that-serves-your-app>/__/auth/handler — ส่วนท้าย /__/auth/handler มีความสำคัญ

    ในทำนองเดียวกัน หากคุณใช้ผู้ให้บริการ SAML ให้เพิ่ม authDomain ใหม่ลงใน URL ของ SAML Assertion Consumer Service (ACS)

ตัวเลือกที่ 2: สลับไปที่ signInWithPopup()

ใช้ signInWithPopup() แทน signInWithRedirect() โค้ดที่เหลือของแอปยังคงเหมือนเดิม แต่ออบเจ็กต์ UserCredential ได้รับการดึงข้อมูลแตกต่างออกไป

API แบบโมดูลาร์ของเว็บ

  // Before
  // ==============
  signInWithRedirect(auth, new GoogleAuthProvider());
  // After the page redirects back
  const userCred = await getRedirectResult(auth);

  // After
  // ==============
  const userCred = await signInWithPopup(auth, new GoogleAuthProvider());

API เนมสเปซของเว็บ

  // Before
  // ==============
  firebase.auth().signInWithRedirect(new firebase.auth.GoogleAuthProvider());
  // After the page redirects back
  var userCred = await firebase.auth().getRedirectResult();

  // After
  // ==============
  var userCred = await firebase.auth().signInWithPopup(
      new firebase.auth.GoogleAuthProvider());
```

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

ตัวเลือกที่ 3: คำขอตรวจสอบสิทธิ์พร็อกซีไปยัง firebaseapp.com

ขั้นตอน signInWithRedirect เริ่มต้นด้วยการเปลี่ยนเส้นทางจากโดเมนแอปของคุณไปยังโดเมนที่ระบุในพารามิเตอร์ authDomain ในการกำหนดค่า firebase (" .firebaseapp.com" ตามค่าเริ่มต้น) authDomain โฮสต์โค้ดตัวช่วยการลงชื่อเข้าใช้ที่เปลี่ยนเส้นทางไปยังผู้ให้บริการข้อมูลระบุตัวตน ซึ่งเมื่อสำเร็จ จะเปลี่ยนเส้นทางกลับไปยังโดเมนแอป

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

  1. ตั้งค่าพร็อกซีย้อนกลับบนเซิร์ฟเวอร์แอปของคุณเพื่อให้คำขอ GET/POST ไปยัง https://<app domain>/__/auth/ ได้รับการส่งต่อไปยัง https://<project>.firebaseapp.com/__/auth/ ตรวจสอบให้แน่ใจว่าการส่งต่อนี้โปร่งใสต่อเบราว์เซอร์ สิ่งนี้ไม่สามารถทำได้ผ่านการเปลี่ยนเส้นทาง 302

    หากคุณใช้ nginx เพื่อให้บริการโดเมนที่คุณกำหนดเอง การกำหนดค่าพร็อกซีย้อนกลับจะมีลักษณะดังนี้:

    # reverse proxy for signin-helpers for popup/redirect sign in.
location /__/auth {
  proxy_pass https://<project>.firebaseapp.com;
}

  2. ทำตามขั้นตอนใน ตัวเลือกที่ 1 เพื่ออัปเดต redirect_uri ที่ได้รับอนุญาต, ACS URL และ authDomain ของคุณ เมื่อคุณปรับใช้แอปของคุณอีกครั้ง การเข้าถึงพื้นที่เก็บข้อมูลแบบข้ามต้นทางไม่ควรเกิดขึ้นอีกต่อไป

ตัวเลือกที่ 4: โฮสต์รหัสตัวช่วยลงชื่อเข้าใช้ในโดเมนของคุณด้วยตนเอง

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

การโฮสต์โค้ดตัวช่วยมีขั้นตอนดังต่อไปนี้:

  1. ดาวน์โหลดไฟล์ไปยังโฮสต์จากตำแหน่ง <project>.firebaseapp.com โดยดำเนินการคำสั่งต่อไปนี้:

    mkdir signin_helpers/ && cd signin_helpers
wget https://<project>.firebaseapp.com/__/auth/handler
wget https://<project>.firebaseapp.com/__/auth/handler.js
wget https://<project>.firebaseapp.com/__/auth/experiments.js
wget https://<project>.firebaseapp.com/__/auth/iframe
wget https://<project>.firebaseapp.com/__/auth/iframe.js

  2. โฮสต์ไฟล์ข้างต้นภายใต้โดเมนแอปของคุณ ตรวจสอบให้แน่ใจว่าเว็บเซิร์ฟเวอร์ของคุณสามารถตอบสนองต่อ https://<app domain>/__/auth/<filename>

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

  3. ทำตามขั้นตอนใน ตัวเลือกที่ 1 เพื่ออัปเดต redirect_uri ที่ได้รับอนุญาตและ authDomain ของคุณ เมื่อคุณปรับใช้แอปของคุณอีกครั้ง การเข้าถึงพื้นที่เก็บข้อมูลแบบข้ามต้นทางไม่ควรเกิดขึ้นอีกต่อไป

ตัวเลือกที่ 5: จัดการการลงชื่อเข้าใช้ของผู้ให้บริการโดยอิสระ

Firebase Authentication SDK ให้ signInWithPopup() และ signInWithRedirect() เป็นวิธีที่สะดวกในการรวมลอจิกที่ซับซ้อนและหลีกเลี่ยงความจำเป็นในการเกี่ยวข้องกับ SDK อื่น คุณสามารถหลีกเลี่ยงการใช้วิธีใดวิธีหนึ่งโดยสิ้นเชิงได้โดยการลงชื่อเข้าใช้ผู้ให้บริการของคุณโดยอิสระ จากนั้นใช้ signInWithCredential() เพื่อแลกเปลี่ยนข้อมูลประจำตัวของผู้ให้บริการสำหรับข้อมูลรับรอง Firebase Authentication ตัวอย่างเช่น คุณสามารถใช้ Google Sign In SDK ซึ่ง เป็นโค้ดตัวอย่าง เพื่อรับข้อมูลรับรองบัญชี Google จากนั้นสร้างอินสแตนซ์ข้อมูลรับรอง Google ใหม่โดยเรียกใช้โค้ดต่อไปนี้:

API แบบโมดูลาร์ของเว็บ

  // `googleUser` from the onsuccess Google Sign In callback.
  //  googUser = gapi.auth2.getAuthInstance().currentUser.get();
  const credential = GoogleAuthProvider.credential(googleUser.getAuthResponse().id_token);
  const result = await signInWithCredential(auth, credential);

API เนมสเปซของเว็บ

  // `googleUser` from the onsuccess Google Sign In callback.
  const credential = firebase.auth.GoogleAuthProvider.credential(
      googleUser.getAuthResponse().id_token);
  const result = await firebase.auth().signInWithCredential(credential);

หลังจากที่คุณเรียก signInWithCredential() แล้ว แอปที่เหลือจะทำงานเหมือนเดิม

คำแนะนำในการรับข้อมูลรับรอง Apple อยู่ ที่นี่