ตรวจสอบสิทธิ์โดยใช้ 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. เพิ่ม Client ID และ Client Secret จาก Developer Console ของผู้ให้บริการรายนั้นลงในการกำหนดค่าผู้ให้บริการ
    1. หากต้องการลงทะเบียนไคลเอ็นต์ OAuth ของ Microsoft ให้ทำตามวิธีการใน Quickstart: Register an app with the Azure Active Directory v2.0 endpoint โปรดทราบว่าปลายทางนี้รองรับการลงชื่อเข้าใช้โดยใช้บัญชีส่วนตัวของ 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

    import { OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('microsoft.com');

    Web

    var provider = new firebase.auth.OAuthProvider('microsoft.com');
  2. ไม่บังคับ: ระบุพารามิเตอร์ 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'
    });
  3. ไม่บังคับ: ระบุขอบเขต OAuth 2.0 เพิ่มเติมที่นอกเหนือจากโปรไฟล์พื้นฐานซึ่ง คุณต้องการขอจากผู้ให้บริการตรวจสอบสิทธิ์

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

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

  4. ตรวจสอบสิทธิ์ด้วย 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

  5. แม้ว่าตัวอย่างข้างต้นจะเน้นที่ขั้นตอนการลงชื่อเข้าใช้ แต่คุณก็ยังสามารถลิงก์ผู้ให้บริการ 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.
        });
  6. คุณสามารถใช้รูปแบบเดียวกันกับ 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.
});