เอกสารนี้อธิบายแนวทางปฏิบัติที่ดีที่สุดในการใช้การลงชื่อเข้าใช้เปลี่ยนเส้นทางบนเบราว์เซอร์ที่บล็อกคุกกี้ของบุคคลที่สาม คุณต้องปฏิบัติตามตัวเลือกใดตัวเลือกหนึ่งที่แสดงไว้ที่นี่เพื่อให้ 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 เพื่อใช้โดเมนที่กำหนดเองเป็นโดเมนการตรวจสอบสิทธิ์ ให้ทำดังต่อไปนี้:
กำหนดค่า 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>" };
เพิ่ม
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 ("authDomain
โฮสต์โค้ดตัวช่วยการลงชื่อเข้าใช้ที่เปลี่ยนเส้นทางไปยังผู้ให้บริการข้อมูลระบุตัวตน ซึ่งเมื่อสำเร็จ จะเปลี่ยนเส้นทางกลับไปยังโดเมนแอป
เมื่อขั้นตอนการตรวจสอบสิทธิ์กลับสู่โดเมนแอปของคุณ จะมีการเข้าถึงที่เก็บข้อมูลเบราว์เซอร์ของโดเมนตัวช่วยการลงชื่อเข้าใช้ ตัวเลือกนี้และตัวเลือกต่อไปนี้ (เพื่อโฮสต์โค้ดด้วยตนเอง) จะกำจัดการเข้าถึงที่เก็บข้อมูลข้ามต้นทาง ซึ่งมิฉะนั้นจะถูกบล็อกโดยเบราว์เซอร์
ตั้งค่าพร็อกซีย้อนกลับบนเซิร์ฟเวอร์แอปของคุณเพื่อให้คำขอ 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; }
ทำตามขั้นตอนใน ตัวเลือกที่ 1 เพื่ออัปเดต
redirect_uri
ที่ได้รับอนุญาต, ACS URL และauthDomain
ของคุณ เมื่อคุณปรับใช้แอปของคุณอีกครั้ง การเข้าถึงพื้นที่เก็บข้อมูลแบบข้ามต้นทางไม่ควรเกิดขึ้นอีกต่อไป
ตัวเลือกที่ 4: โฮสต์รหัสตัวช่วยลงชื่อเข้าใช้ในโดเมนของคุณด้วยตนเอง
อีกวิธีหนึ่งในการกำจัดการเข้าถึงพื้นที่เก็บข้อมูลแบบข้ามต้นทางคือการโฮสต์โค้ดตัวช่วยลงชื่อเข้าใช้ Firebase ด้วยตนเอง อย่างไรก็ตาม วิธีการนี้ใช้ไม่ได้กับการลงชื่อเข้าใช้ Apple หรือ SAML ใช้ตัวเลือกนี้เฉพาะในกรณีที่การตั้งค่าพร็อกซีย้อนกลับในตัวเลือก 3 ไม่สามารถทำได้
การโฮสต์โค้ดตัวช่วยมีขั้นตอนดังต่อไปนี้:
ดาวน์โหลดไฟล์ไปยังโฮสต์จากตำแหน่ง
<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
โฮสต์ไฟล์ข้างต้นภายใต้โดเมนแอปของคุณ ตรวจสอบให้แน่ใจว่าเว็บเซิร์ฟเวอร์ของคุณสามารถตอบสนองต่อ
https://<app domain>/__/auth/<filename>
นี่คือ ตัวอย่างการใช้งานเซิร์ฟเวอร์ ที่ดาวน์โหลดและโฮสต์ไฟล์ เราขอแนะนำให้ดาวน์โหลดและซิงค์ไฟล์เป็นระยะเพื่อให้แน่ใจว่ามีการแก้ไขข้อบกพร่องและฟีเจอร์ล่าสุด
ทำตามขั้นตอนใน ตัวเลือกที่ 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 อยู่ ที่นี่