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

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

ภาพรวม

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

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

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

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

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

หากต้องการอัปเดตการกำหนดค่า 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>"
};

  1. เพิ่ม 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. ตรวจสอบว่า continue_uri อยู่ในรายการโดเมนที่ได้รับอนุญาต

  3. ทำให้ใช้งานได้อีกครั้งกับโฮสติ้งของ Firebase หากจําเป็น เพื่อดึงไฟล์การกำหนดค่า Firebase ล่าสุดที่โฮสต์อยู่ที่ /__/firebase/init.json

ตัวเลือกที่ 2: เปลี่ยนไปใช้ signInWithPopup()

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

Web 

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

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

Web 

  // 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 Redirect ได้

    หากคุณใช้ 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 Sign-In หรือ 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
wget https://<project>.firebaseapp.com/__/firebase/init.json

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

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

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

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

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

Web 

  // `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);

Web 

  // `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 ได้ที่นี่