คุณสามารถอนุญาตให้ผู้ใช้ตรวจสอบสิทธิ์กับ Firebase โดยใช้ผู้ให้บริการ OAuth เช่น Microsoft Azure Active Directory ได้ด้วยการผสานรวมการเข้าสู่ระบบ OAuth ทั่วไปลงในแอปโดยใช้ Firebase SDK เพื่อดำเนินการขั้นตอนการลงชื่อเข้าใช้ตั้งแต่ต้นจนจบ
ก่อนเริ่มต้น
หากต้องการให้ผู้ใช้ลงชื่อเข้าใช้โดยใช้บัญชี Microsoft (Azure Active Directory และบัญชี Microsoft ส่วนบุคคล) คุณต้องเปิดใช้ Microsoft เป็นผู้ให้บริการลงชื่อเข้าใช้สำหรับโปรเจ็กต์ Firebase ก่อน โดยทำดังนี้
- เพิ่ม Firebase ในโปรเจ็กต์ JavaScript
- ในคอนโซล Firebase ให้ไปที่ ความปลอดภัย > การตรวจสอบสิทธิ์
- ในแท็บวิธีการลงชื่อเข้าใช้ ให้เปิดใช้ผู้ให้บริการลงชื่อเข้าใช้ Microsoft
-
เพิ่มรหัสไคลเอ็นต์ และรหัสลับไคลเอ็นต์ จากคอนโซลนักพัฒนาแอปของผู้ให้บริการดังกล่าว
ลงในการกำหนดค่าผู้ให้บริการ โดยทำดังนี้
- หากต้องการลงทะเบียนไคลเอ็นต์ Microsoft OAuth ให้ทำตามวิธีการใน คู่มือเริ่มต้นฉบับย่อ: ลงทะเบียนแอปกับปลายทาง 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 รองรับได้ใน เอกสารประกอบเกี่ยวกับ Microsoft OAuth โปรดทราบว่าคุณไม่สามารถส่งพารามิเตอร์ที่ 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, หรือ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 รูปภาพ แต่ต้องขอข้อมูลไบนารีสำหรับรูปโปรไฟล์ผ่าน Microsoft Graph APIซึ่งแตกต่างจากผู้ให้บริการรายอื่นๆ ที่ Firebase Auth รองรับ
นอกจากโทเค็นเพื่อการเข้าถึง 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 และใช้เพื่อระบุผู้ใช้ในทุกแอปของโปรเจ็กต์ได้ ไม่ว่าผู้ใช้จะลงชื่อเข้าใช้ด้วยวิธีใดก็ตาม
-
ในแอป วิธีที่แนะนำในการตรวจสอบสถานะการตรวจสอบสิทธิ์ของผู้ใช้คือการตั้งค่า 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. });