אימות באמצעות Microsoft עם JavaScript

קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

אתה יכול לאפשר למשתמשים שלך לבצע אימות עם Firebase באמצעות ספקי OAuth כמו Microsoft Azure Active Directory על ידי שילוב OAuth Login גנרי באפליקציה שלך באמצעות Firebase SDK כדי לבצע את זרימת הכניסה מקצה לקצה.

לפני שאתה מתחיל

כדי להיכנס למשתמשים באמצעות חשבונות Microsoft (Azure Active Directory וחשבונות Microsoft אישיים), תחילה עליך להפעיל את Microsoft כספק כניסה לפרויקט Firebase שלך:

  1. הוסף את Firebase לפרויקט JavaScript שלך .
  2. במסוף Firebase , פתח את הקטע Auth .
  3. בכרטיסייה שיטת כניסה , הפעל את ספק Microsoft .
  4. הוסף את מזהה הלקוח ואת סוד הלקוח ממסוף המפתחים של אותו ספק לתצורת הספק:
    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 version 9

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

    Web version 8

    var provider = new firebase.auth.OAuthProvider('microsoft.com');
  2. אופציונלי : ציין פרמטרים נוספים של OAuth מותאמים אישית שברצונך לשלוח עם בקשת ה-OAuth.

    Web version 9

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

    Web version 8

    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 של הדייר. ניתן לעשות זאת על ידי ציון השדה "דייר" באובייקט הפרמטרים המותאמים אישית.

    Web version 9

    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 version 8

    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 version 9

    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 version 8

    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 version 9

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

    Web version 8

    firebase.auth().signInWithRedirect(provider);

    לאחר שהמשתמש משלים את הכניסה וחוזר לדף, תוכל להשיג את תוצאת הכניסה על ידי קריאה getRedirectResult .

    Web version 9

    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 version 8

    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, מיקרוסופט אינה מספקת כתובת URL של תמונה ובמקום זאת, יש לבקש את הנתונים הבינאריים עבור תמונת פרופיל באמצעות Microsoft Graph API .

    בנוסף לאסימון הגישה של OAuth, ניתן לאחזר את אסימון ה-OAuth ID של המשתמש מהאובייקט 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 version 9

    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 version 8

    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 version 9

    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 version 8

    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, עליך להוסיף את מזהה תוסף Chrome שלך:

  1. פתח את הפרויקט שלך במסוף Firebase .
  2. במקטע אימות , פתח את דף שיטת הכניסה .
  3. הוסף URI כמו הבא לרשימת הדומיינים המורשים:
    chrome-extension://CHROME_EXTENSION_ID

רק פעולות קופצות ( signInWithPopup , linkWithPopup ו- reauthenticateWithPopup ) זמינות לתוספי Chrome, מכיוון שתוספי Chrome אינם יכולים להשתמש בהפניות HTTP. עליך לקרוא לשיטות אלה מסקריפט של דף רקע ולא מחלון קופץ של פעולה בדפדפן, מכיוון שחלון האימות יבטל את חלון פעולת הדפדפן הקופץ. ניתן להשתמש בשיטות הקופצות רק בהרחבות המשתמשות ב- Manifest V2 . ה- Manfest V3 החדש יותר מאפשר רק סקריפטים בצורת עובדי שירות, שאינם יכולים לבצע את פעולות המוקפץ כלל.

בקובץ המניפסט של תוסף Chrome שלך, ודא שאתה מוסיף את כתובת האתר https://apis.google.com לרשימת ההיתרים של content_security_policy .

הצעדים הבאים

לאחר שמשתמש נכנס בפעם הראשונה, נוצר חשבון משתמש חדש ומקושר לאישורים - כלומר, שם המשתמש והסיסמה, מספר הטלפון או פרטי ספק האישורים - המשתמש נכנס איתו. החשבון החדש הזה מאוחסן כחלק מפרויקט Firebase שלך, וניתן להשתמש בו כדי לזהות משתמש בכל אפליקציה בפרויקט שלך, ללא קשר לאופן שבו המשתמש נכנס.

  • באפליקציות שלך, הדרך המומלצת לדעת את סטטוס ההרשאה של המשתמש שלך היא להגדיר צופה על אובייקט Auth . לאחר מכן תוכל לקבל את פרטי הפרופיל הבסיסיים של User מאובייקט המשתמש. ראה ניהול משתמשים .

  • בכללי האבטחה של מסד הנתונים בזמן אמת של Firebase ואחסון בענן , תוכל לקבל את מזהה המשתמש הייחודי של המשתמש auth ממשתנה האימות, ולהשתמש בו כדי לשלוט לאילו נתונים המשתמש יכול לגשת.

אתה יכול לאפשר למשתמשים להיכנס לאפליקציה שלך באמצעות מספר ספקי אימות על ידי קישור אישורי ספק אימות לחשבון משתמש קיים.

כדי לצאת ממשתמש, התקשר signOut :

Web version 9

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

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

Web version 8

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