Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

Аутентификация с помощью 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, следуйте инструкциям в разделе Краткое руководство. Зарегистрируйте приложение с помощью конечной точки Azure Active Directory версии 2.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 , используя идентификатор поставщика 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 :

    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, вы можете вызывать 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 из объекта firebase.auth.UserCredential можно также получить токен идентификатора OAuth пользователя. 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
    .

Для расширений Chrome доступны только всплывающие операции ( signInWithPopup , linkWithPopup и reauthenticateWithPopup ), поскольку расширения Chrome не могут использовать перенаправления HTTP. Вы должны вызывать эти методы из сценария фоновой страницы, а не из всплывающего окна действия браузера, так как всплывающее окно проверки подлинности отменит всплывающее окно действия браузера. Методы всплывающих окон можно использовать только в расширениях, использующих Manifest V2 . В новом Manifest V3 разрешены только фоновые сценарии в виде сервис-воркеров, которые вообще не могут выполнять всплывающие окна.

Убедитесь, что в файле манифеста вашего расширения Chrome вы добавили URL-адрес https://apis.google.com в белый список content_security_policy .

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

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

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

  • В правилах безопасности базы данных Firebase Realtime и облачного хранилища вы можете получить уникальный идентификатор пользователя, вошедшего в систему, из переменной 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.
});