Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

Аутентификация с помощью Microsoft с помощью JavaScript

Вы можете позволить своим пользователям проходить аутентификацию с помощью Firebase с помощью поставщиков OAuth, таких как Microsoft Azure Active Directory, путем интеграции универсального входа OAuth в ваше приложение с помощью Firebase SDK для выполнения сквозного потока входа.

Прежде чем вы начнете

Чтобы войти в систему с использованием учетных записей Microsoft (Azure Active Directory и личные учетные записи Microsoft), вы должны сначала включить Microsoft в качестве поставщика входа для вашего проекта Firebase:

  1. Добавить Firebase в свой проект JavaScript .
  2. В Firebase консоли откройте раздел Auth.
  3. На вкладке Входа в методе, включите поставщик Microsoft.
  4. Добавьте идентификатор клиента и секрет клиента от разработчиков консоли, поставщика к конфигурации поставщика:
    1. Для регистрации клиента Microsoft OAuth, следуйте инструкциям в Quickstart: Регистрация приложения с Azure v2.0 Active Directory конечной точкой . Обратите внимание, что эта конечная точка поддерживает вход с использованием личных учетных записей 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 с помощью провайдера ID microsoft.com.

    Веб-версия 9

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

    Веб-версия 8

    var provider = new firebase.auth.OAuthProvider('microsoft.com');
  2. Необязательно: Укажите дополнительные пользовательские параметры OAuth , которые вы хотите отправить с запросом OAuth.

    Веб-версия 9

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

    Веб-версия 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, состояние, объем и response_mode.

    Чтобы разрешить вход в приложение только пользователям из определенного клиента Azure AD, можно использовать либо понятное доменное имя клиента Azure AD, либо идентификатор GUID клиента. Это можно сделать, указав поле «арендатор» в объекте настраиваемых параметров.

    Веб-версия 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'
    });

    Веб-версия 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 :

    Веб-версия 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.
      });

    Веб-версия 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 :

    Веб-версия 9

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

    Веб-версия 8

    firebase.auth().signInWithRedirect(provider);

    После того , как пользователь завершает входа в систему и возвращается на страницу, вы можете получить знак-в результате по телефону getRedirectResult .

    Веб-версия 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.
      });

    Веб-версия 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, вы можете вызвать API Microsoft Graph .

    Например, чтобы получить основную информацию о профиле, можно вызвать следующий 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 . Например, вы можете связать нескольких поставщиков с одним и тем же пользователем, позволяя им входить в систему с любым из них.

    Веб-версия 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.
        });

    Веб-версия 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 , которые могут быть использованы для получения свежих учетных данных для чувствительных операций, требующих последней регистрацию.

    Веб-версия 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.
        });

    Веб-версия 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 переадресовывает. Эти методы следует вызывать из сценария фоновой страницы, а не из всплывающего окна действия браузера, поскольку всплывающее окно проверки подлинности отменяет всплывающее окно действия браузера. Методы всплывающих окон могут быть использованы только в расширениях с использованием манифеста V2 . Поздние Manifest V3 позволяет только фоновые сценарии в виде работников сферы обслуживания, которые не могут выполнить всплывающие операции на всех.

В расширении Chrome в файле манифеста убедитесь , что вы добавляете https://apis.google.com URL в content_security_policy allowlist.

Следующие шаги

После того, как пользователь входит в систему в первый раз, создается новая учетная запись пользователя, связанная с учетными данными, то есть с именем пользователя и паролем, номером телефона или информацией о провайдере аутентификации, с которыми пользователь вошел в систему. Эта новая учетная запись хранится как часть вашего проекта Firebase и может использоваться для идентификации пользователя в каждом приложении в вашем проекте, независимо от того, как пользователь входит в систему.

  • В приложениях, рекомендуемый способ узнать статус аутентификации вашего пользователя, чтобы установить наблюдатель на Auth объекте. Вы можете получить основную информацию о профиле пользователя от User объекта. См Управление пользователей .

  • В вашей базе данных в реальном времени и Firebase Cloud Storage правил безопасности , вы можете получить подписанный в уникальном пользователя идентификатор пользователя из auth переменной и использовать его , чтобы контролировать , какие данные пользователь заходит может.

Вы можете позволить пользователям входить в ваше приложение с помощью нескольких поставщиков проверки подлинности с помощью ссылки AUTH учетных данных поставщика к существующему учетной записи пользователя.

Чтобы выйти пользователь, вызовите signOut :

Веб-версия 9

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

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

Веб-версия 8

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