Предисловие

Продолжение цикла по работе с Azure B2C. В данной статье я расскажу о том, как подключить аутентификацию на React JS.

Ссылки на связанные посты

Часть 1: Создание и настройка приложений на Azure AD B2C
Часть 2: Работа с Identity Framework Experience
Часть 3: Подключение приложения React
Часть 4: Подключение приложения React Native
Часть 5: Подключение и настройка бэкэнда на .NET Core 3

ШАГ 1

Необходимо установить react-aad-msal (npm i react-aad-msal).

Добавить в каталог public пустой файл auth.html

ШАГ 2

Создать файл auth-provider.ts в папке ./src

Также нужно проверить, что в Azure B2C во вкладке Разрешения API предоставлено согласие администратора для openid и profile.

  import { MsalAuthProvider, LoginType } from 'react-aad-msal';
  import { Configuration } from 'msal/lib-commonjs/Configuration';
  
  // Msal Configurations
  export const config = (azurePolicy: string): Configuration => ({
    auth: {
      authority: `https://yourcompany.b2clogin.com/yourcompany.onmicrosoft.com/${azurePolicy}`, // azurePolicy = Название политики, на которую нужно перенести пользователя (об этом дальше)
      validateAuthority: false,
      clientId: '777aaa77a-7a77-7777-bb77-8888888aabc', // ClientID вашего приложения Azure AD B2C
    },
    cache: {
      cacheLocation: 'localStorage',
      storeAuthStateInCookie: false, // Лучше оставить false иначе кукисы имеют свойство накапливаться, что приводит к ошибке 431
    },
  });
  
  // Authentication Parameters
  // Обязательно укажите полный путь, иначе не будет работать acquire silent token
  // UPD!! если не срабатывает accquireTokenSilently - нужно заменить scopes на
  // scopes: ['777aaa77a-7a77-7777-bb77-8888888aabc']
  const authenticationParameters = {
    scopes: [
      'https://myapp.onmicrosoft.com/777aaa77a-7a77-7777-bb77-8888888aabc/openid', 
      'https://myapp.onmicrosoft.com/777aaa77a-7a77-7777-bb77-8888888aabc/profile',
    ],
  };
  
  // Options
  export const options = {
    loginType: LoginType.Redirect,
    tokenRefreshUri: `${window.location.origin}/auth.html`,
  };
  
  export const authProvider = (customConfig: Configuration): MsalAuthProvider => new MsalAuthProvider(customConfig, authenticationParameters, options);

Где брать названия политик вы можете увидеть на скриншоте

ШАГ 3

В файле index.tsx нужно обработать сценарии по которым пользователь будет заходить в ваше приложение.

  import * as React from 'react';
  import * as ReactDOM from 'react-dom';
  import { Provider } from 'react-redux';
  import { AzureAD, AuthenticationState, IAzureADFunctionProps } from 'react-aad-msal';
  import { authProvider, config } from './auth-provider';
  import App from './App';

  const store = configureStore();

  const unauthenticatedFunction = () => (
  // Переносим пользователя на страничку "Восстановление пароля" 
  // указав соответствующую политику
  <AzureAD provider={authProvider(config('B2C_1A_PasswordReset'))}>
    {
      ({
        login, logout, authenticationState, error, accountInfo,
      }: IAzureADFunctionProps): React.ReactElement | void => {
        switch (authenticationState) {
          default:
            login();
            return <h1>Loading...</h1>;
        }
      }
    }
  </AzureAD>
);
ReactDOM.render(
  <Provider store={store}>
    // Переносим пользователя на страницу авторизации
    <AzureAD provider={authProvider(config('B2C_1A_signup_signin'))} reduxStore={store}>
      {
        ({
          login, logout, authenticationState, error, accountInfo,
        }: IAzureADFunctionProps): React.ReactElement | void => {
          switch (authenticationState) {
            case AuthenticationState.Authenticated:
              console.log(accountInfo); // Данные пользователя + JWT Token
              return <App />;
            case AuthenticationState.Unauthenticated:
              if (!accountInfo && !error) {
                login();
              }
              if (!accountInfo && error) {
                // Переносим пользователя на восстановление пароля если 
                // он вернулся с ошибкой AADB2C90118
                if (error.errorMessage.includes('AADB2C90118')) {
                  return unauthenticatedFunction();
                }
                // Действие, когда пользователь возвращается не авторизированным
                // (Например когда нажмет кнопку "Забыл пароль" а потом нажал кнопку "Отмена")
                if (error.errorMessage.includes('AADB2C90091')) {
                  login();
                }
              }
              console.log('ERROR', error);
              return <h1>Not authorized</h1>;
            case AuthenticationState.InProgress:
              return <h1>In progress</h1>;
            default:
              return <h1>Default</h1>;
          }
        }
      }
    </AzureAD>
  </Provider>,
  document.getElementById('root'),
);

registerServiceWorker();

ШАГ 4

Переходим на Azure AD B2C во вкладку «Регистрация приложений» и выбираем приложение которое Вы хотите использовать, кроме:

IdentityExperienceFramework и ProxyIdentityExperienceFramework.

Если вы еще не создали приложение, то пройдите шаг «Базовые пользовательские потоки»

Далее переходим в проверку подлинности и добавляем следующие URI:

localhost:5001/auth.html
localhost:5001/
myapp.b2clogin.com/myapp.onmicrosoft.com/oauth2/authresp
Другие ссылки на ваше приложение

Заключение

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

Спасибо за внимание!

Сказ о том, как я настраивал Azure AD B2C на React и React Native Часть 3 (Туториал)