Как выполнять аутентификацию с помощью OpenID Connect в веб-приложениях

Если вы перешли на версию Firebase Authentication with Identity Platform, то можете аутентифицировать пользователей в Firebase с помощью любого поставщика, совместимого с OpenID Connect (OIDC). Это позволяет использовать поставщиков идентификационной информации, которые не поддерживаются Firebase изначально.

Подготовка

Чтобы пользователи могли входить в аккаунт с помощью поставщика OIDC, сначала нужно собрать у него следующую информацию:

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

  • Секретный код клиента. Секретная строка, которую поставщик использует, чтобы подтвердить право собственности на идентификатор клиента. Для каждого идентификатора клиента потребуется соответствующий секретный код клиента. (Это значение требуется, только если вы используете обработку кода авторизации, что настоятельно рекомендуется.)

  • Эмитент. Строка, идентифицирующая вашего поставщика. Это значение должно быть URL, который при добавлении к нему символа косой черты (/.well-known/openid-configuration) указывает на местоположение документа обнаружения OIDC поставщика. Например, если издатель – https://auth.example.com, документ обнаружения должен быть доступен по адресу https://auth.example.com/.well-known/openid-configuration.

Когда у вас будет вся необходимая информация, включите OpenID Connect в качестве поставщика услуг входа для проекта Firebase:

  1. Добавьте Firebase в свой проект JavaScript.

  2. Если вы ещё не перешли на версию Firebase Authentication with Identity Platform, сделайте это. Аутентификация OpenID Connect доступна только в проектах, обновленных до этой версии.

  3. В консоли Firebase выберите Безопасность > Аутентификация.

  4. На вкладке Способ входа нажмите Добавить нового поставщика и выберите OpenID Connect.

  5. Выберите, какой тип авторизации вы будете использовать: обработку кода авторизации или неявное предоставление разрешения.

    Если ваш поставщик поддерживает обработку кода, всегда используйте ее. Неявное предоставление доступа менее безопасно, поэтому его использование настоятельно не рекомендуется.

  6. Укажите название поставщика. Запишите сгенерированный идентификатор поставщика, например oidc.example-provider. Он понадобится вам, когда вы будете добавлять в приложение код для входа в аккаунт.

  7. Укажите идентификатор и секретный код клиента, а также строку издателя поставщика. Эти значения должны в точности совпадать с теми, которые вам предоставил поставщик.

  8. Сохраните изменения.

Как обрабатывать процесс входа с помощью Firebase SDK

Самый простой способ аутентификации пользователей в Firebase с помощью поставщика OIDC – это реализовать весь процесс входа с помощью Firebase SDK.

Чтобы реализовать процесс входа с помощью Firebase JavaScript SDK, выполните следующие действия:

  1. Создайте экземпляр OAuthProvider, используя идентификатор поставщика, полученный в консоли Firebase.

    Web 

    import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('oidc.example-provider');

    Web 

    var provider = new firebase.auth.OAuthProvider('oidc.example-provider');

  2. Необязательно. Укажите дополнительные специальные параметры OAuth, которые вы хотите отправить с запросом OAuth.

    Web 

    provider.setCustomParameters({
  // Target specific email with login hint.
  login_hint: 'user@example.com'
});

    Web 

    provider.setCustomParameters({
  // Target specific email with login hint.
  login_hint: 'user@example.com'
});

    Узнайте у поставщика, какие параметры он поддерживает. Обратите внимание, что с помощью setCustomParameters нельзя передавать параметры, обязательные для Firebase. Это параметры client_id, response_type, redirect_uri, state, scope и response_mode.

  3. Необязательно. Укажите дополнительные области действия OAuth 2.0, помимо базового профиля, которые вы хотите запросить у поставщика услуг аутентификации.

    Web 

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

    Web 

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

    Узнайте у поставщика, какие области он поддерживает.

  4. Выполните аутентификацию в Firebase, используя объект поставщика OAuth.

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

    Переадресация

    Перенаправьте пользователя на страницу входа поставщика, вызвав функцию signInWithRedirect():

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

    Всплывающее окно

    Web 

    import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // User is signed in.
    // IdP data available using getAdditionalUserInfo(result)

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

  5. В приведенных выше примерах основное внимание уделяется процессам входа в систему, но вы можете использовать тот же шаблон, чтобы связать поставщика OIDC с существующим пользователем с помощью linkWithRedirect() и linkWithPopup(), а также повторно аутентифицировать пользователя с помощью reauthenticateWithRedirect() и reauthenticateWithPopup(), которые можно использовать для получения новых учетных данных для конфиденциальных операций, требующих недавнего входа в систему.

Как обрабатывать процесс входа вручную

Если вы уже реализовали в приложении процесс входа через OpenID Connect, то можете использовать токен идентификатора напрямую для аутентификации в Firebase:

Web 

import { getAuth, signInWithCredential, OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider("oidc.example-provider");
const credential = provider.credential({
    idToken: idToken,
});
signInWithCredential(getAuth(), credential)
    .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 

const provider = new OAuthProvider("oidc.example-provider");
const credential = provider.credential({
    idToken: idToken,
});
firebase.auth().signInWithCredential(credential)
    .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.
    });