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

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

ภาพรวม

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

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

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

หากคุณโฮสต์แอปด้วย Firebase Hosting โดยใช้โดเมนที่กำหนดเอง คุณสามารถกำหนดค่า 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>"
};

  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 Hosting เพื่อดึงไฟล์การกำหนดค่า 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

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

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

  2. ทำตามขั้นตอนใน ตัวเลือกที่ 1 เพื่ออัปเดต redirect_uri ที่ได้รับอนุญาต, URL ของ ACS และ 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
wget https://<project>.firebaseapp.com/__/auth/links
wget https://<project>.firebaseapp.com/__/auth/links.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 Authentication ตัวอย่างเช่น คุณสามารถใช้ 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 ได้ที่ ที่นี่