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

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

ภาพรวม

หากต้องการทำให้ ขั้นตอน signInWithRedirect() ที่ราบรื่นสำหรับคุณและผู้ใช้ การตรวจสอบสิทธิ์ Firebase SDK SDK ใช้ 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 ใหม่ลงในรายการที่ได้รับอนุญาตของผู้ให้บริการ OAuth เปลี่ยนเส้นทาง URI วิธีดำเนินการจะขึ้นอยู่กับผู้ให้บริการ แต่โดยทั่วไป คุณสามารถทำตามลิงก์ "ก่อนเริ่มต้น" ในผู้ให้บริการใดๆ (ตัวอย่างเช่น ผู้ให้บริการ 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 Authentication SDK มี signInWithPopup() และ signInWithRedirect() ในชื่อ วิธีอำนวยความสะดวกในการรวมตรรกะที่ซับซ้อนและไม่จำเป็นต้องมีส่วนร่วม SDK อื่น คุณสามารถหลีกเลี่ยงการใช้วิธีใดวิธีหนึ่งทั้งหมดได้โดยลงนามแยกต่างหาก ไปยังผู้ให้บริการ จากนั้นใช้ 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 ที่นี่