Аутентификация с использованием 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 нажмите « Добавить нового поставщика» , а затем нажмите «OpenID Connect» .

4. Выберите, будете ли вы использовать поток кода авторизации или поток неявного предоставления .

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

5. Дайте имя этому провайдеру. Обратите внимание на сгенерированный идентификатор поставщика: что-то вроде oidc.example-provider . Этот идентификатор понадобится вам, когда вы добавите код входа в свое приложение.

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

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

Управляйте процессом входа в систему с помощью 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: '[e-mail]'
   });
   

   Web

   provider.setCustomParameters({
     // Target specific email with login hint.
     login_hint: '[e-mail]'
   });
   

   Узнайте у своего провайдера, какие параметры он поддерживает. Обратите внимание: вы не можете передавать параметры, необходимые для Firebase, с помощью setCustomParameters . Этими параметрами являются 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.
    });