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