Предисловие

Продолжение цикла по работе с 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

  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   const authenticationParameters = {     scopes: [       'openid', '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
• Другие ссылки на ваше приложение

Заключение

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

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