คุณสามารถอนุญาตให้ผู้ใช้ตรวจสอบสิทธิ์กับ Firebase โดยใช้ผู้ให้บริการ OAuth เช่น Microsoft Azure Active Directory ได้โดยการผสานรวมการเข้าสู่ระบบ OAuth ทั่วไป เข้ากับแอปโดยใช้ Firebase SDK เพื่อดำเนินการขั้นตอนการลงชื่อเข้าใช้แบบครบวงจร
ก่อนเริ่มต้น
หากต้องการให้ผู้ใช้ลงชื่อเข้าใช้โดยใช้บัญชี Microsoft (Azure Active Directory และบัญชี Microsoft ส่วนตัว) คุณต้องเปิดใช้ Microsoft เป็นผู้ให้บริการลงชื่อเข้าใช้สำหรับโปรเจ็กต์ Firebase ก่อน โดยทำดังนี้
- เพิ่ม Firebase ลงในโปรเจ็กต์ JavaScript
- ในคอนโซล Firebase ให้ไปที่ ความปลอดภัย > การตรวจสอบสิทธิ์
- ในแท็บวิธีการลงชื่อเข้าใช้ ให้เปิดใช้ผู้ให้บริการลงชื่อเข้าใช้ Microsoft
-
เพิ่ม Client ID และ Client Secret จาก
Developer Console ของผู้ให้บริการรายนั้นลงในการกำหนดค่าผู้ให้บริการ
- หากต้องการลงทะเบียนไคลเอ็นต์ OAuth ของ Microsoft ให้ทำตามวิธีการใน Quickstart: Register an app with the Azure Active Directory v2.0 endpoint โปรดทราบว่าปลายทางนี้รองรับการลงชื่อเข้าใช้โดยใช้บัญชีส่วนตัวของ 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 ของกลุ่มผู้ใช้ โดยระบุฟิลด์ "กลุ่มผู้ใช้" ในออบเจ็กต์พารามิเตอร์ที่กำหนดเอง
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หรือreauthenticateWithRedirectWeb
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Web
firebase.auth().signInWithRedirect(provider);
หลังจากที่ผู้ใช้ลงชื่อเข้าใช้เสร็จสมบูรณ์และกลับมาที่หน้าเว็บ คุณจะรับผลการลงชื่อเข้าใช้ได้โดยเรียกใช้
getRedirectResultWeb
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สำหรับรหัสที่เชื่อมโยง4b2eabcdefghijkloidจะมีแบบฟอร์ม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 และสามารถใช้เพื่อระบุผู้ใช้ในทุกแอปในโปรเจ็กต์ได้ ไม่ว่าผู้ใช้จะลงชื่อเข้าใช้ด้วยวิธีใดก็ตาม
-
ในแอป วิธีที่แนะนำในการทราบสถานะการให้สิทธิ์ของผู้ใช้คือการ ตั้งค่า Observer ในออบเจ็กต์
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. });