หากคุณอัปเกรดเป็น Firebase Authentication ด้วย Identity Platform คุณจะตรวจสอบสิทธิ์ผู้ใช้ด้วย Firebase ได้โดยใช้ผู้ให้บริการที่สอดคล้องกับ OpenID Connect (OIDC) ที่คุณเลือก สิ่งนี้ทำให้สามารถใช้ผู้ให้บริการข้อมูลประจำตัวที่ Firebase ไม่รองรับ
ก่อนที่คุณจะเริ่มต้น
ในการลงชื่อเข้าใช้ผู้ใช้โดยใช้ผู้ให้บริการ OIDC คุณต้องรวบรวมข้อมูลบางอย่างจากผู้ให้บริการก่อน:
รหัสลูกค้า : สตริงเฉพาะของผู้ให้บริการที่ระบุแอปของคุณ ผู้ให้บริการของคุณอาจกำหนดรหัสลูกค้าที่แตกต่างกันสำหรับแต่ละแพลตฟอร์มที่คุณสนับสนุน นี่เป็นหนึ่งในค่าของการ
aud
สิทธิ์ในโทเค็น ID ที่ออกโดยผู้ให้บริการของคุณความลับของลูกค้า : สตริงลับที่ผู้ให้บริการใช้เพื่อยืนยันความเป็นเจ้าของรหัสลูกค้า สำหรับรหัสไคลเอ็นต์ทุกรหัส คุณจะต้องมีรหัสลับไคลเอ็นต์ที่ตรงกัน (ค่านี้จำเป็นต่อเมื่อคุณใช้ โฟลว์รหัสรับรองความถูกต้อง ซึ่งขอแนะนำเป็นอย่างยิ่ง)
ผู้ออก : สตริงที่ระบุผู้ให้บริการของคุณ ค่านี้ต้องเป็น 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
เลือกว่าคุณจะใช้ โฟลว์รหัสการให้สิทธิ์ หรือ โฟลว์การให้สิทธิ์โดยปริยาย
คุณควรใช้โฟลว์ของโค้ดเสมอหากผู้ให้บริการของคุณสนับสนุน โฟลว์โดยปริยายมีความปลอดภัยน้อยกว่าและไม่แนะนำให้ใช้อย่างยิ่ง
ตั้งชื่อให้กับผู้ให้บริการรายนี้ สังเกตรหัสผู้ให้บริการที่สร้างขึ้น: คล้ายกับ
oidc.example-provider
คุณต้องใช้รหัสนี้เมื่อเพิ่มรหัสลงชื่อเข้าใช้ในแอประบุรหัสไคลเอนต์และความลับไคลเอ็นต์ของคุณ และสตริงผู้ออกของผู้ให้บริการของคุณ ค่าเหล่านี้ต้องตรงกับค่าที่ผู้ให้บริการกำหนดให้กับคุณทุกประการ
บันทึกการเปลี่ยนแปลงของคุณ
จัดการขั้นตอนการลงชื่อเข้าใช้ด้วย Firebase SDK
วิธีที่ง่ายที่สุดในการตรวจสอบสิทธิ์ผู้ใช้ด้วย Firebase โดยใช้ผู้ให้บริการ OIDC คือจัดการขั้นตอนการลงชื่อเข้าใช้ทั้งหมดด้วย Firebase SDK
หากต้องการจัดการขั้นตอนการลงชื่อเข้าใช้ด้วย Firebase JavaScript SDK ให้ทำตามขั้นตอนเหล่านี้:
สร้างอินสแตนซ์ของ
OAuthProvider
โดยใช้ ID ผู้ให้บริการที่คุณได้รับในคอนโซล Firebaseเว็บโมดูลาร์ API
import { OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('oidc.example-provider');
API เนมสเปซของเว็บ
var provider = new firebase.auth.OAuthProvider('oidc.example-provider');
ทางเลือก : ระบุพารามิเตอร์ OAuth ที่กำหนดเองเพิ่มเติมที่คุณต้องการส่งพร้อมกับคำขอ OAuth
เว็บโมดูลาร์ API
provider.setCustomParameters({ // Target specific email with login hint. login_hint: 'user@example.com' });
API เนมสเปซของเว็บ
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 เพิ่มเติมนอกเหนือจากโปรไฟล์พื้นฐานที่คุณต้องการร้องขอจากผู้ให้บริการตรวจสอบสิทธิ์
เว็บโมดูลาร์ API
provider.addScope('mail.read'); provider.addScope('calendars.read');
API เนมสเปซของเว็บ
provider.addScope('mail.read'); provider.addScope('calendars.read');
ตรวจสอบกับผู้ให้บริการของคุณสำหรับขอบเขตที่รองรับ
รับรองความถูกต้องกับ Firebase โดยใช้วัตถุผู้ให้บริการ OAuth
คุณสามารถเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าลงชื่อเข้าใช้ของผู้ให้บริการ หรือเปิดหน้าลงชื่อเข้าใช้ในหน้าต่างเบราว์เซอร์ป๊อปอัป
เปลี่ยนเส้นทางการไหล
เปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ของผู้ให้บริการโดยเรียก
signInWithRedirect()
:เว็บโมดูลาร์ API
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
API เนมสเปซของเว็บ
firebase.auth().signInWithRedirect(provider);
หลังจากที่ผู้ใช้ลงชื่อเข้าใช้และกลับมาที่แอปของคุณแล้ว คุณสามารถรับผลการลงชื่อเข้าใช้ได้โดยเรียก
getRedirectResult()
เว็บโมดูลาร์ API
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. });
API เนมสเปซของเว็บ
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. });
โฟลว์ป๊อปอัป
เว็บโมดูลาร์ API
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. });
API เนมสเปซของเว็บ
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:
เว็บโมดูลาร์ API
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.
});
API เนมสเปซของเว็บ
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.
});