ตรวจสอบสิทธิ์โดยใช้ Microsoft ด้วย JavaScript

คุณสามารถให้ผู้ใช้ตรวจสอบสิทธิ์กับ Firebase โดยใช้ผู้ให้บริการ OAuth เช่น Microsoft Azure Active Directory โดยการผสานรวมการเข้าสู่ระบบ OAuth ทั่วไปเข้ากับแอปโดยใช้ Firebase SDK เพื่อดำเนินการขั้นตอนการลงชื่อเข้าใช้ตั้งแต่ต้นจนจบ

ก่อนเริ่มต้น

หากต้องการลงชื่อเข้าใช้ให้ผู้ใช้ด้วยบัญชี Microsoft (Azure Active Directory และบัญชี Microsoft ส่วนบุคคล) ก่อนอื่นคุณต้องเปิดใช้ Microsoft เป็นผู้ให้บริการการลงชื่อเข้าใช้สำหรับโปรเจ็กต์ Firebase ของคุณ โดยทำดังนี้

  1. เพิ่ม Firebase ลงในโปรเจ็กต์ JavaScript
  2. ในคอนโซล Firebase ให้เปิดส่วนการตรวจสอบสิทธิ์
  3. เปิดใช้ผู้ให้บริการ Microsoft ในแท็บวิธีการลงชื่อเข้าใช้
  4. เพิ่มรหัสไคลเอ็นต์และรหัสลับไคลเอ็นต์จาก Play Console ของผู้ให้บริการรายนั้นลงในการกำหนดค่าผู้ให้บริการ ดังนี้
    1. หากต้องการลงทะเบียนไคลเอ็นต์ Microsoft OAuth ให้ทำตามวิธีการใน การเริ่มต้นอย่างรวดเร็ว: ลงทะเบียนแอปด้วยปลายทาง Azure Active Directory v2.0 โปรดทราบว่าปลายทางนี้รองรับการลงชื่อเข้าใช้โดยใช้บัญชีส่วนตัวของ Microsoft และบัญชี Azure Active Directory ดูข้อมูลเพิ่มเติมเกี่ยวกับ Azure Active Directory v2.0
    2. เมื่อลงทะเบียนแอปกับผู้ให้บริการเหล่านี้ อย่าลืมจดทะเบียนโดเมน *.firebaseapp.com สำหรับโปรเจ็กต์เป็นโดเมนเปลี่ยนเส้นทางสำหรับแอป
  5. คลิกบันทึก

จัดการขั้นตอนการลงชื่อเข้าใช้ด้วย Firebase SDK

หากคุณกำลังสร้างเว็บแอป วิธีที่ง่ายที่สุดในการตรวจสอบสิทธิ์ผู้ใช้ด้วย Firebase โดยใช้บัญชี Microsoft คือการจัดการขั้นตอนการลงชื่อเข้าใช้ทั้งหมดด้วย Firebase JavaScript SDK

หากต้องการจัดการขั้นตอนการลงชื่อเข้าใช้ด้วย Firebase JavaScript SDK ให้ทำตามขั้นตอนต่อไปนี้

  1. สร้างอินสแตนซ์ของ OAuthProvider โดยใช้รหัสผู้ให้บริการ microsoft.com

    Web Modular API

    import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('microsoft.com');
    auth_msft_create_provider.js

    API ที่ใช้เนมสเปซในเว็บ

    var provider = new firebase.auth.OAuthProvider('microsoft.com');
    microsoft-oauth.js

  2. ไม่บังคับ: ระบุพารามิเตอร์ OAuth ที่กำหนดเองเพิ่มเติมที่ต้องการส่งด้วยคำขอ OAuth

    Web Modular API

    provider.setCustomParameters({
  // Force re-consent.
  prompt: 'consent',
  // Target specific email with login hint.
  login_hint: 'user@firstadd.onmicrosoft.com'
});
    auth_msft_provider_params.js

    API ที่ใช้เนมสเปซในเว็บ

    provider.setCustomParameters({
  // Force re-consent.
  prompt: 'consent',
  // Target specific email with login hint.
  login_hint: 'user@firstadd.onmicrosoft.com'
});
    microsoft-oauth.js

    โปรดดูพารามิเตอร์ที่ Microsoft รองรับในเอกสารประกอบ Microsoft OAuth โปรดทราบว่าคุณไม่สามารถส่งพารามิเตอร์ที่จำเป็นสำหรับ Firebase ด้วย setCustomParameters() พารามิเตอร์เหล่านี้คือ client_id, response_type, redirect_uri, state, scope และ response_mode

    หากต้องการอนุญาตให้ผู้ใช้จากกลุ่มผู้ใช้ Azure AD บางรายลงชื่อเข้าใช้แอปพลิเคชัน คุณจะใช้ชื่อโดเมนที่เหมาะสมของกลุ่มผู้ใช้ Azure AD หรือตัวระบุ GUID ของกลุ่มผู้ใช้ได้ ซึ่งทำได้โดยการระบุช่อง "กลุ่มผู้ใช้" ในออบเจ็กต์พารามิเตอร์ที่กำหนดเอง

    Web Modular API

    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'
});
    auth_msft_provider_params_tenant.js

    API ที่ใช้เนมสเปซในเว็บ

    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'
});
    microsoft-oauth.js

  3. ไม่บังคับ: ระบุขอบเขต OAuth 2.0 เพิ่มเติมนอกเหนือจากโปรไฟล์พื้นฐานที่คุณต้องการขอจากผู้ให้บริการการตรวจสอบสิทธิ์

    provider.addScope('mail.read');
provider.addScope('calendars.read');

    โปรดดูข้อมูลเพิ่มเติมในเอกสารประกอบเกี่ยวกับสิทธิ์ของ Microsoft และความยินยอม

  4. ตรวจสอบสิทธิ์กับ Firebase โดยใช้ออบเจ็กต์ผู้ให้บริการ OAuth คุณสามารถแจ้งให้ผู้ใช้ลงชื่อเข้าใช้ด้วยบัญชี Microsoft ด้วยการเปิดหน้าต่างป๊อปอัปหรือเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ ขอแนะนำให้ใช้วิธีเปลี่ยนเส้นทาง บนอุปกรณ์เคลื่อนที่

    • หากต้องการลงชื่อเข้าใช้ด้วยหน้าต่างป๊อปอัป โปรดโทรหา signInWithPopup

    Web Modular API

    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.
  });
    auth_msft_signin_popup.js

    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.
  });
    microsoft-oauth.js
    • หากต้องการลงชื่อเข้าใช้โดยการเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ โปรดโทรไปที่ signInWithRedirect

    ทำตามแนวทางปฏิบัติแนะนำเมื่อใช้ signInWithRedirect, linkWithRedirect หรือ reauthenticateWithRedirect

    Web Modular API

    import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);
    auth_msft_signin_redirect.js

    API ที่ใช้เนมสเปซในเว็บ

    firebase.auth().signInWithRedirect(provider);
    microsoft-oauth.js

    หลังจากที่ผู้ใช้ลงชื่อเข้าใช้จนเสร็จและกลับไปที่หน้าเว็บแล้ว คุณจะรับผลการลงชื่อเข้าใช้ได้โดยโทรไปที่ getRedirectResult

    Web Modular 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.
  });
    auth_msft_signin_redirect_result.js

    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.
  });
    microsoft-oauth.js

    เมื่อเสร็จสมบูรณ์แล้ว คุณจะดึงโทเค็นการเข้าถึง OAuth ที่เชื่อมโยงกับผู้ให้บริการได้จากออบเจ็กต์ firebase.auth.UserCredential ที่แสดงผล

    เมื่อใช้โทเค็นเพื่อการเข้าถึง OAuth คุณสามารถเรียกใช้ Microsoft Graph API ได้

    ตัวอย่างเช่น ในการรับข้อมูลโปรไฟล์พื้นฐาน อาจเรียก API ของ REST ต่อไปนี้

    curl -i -H "Authorization: Bearer ACCESS_TOKEN" https://graph.microsoft.com/v1.0/me

    Microsoft ต่างจากผู้ให้บริการรายอื่นที่รองรับ Firebase Auth ตรงที่ Microsoft ไม่ได้ระบุ URL ของรูปภาพ แต่จะต้องขอข้อมูลไบนารีสำหรับรูปโปรไฟล์ผ่าน 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

  5. นอกจากตัวอย่างข้างต้นจะมุ่งเน้นที่ขั้นตอนการลงชื่อเข้าใช้ คุณยังลิงก์ผู้ให้บริการ Microsoft กับผู้ใช้ที่มีอยู่โดยใช้ linkWithPopup/linkWithRedirect ได้ด้วย เช่น คุณสามารถลิงก์ผู้ให้บริการหลายรายกับผู้ใช้รายเดียวกันเพื่อให้ผู้ให้บริการเหล่านั้นลงชื่อเข้าใช้ด้วยได้

    Web Modular API

    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.
    });
    auth_msft_link_popup.js

    API ที่ใช้เนมสเปซในเว็บ

    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.
    });
    microsoft-oauth.js

  6. รูปแบบเดียวกันนี้ใช้ได้กับ reauthenticateWithPopup/reauthenticateWithRedirect ซึ่งสามารถใช้เพื่อดึงข้อมูลเข้าสู่ระบบใหม่สำหรับการดำเนินการที่มีความละเอียดอ่อนซึ่งต้องใช้การเข้าสู่ระบบล่าสุด

    Web Modular API

    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.
    });
    auth_msft_reauth_popup.js

    API ที่ใช้เนมสเปซในเว็บ

    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.
    });
    microsoft-oauth.js

ตรวจสอบสิทธิ์ด้วย Firebase ในส่วนขยาย Chrome

หากคุณกำลังสร้างแอปส่วนขยาย Chrome โปรดดู คู่มือเอกสารนอกหน้าจอ

ขั้นตอนถัดไป

หลังจากผู้ใช้ลงชื่อเข้าใช้เป็นครั้งแรก ระบบจะสร้างบัญชีผู้ใช้ใหม่และลิงก์กับข้อมูลเข้าสู่ระบบ ซึ่งก็คือชื่อผู้ใช้และรหัสผ่าน หมายเลขโทรศัพท์ หรือข้อมูลของผู้ให้บริการการตรวจสอบสิทธิ์ ซึ่งผู้ใช้ที่ลงชื่อเข้าใช้ด้วย ระบบจะจัดเก็บบัญชีใหม่นี้เป็นส่วนหนึ่งของโปรเจ็กต์ Firebase และสามารถใช้เพื่อระบุผู้ใช้ในทุกแอปในโปรเจ็กต์ได้ ไม่ว่าผู้ใช้จะลงชื่อเข้าใช้ด้วยวิธีใด

  • สำหรับแอปของคุณ ทางที่แนะนำเพื่อให้ทราบถึงสถานะการตรวจสอบสิทธิ์ของผู้ใช้คือการตั้งค่าผู้สังเกตการณ์ในออบเจ็กต์ Auth จากนั้นคุณจะรับข้อมูลโปรไฟล์พื้นฐานของผู้ใช้ได้จากออบเจ็กต์ User โปรดดูหัวข้อจัดการผู้ใช้

  • ในกฎความปลอดภัยของ Firebase Realtime Database และ Cloud Storage คุณจะรับรหัสผู้ใช้ที่ไม่ซ้ำของผู้ใช้ที่ลงชื่อเข้าใช้จากตัวแปร auth ได้ และใช้รหัสดังกล่าวเพื่อควบคุมข้อมูลที่ผู้ใช้เข้าถึงได้

คุณอนุญาตให้ผู้ใช้ลงชื่อเข้าใช้แอปโดยใช้ผู้ให้บริการการตรวจสอบสิทธิ์หลายรายได้โดยลิงก์ข้อมูลเข้าสู่ระบบของผู้ให้บริการการตรวจสอบสิทธิ์กับบัญชีผู้ใช้ที่มีอยู่

หากต้องการนำผู้ใช้ออกจากระบบ โปรดโทรหา signOut:

Web Modular API

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
auth_sign_out.js

API ที่ใช้เนมสเปซในเว็บ

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
index.js