คุณสามารถอนุญาตให้ผู้ใช้ตรวจสอบสิทธิ์กับ Firebase โดยใช้ผู้ให้บริการ OAuth เช่น Microsoft Azure Active Directory โดยการผสานรวมการเข้าสู่ระบบ OAuth ทั่วไปเข้ากับแอปโดยใช้ Firebase SDK เพื่อดำเนินการตามขั้นตอนการลงชื่อเข้าใช้ตั้งแต่ต้นจนจบ
ก่อนเริ่มต้น
หากต้องการลงชื่อเข้าใช้ผู้ใช้โดยใช้บัญชี Microsoft (Azure Active Directory และบัญชี Microsoft ส่วนบุคคล) คุณต้องเปิดใช้ Microsoft เป็นผู้ให้บริการลงชื่อเข้าใช้สําหรับโปรเจ็กต์ Firebase ก่อน โดยทำดังนี้
- เพิ่ม Firebase ลงในโปรเจ็กต์ JavaScript
- เปิดส่วน Auth ในคอนโซล Firebase
- ในแท็บวิธีการลงชื่อเข้าใช้ ให้เปิดใช้ผู้ให้บริการ Microsoft
- เพิ่มรหัสไคลเอ็นต์และรหัสลับไคลเอ็นต์จากคอนโซลของนักพัฒนาซอฟต์แวร์ของผู้ให้บริการนั้นลงในการกำหนดค่าผู้ให้บริการ ดังนี้
- หากต้องการลงทะเบียนไคลเอ็นต์ OAuth ของ Microsoft ให้ทําตามวิธีการในหัวข้อ เริ่มต้นใช้งานอย่างรวดเร็ว: ลงทะเบียนแอปกับปลายทาง Azure Active Directory v2.0 โปรดทราบว่าปลายทางนี้รองรับการลงชื่อเข้าใช้ด้วยบัญชีส่วนตัวของ Microsoft รวมถึงบัญชี Azure Active Directory ดูข้อมูลเพิ่มเติมเกี่ยวกับ Azure Active Directory v2.0
- เมื่อลงทะเบียนแอปกับผู้ให้บริการเหล่านี้ โปรดตรวจสอบว่าได้จดทะเบียนโดเมน
*.firebaseapp.com
สำหรับโปรเจ็กต์เป็นโดเมนเปลี่ยนเส้นทางสำหรับแอป
- คลิกบันทึก
จัดการขั้นตอนการลงชื่อเข้าใช้ด้วย Firebase SDK
หากคุณกำลังสร้างเว็บแอป วิธีที่ง่ายที่สุดในการตรวจสอบสิทธิ์ผู้ใช้ด้วย Firebase โดยใช้บัญชี Microsoft คือการจัดการขั้นตอนการลงชื่อเข้าใช้ทั้งหมดด้วย Firebase JavaScript SDK
หากต้องการจัดการขั้นตอนการลงชื่อเข้าใช้ด้วย Firebase JavaScript SDK ให้ทําตามขั้นตอนต่อไปนี้
สร้างอินสแตนซ์ของ OAuthProvider โดยใช้รหัสผู้ให้บริการ microsoft.com
Web
import { OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('microsoft.com');
Web
var provider = new firebase.auth.OAuthProvider('microsoft.com');
ไม่บังคับ: ระบุพารามิเตอร์ OAuth ที่กำหนดเองเพิ่มเติมที่ต้องการส่งไปกับคําขอ OAuth
Web
provider.setCustomParameters({ // Force re-consent. prompt: 'consent', // Target specific email with login hint. login_hint: 'user@firstadd.onmicrosoft.com' });
Web
provider.setCustomParameters({ // Force re-consent. prompt: 'consent', // Target specific email with login hint. login_hint: 'user@firstadd.onmicrosoft.com' });
ดูพารามิเตอร์ที่ Microsoft รองรับได้ที่เอกสารประกอบ OAuth ของ Microsoft โปรดทราบว่าคุณไม่สามารถส่งพารามิเตอร์ที่จําเป็นสําหรับ Firebase ด้วย
setCustomParameters()
พารามิเตอร์เหล่านี้ ได้แก่ client_id, response_type, redirect_uri, state, scope และ response_modeหากต้องการอนุญาตให้ผู้ใช้จากกลุ่มผู้ใช้ Azure AD กลุ่มใดกลุ่มหนึ่งลงชื่อเข้าใช้แอปพลิเคชันเท่านั้น ให้ใช้ชื่อโดเมนที่แสดงของกลุ่มผู้ใช้ Azure AD หรือตัวระบุ GUID ของกลุ่มผู้ใช้ ซึ่งทําได้โดยระบุช่อง "tenant" ในออบเจ็กต์พารามิเตอร์ที่กําหนดเอง
Web
provider.setCustomParameters({ // Optional "tenant" parameter in case you are using an Azure AD tenant. // eg. '8eaef023-2b34-4da1-9baa-8bc8c9d6a490' or 'contoso.onmicrosoft.com' // or "common" for tenant-independent tokens. // The default value is "common". tenant: 'TENANT_ID' });
Web
provider.setCustomParameters({ // Optional "tenant" parameter in case you are using an Azure AD tenant. // eg. '8eaef023-2b34-4da1-9baa-8bc8c9d6a490' or 'contoso.onmicrosoft.com' // or "common" for tenant-independent tokens. // The default value is "common". tenant: 'TENANT_ID' });
ไม่บังคับ: ระบุขอบเขต OAuth 2.0 เพิ่มเติมนอกเหนือจากโปรไฟล์พื้นฐานที่คุณต้องการขอจากผู้ให้บริการตรวจสอบสิทธิ์
provider.addScope('mail.read'); provider.addScope('calendars.read');
ดูข้อมูลเพิ่มเติมได้ที่เอกสารประกอบเกี่ยวกับสิทธิ์และความยินยอมของ Microsoft
ตรวจสอบสิทธิ์กับ Firebase โดยใช้ออบเจ็กต์ผู้ให้บริการ OAuth คุณสามารถแจ้งให้ผู้ใช้ลงชื่อเข้าใช้ด้วยบัญชี Microsoft ได้โดยเปิดหน้าต่างป๊อปอัปหรือเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ เราขอแนะนำให้ใช้วิธีการเปลี่ยนเส้นทางในอุปกรณ์เคลื่อนที่
- หากต้องการลงชื่อเข้าใช้ด้วยหน้าต่างป๊อปอัป ให้โทรหา
signInWithPopup
Web
import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth"; const auth = getAuth(); signInWithPopup(auth, provider) .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
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. });
- หากต้องการลงชื่อเข้าใช้โดยเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ ให้โทรหา
signInWithRedirect
ทำตามแนวทางปฏิบัติแนะนำเมื่อใช้
signInWithRedirect
,linkWithRedirect
หรือreauthenticateWithRedirect
Web
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Web
firebase.auth().signInWithRedirect(provider);
หลังจากผู้ใช้ลงชื่อเข้าใช้เสร็จแล้วและกลับไปที่หน้าเว็บ คุณจะดูผลลัพธ์การลงชื่อเข้าใช้ได้โดยการเรียกใช้
getRedirectResult
Web
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
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. });
เมื่อดำเนินการเสร็จสมบูรณ์แล้ว คุณจะเรียกข้อมูลโทเค็นการเข้าถึง OAuth ที่เชื่อมโยงกับผู้ให้บริการได้จากออบเจ็กต์
firebase.auth.UserCredential
ที่แสดงผลคุณเรียกใช้ Microsoft Graph API ได้โดยใช้โทเค็นการเข้าถึง OAuth
เช่น หากต้องการดูข้อมูลโปรไฟล์พื้นฐาน คุณสามารถเรียกใช้ REST API ต่อไปนี้ได้
curl -i -H "Authorization: Bearer ACCESS_TOKEN" https://graph.microsoft.com/v1.0/me
Microsoft ไม่ระบุ URL รูปภาพ ต่างจากผู้ให้บริการรายอื่นๆ ที่ Firebase Auth รองรับ โดยคุณจะต้องขอข้อมูลไบนารีสำหรับรูปโปรไฟล์ผ่าน Microsoft Graph API
นอกจากโทเค็นการเข้าถึง OAuth แล้ว คุณยังดึงข้อมูล โทเค็นระบุตัวตน OAuth ของผู้ใช้ได้จากออบเจ็กต์
firebase.auth.UserCredential
การอ้างสิทธิ์sub
ในโทเค็นระบุตัวตนจะเป็นแบบเฉพาะแอปและจะไม่ตรงกับตัวระบุผู้ใช้แบบรวมศูนย์ที่ Firebase Auth ใช้และเข้าถึงได้ผ่านuser.providerData[0].uid
คุณควรใช้ช่องการอ้างสิทธิ์oid
แทน เมื่อใช้เทนนต์ Azure AD เพื่อลงชื่อเข้าใช้ การอ้างสิทธิ์oid
จะตรงกันทุกประการ แต่สำหรับกรณีที่ไม่ใช่เทนนต์ ระบบจะเติมช่องว่างในฟิลด์oid
สำหรับรหัส4b2eabcdefghijkl
ที่รวมศูนย์oid
จะมีรูปแบบเป็น00000000-0000-0000-4b2e-abcdefghijkl
- หากต้องการลงชื่อเข้าใช้ด้วยหน้าต่างป๊อปอัป ให้โทรหา
แม้ว่าตัวอย่างข้างต้นจะเน้นไปที่ขั้นตอนการลงชื่อเข้าใช้ แต่คุณยังลิงก์ผู้ให้บริการ Microsoft กับผู้ใช้ที่มีอยู่ได้โดยใช้
linkWithPopup
/linkWithRedirect
เช่น คุณสามารถลิงก์ผู้ให้บริการหลายรายกับผู้ใช้รายเดียวกันเพื่อให้ผู้ใช้ลงชื่อเข้าใช้ด้วยผู้ให้บริการรายใดก็ได้Web
import { getAuth, linkWithPopup, OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('microsoft.com'); const auth = getAuth(); linkWithPopup(auth.currentUser, provider) .then((result) => { // Microsoft credential is linked to the current user. // 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
var provider = new firebase.auth.OAuthProvider('microsoft.com'); firebase.auth().currentUser.linkWithPopup(provider) .then((result) => { // Microsoft credential is linked to the current user. // IdP data available in result.additionalUserInfo.profile. // OAuth access token can also be retrieved: // result.credential.accessToken // OAuth ID token can also be retrieved: // result.credential.idToken }) .catch((error) => { // Handle error. });
คุณสามารถใช้รูปแบบเดียวกันกับ
reauthenticateWithPopup
/reauthenticateWithRedirect
ซึ่งจะใช้เพื่อดึงข้อมูลเข้าสู่ระบบใหม่สำหรับการดำเนินการที่มีความละเอียดอ่อนซึ่งต้องมีการเข้าสู่ระบบครั้งล่าสุดได้Web
import { getAuth, reauthenticateWithPopup, OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('microsoft.com'); const auth = getAuth(); reauthenticateWithPopup(auth.currentUser, provider) .then((result) => { // User is re-authenticated with fresh tokens minted and // should be able to perform sensitive operations like account // deletion and email or password update. // 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
var provider = new firebase.auth.OAuthProvider('microsoft.com'); firebase.auth().currentUser.reauthenticateWithPopup(provider) .then((result) => { // User is re-authenticated with fresh tokens minted and // should be able to perform sensitive operations like account // deletion and email or password update. // IdP data available in result.additionalUserInfo.profile. // OAuth access token can also be retrieved: // result.credential.accessToken // OAuth ID token can also be retrieved: // result.credential.idToken }) .catch((error) => { // Handle error. });
ตรวจสอบสิทธิ์ด้วย Firebase ในส่วนขยาย Chrome
หากคุณกำลังสร้างแอปส่วนขยาย Chrome โปรดดู คำแนะนำเกี่ยวกับเอกสารที่อยู่นอกหน้าจอ
ขั้นตอนถัดไป
หลังจากผู้ใช้ลงชื่อเข้าใช้เป็นครั้งแรก ระบบจะสร้างบัญชีผู้ใช้ใหม่และลิงก์กับข้อมูลเข้าสู่ระบบ ซึ่งก็คือชื่อผู้ใช้และรหัสผ่าน หมายเลขโทรศัพท์ หรือข้อมูลผู้ให้บริการตรวจสอบสิทธิ์ที่ผู้ใช้ลงชื่อเข้าใช้ด้วย ระบบจะจัดเก็บบัญชีใหม่นี้เป็นส่วนหนึ่งของโปรเจ็กต์ Firebase และใช้เพื่อระบุผู้ใช้ในแอปทุกแอปในโปรเจ็กต์ได้ ไม่ว่าผู้ใช้จะลงชื่อเข้าใช้ด้วยวิธีใดก็ตาม
-
ในแอปทําตามวิธีที่เราแนะนําเพื่อดูสถานะการตรวจสอบสิทธิ์ของผู้ใช้คือการตั้งค่าผู้สังเกตการณ์ในออบเจ็กต์
Auth
จากนั้นคุณก็รับข้อมูลโปรไฟล์พื้นฐานของผู้ใช้ได้จากออบเจ็กต์User
โปรดดูหัวข้อจัดการผู้ใช้ ใน Firebase Realtime Database และ Cloud Storage กฎความปลอดภัย คุณสามารถรับรหัสผู้ใช้ที่ไม่ซ้ำของผู้ใช้ที่ลงชื่อเข้าใช้จากตัวแปร
auth
และนำไปใช้ควบคุมข้อมูลที่ผู้ใช้เข้าถึงได้
คุณสามารถอนุญาตให้ผู้ใช้ลงชื่อเข้าใช้แอปโดยใช้ผู้ให้บริการตรวจสอบสิทธิ์หลายรายได้โดยการลิงก์ข้อมูลเข้าสู่ระบบของผู้ให้บริการตรวจสอบสิทธิ์กับบัญชีผู้ใช้ที่มีอยู่
หากต้องการออกจากระบบของผู้ใช้ ให้เรียกใช้
signOut
โดยทำดังนี้
Web
import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); signOut(auth).then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });
Web
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });