หากคุณได้อัปเกรดเป็นการตรวจสอบสิทธิ์ Firebase ด้วย Identity Platform คุณจะตรวจสอบสิทธิ์ผู้ใช้ด้วย Firebase ได้โดยใช้ผู้ให้บริการที่สอดคล้องกับ OpenID Connect (OIDC) ตามที่คุณต้องการ ซึ่งทำให้สามารถใช้ผู้ให้บริการข้อมูลประจำตัวที่ Firebase ไม่รองรับโดยกำเนิด
ก่อนจะเริ่ม
ในการลงชื่อเข้าใช้ผู้ใช้โดยใช้ผู้ให้บริการ OIDC คุณต้องรวบรวมข้อมูลบางอย่างจากผู้ให้บริการก่อน:
รหัสลูกค้า : สตริงเฉพาะสำหรับผู้ให้บริการที่ระบุแอปของคุณ ผู้ให้บริการของคุณอาจกำหนดรหัสลูกค้าที่แตกต่างกันให้กับแต่ละแพลตฟอร์มที่คุณสนับสนุน นี่เป็นหนึ่งในค่าของการเรียกร้อง
aud
ในโทเค็น ID ที่ออกโดยผู้ให้บริการของคุณความลับไคลเอ็นต์ : สตริงลับที่ผู้ให้บริการใช้เพื่อยืนยันความเป็นเจ้าของ ID ไคลเอ็นต์ สำหรับรหัสลูกค้าทุกรหัส คุณจะต้องมีรหัสลับไคลเอ็นต์ที่ตรงกัน (ค่านี้จำเป็นเฉพาะเมื่อคุณใช้ auth code flow ซึ่งแนะนำเป็นอย่างยิ่ง)
ผู้ออก : สตริงที่ระบุผู้ให้บริการของคุณ ค่านี้ต้องเป็น URL ที่เมื่อต่อท้ายด้วย
/.well-known/openid-configuration
เป็นตำแหน่งของเอกสารการค้นพบ OIDC ของผู้ให้บริการ ตัวอย่างเช่น หากผู้ออกคือhttps://auth.example.com
เอกสารการค้นพบจะต้องอยู่ที่https://auth.example.com/.well-known/openid-configuration
หลังจากที่คุณมีข้อมูลข้างต้นแล้ว ให้เปิดใช้งาน OpenID Connect เป็นผู้ให้บริการลงชื่อเข้าใช้สำหรับโปรเจ็กต์ Firebase ของคุณ:
หากคุณยังไม่ได้อัปเกรดเป็น Firebase Authentication ด้วย Identity Platform ให้ดำเนินการดังกล่าว การตรวจสอบสิทธิ์ OpenID Connect ใช้ได้เฉพาะในโปรเจ็กต์ที่อัปเกรดแล้ว
ในหน้า ผู้ให้บริการการลงชื่อเข้าใช้ ของคอนโซล Firebase ให้คลิก เพิ่มผู้ให้บริการใหม่ จากนั้นคลิก OpenID Connect
เลือกว่าคุณจะใช้โฟล ว์รหัสการ ให้สิทธิ์หรือโฟลว์การให้สิทธิ์โดยนัย
คุณควรใช้โฟลว์โค้ดเสมอหากผู้ให้บริการของคุณรองรับ การไหลโดยปริยายมีความปลอดภัยน้อยกว่าและไม่แนะนำให้ใช้
ตั้งชื่อให้กับผู้ให้บริการรายนี้ หมายเหตุ ID ผู้ให้บริการที่สร้างขึ้น: บางอย่างเช่น
oidc.example-provider
คุณจะต้องใช้รหัสนี้เมื่อเพิ่มรหัสลงชื่อเข้าใช้ในแอประบุรหัสลูกค้าและข้อมูลลับของลูกค้า และสตริงผู้ออกของผู้ให้บริการของคุณ ค่าเหล่านี้ต้องตรงกับค่าที่ผู้ให้บริการของคุณกำหนดให้คุณทุกประการ
บันทึกการเปลี่ยนแปลงของคุณ
จัดการขั้นตอนการลงชื่อเข้าใช้ด้วย Firebase SDK
วิธีที่ง่ายที่สุดในการตรวจสอบสิทธิ์ผู้ใช้ด้วย Firebase โดยใช้ผู้ให้บริการ OIDC คือการจัดการขั้นตอนการลงชื่อเข้าใช้ทั้งหมดด้วย Firebase SDK
หากต้องการจัดการขั้นตอนการลงชื่อเข้าใช้ด้วย Firebase JavaScript SDK ให้ทำตามขั้นตอนเหล่านี้:
สร้างอินสแตนซ์ของ
OAuthProvider
โดยใช้ ID ผู้ให้บริการที่คุณได้รับในคอนโซล FirebaseWeb version 9
import { OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('oidc.example-provider');
Web version 8
var provider = new firebase.auth.OAuthProvider('oidc.example-provider');
ไม่บังคับ : ระบุพารามิเตอร์ OAuth ที่กำหนดเองเพิ่มเติมที่คุณต้องการส่งด้วยคำขอ OAuth
Web version 9
provider.setCustomParameters({ // Target specific email with login hint. login_hint: 'user@example.com' });
Web version 8
provider.setCustomParameters({ // Target specific email with login hint. login_hint: 'user@example.com' });
ตรวจสอบกับผู้ให้บริการของคุณสำหรับพารามิเตอร์ที่รองรับ โปรดทราบว่าคุณไม่สามารถส่งผ่านพารามิเตอร์ที่ต้องใช้ Firebase ด้วย
setCustomParameters
พารามิเตอร์เหล่านี้ ได้แก่client_id
,response_type
,redirect_uri
,state
,scope
และresponse_mode
ไม่บังคับ : ระบุขอบเขต OAuth 2.0 เพิ่มเติมนอกเหนือจากโปรไฟล์พื้นฐานที่คุณต้องการขอจากผู้ให้บริการตรวจสอบสิทธิ์
Web version 9
provider.addScope('mail.read'); provider.addScope('calendars.read');
Web version 8
provider.addScope('mail.read'); provider.addScope('calendars.read');
ตรวจสอบกับผู้ให้บริการของคุณสำหรับขอบเขตที่รองรับ
ตรวจสอบสิทธิ์กับ Firebase โดยใช้วัตถุผู้ให้บริการ OAuth
คุณสามารถเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าลงชื่อเข้าใช้ของผู้ให้บริการหรือเปิดหน้าลงชื่อเข้าใช้ในหน้าต่างเบราว์เซอร์ป๊อปอัป
โฟลว์การเปลี่ยนเส้นทาง
เปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ของผู้ให้บริการโดยเรียก
signInWithRedirect()
:Web version 9
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Web version 8
firebase.auth().signInWithRedirect(provider);
หลังจากที่ผู้ใช้ลงชื่อเข้าใช้เสร็จแล้วและกลับมาที่แอปของคุณ คุณสามารถรับผลการลงชื่อเข้าใช้ได้โดยเรียก
getRedirectResult()
Web version 9
import { getAuth, getRedirectResult, OAuthProvider } from "firebase/auth"; const auth = getAuth(); getRedirectResult(auth) .then((result) => { // User is signed in. // IdP data available in result.additionalUserInfo.profile. // Get the OAuth access token and ID Token const credential = OAuthProvider.credentialFromResult(result); const accessToken = credential.accessToken; const idToken = credential.idToken; }) .catch((error) => { // Handle error. });
Web version 8
firebase.auth().getRedirectResult() .then((result) => { // IdP data available in result.additionalUserInfo.profile. // ... /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // OAuth access and id tokens can also be retrieved: var accessToken = credential.accessToken; var idToken = credential.idToken; }) .catch((error) => { // Handle error. });
ป๊อปอัปโฟลว์
Web version 9
import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth"; const auth = getAuth(); signInWithPopup(auth, provider) .then((result) => { // User is signed in. // IdP data available using getAdditionalUserInfo(result) // Get the OAuth access token and ID Token const credential = OAuthProvider.credentialFromResult(result); const accessToken = credential.accessToken; const idToken = credential.idToken; }) .catch((error) => { // Handle error. });
Web version 8
firebase.auth().signInWithPopup(provider) .then((result) => { // IdP data available in result.additionalUserInfo.profile. // ... /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // OAuth access and id tokens can also be retrieved: var accessToken = credential.accessToken; var idToken = credential.idToken; }) .catch((error) => { // Handle error. });
ในขณะที่ตัวอย่างข้างต้นเน้นที่ขั้นตอนการลงชื่อเข้าใช้ คุณสามารถใช้รูปแบบเดียวกันเพื่อเชื่อมโยงผู้ให้บริการ OIDC กับผู้ใช้ที่มีอยู่โดยใช้
linkWithRedirect()
และlinkWithPopup()
และรับรองความถูกต้องผู้ใช้อีกครั้งด้วยreauthenticateWithRedirect()
และreauthenticateWithPopup()
ซึ่งสามารถใช้เพื่อดึงข้อมูลรับรองใหม่สำหรับการดำเนินการที่มีความละเอียดอ่อนซึ่งต้องเข้าสู่ระบบล่าสุด
จัดการขั้นตอนการลงชื่อเข้าใช้ด้วยตนเอง
หากคุณได้ใช้ขั้นตอนการลงชื่อเข้าใช้ OpenID Connect ในแอปแล้ว คุณสามารถใช้โทเค็น ID เพื่อตรวจสอบสิทธิ์กับ Firebase ได้โดยตรง:
Web version 9
import { getAuth, signInWithCredential, OAuthProvider } from "firebase/auth";
const provider = new OAuthProvider("oidc.example-provider");
const credential = provider.credential({
idToken: idToken,
});
signInWithCredential(getAuth(), credential)
.then((result) => {
// User is signed in.
// IdP data available in result.additionalUserInfo.profile.
// Get the OAuth access token and ID Token
const credential = OAuthProvider.credentialFromResult(result);
const accessToken = credential.accessToken;
const idToken = credential.idToken;
})
.catch((error) => {
// Handle error.
});
Web version 8
const provider = new OAuthProvider("oidc.example-provider");
const credential = provider.credential({
idToken: idToken,
});
firebase.auth().signInWithCredential(credential)
.then((result) => {
// User is signed in.
// IdP data available in result.additionalUserInfo.profile.
// Get the OAuth access token and ID Token
const credential = OAuthProvider.credentialFromResult(result);
const accessToken = credential.accessToken;
const idToken = credential.idToken;
})
.catch((error) => {
// Handle error.
});