รับรองความถูกต้องโดยใช้ Microsoft ด้วย JavaScript รับรองความถูกต้องโดยใช้ 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. เพิ่ม รหัสไคลเอ็นต์ และ รหัสลับไคลเอ็นต์ จากคอนโซลนักพัฒนาซอฟต์แวร์ของผู้ให้บริการรายนั้นลงในการกำหนดค่าผู้ให้บริการ:
    1. หากต้องการลงทะเบียนไคลเอนต์ Microsoft OAuth ให้ทำตามคำแนะนำใน Quickstart: ลงทะเบียนแอปด้วยจุดสิ้นสุด Azure Active Directory v2.0 โปรดทราบว่าตำแหน่งข้อมูลนี้รองรับการลงชื่อเข้าใช้โดยใช้บัญชีส่วนบุคคลของ Microsoft เช่นเดียวกับบัญชี Azure Active Directory เรียนรู้เพิ่มเติม เกี่ยวกับ Azure Active Directory เวอร์ชัน 2.0
    2. เมื่อลงทะเบียนแอพกับผู้ให้บริการเหล่านี้ อย่าลืมลงทะเบียนโดเมน *.firebaseapp.com สำหรับโปรเจ็กต์ของคุณเป็นโดเมนการเปลี่ยนเส้นทางสำหรับแอพของคุณ
  5. คลิก บันทึก

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

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

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

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

    Web modular API

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

    Web namespaced API

    var provider = new firebase.auth.OAuthProvider('microsoft.com');
  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'
    });

    Web namespaced API

    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 , การเปลี่ยนเส้นทาง_uri , state , ขอบเขต และ 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'
    });

    Web namespaced 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'
    });
  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.
      });

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

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

    Web modular API

    import { getAuth, signInWithRedirect } from "firebase/auth";
    
    const auth = getAuth();
    signInWithRedirect(auth, provider);

    Web namespaced API

    firebase.auth().signInWithRedirect(provider);

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

    Web namespaced 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.
      });

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

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

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

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

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

    นอกจากโทเค็นการเข้าถึง OAuth แล้ว ยังสามารถดึง โทเค็น OAuth ID ของผู้ใช้ได้จากออบเจ็กต์ firebase.auth.UserCredential อีกด้วย การอ้างสิทธิ์ sub ในโทเค็น ID นั้นเป็นเฉพาะแอป และจะไม่ตรงกับตัวระบุผู้ใช้แบบรวมที่ใช้โดย Firebase Auth และเข้าถึงได้ผ่าน user.providerData[0].uid ควรใช้ช่องการอ้างสิทธิ์ oid แทน เมื่อใช้ผู้เช่า Azure AD เพื่อลงชื่อเข้าใช้ การอ้างสิทธิ์ oid จะตรงกันทุกประการ อย่างไรก็ตาม สำหรับกรณีที่ไม่ใช่ผู้เช่า ฟิลด์ oid จะถูกเสริมไว้ สำหรับ ID แบบรวมศูนย์ 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.
        });

    Web namespaced 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.
        });
  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.
        });

    Web namespaced 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.
        });

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

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

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

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

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

  • ในฐานข้อมูลเรียลไทม์ Firebase และ กฎความปลอดภัยของ พื้นที่เก็บข้อมูลบนคลาวด์ คุณสามารถรับ ID ผู้ใช้เฉพาะของผู้ใช้ที่ลงชื่อเข้าใช้จากตัวแปร 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.
});

Web namespaced API

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