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

Предисловие

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

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

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

ШАГ 1

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

ШАГ 2

Открыть в Azure AD B2C ваше приложение. Во вкладке «Проверка подлинности» — нажать «Добавить платформу».
Необходимо выбрать Android и iOS.

После того, как вы создатие обе платформы вы полчите примерно такие данные:

ШАГ 3

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

  import { authorize, revoke, refresh } from 'react-native-app-auth';   const config = (page) => ({     // Найти issuer можно во вкладке "Обзор". Для этого нажмите кнопку "Конечные точки".     // Также необходимо добавить "tfp" как показано в примере ниже.      // В качестве параметра передаем нужную политику.     issuer: `https://myapp.b2clogin.com/tfp/mycompany.onmicrosoft.com/${pages[page]}`,     // ClientID вашего приложения Azure AD B2C     clientId: '777aaa77a-7a77-7777-bb77-8888888aabc',     scopes: ['openid'], // Обязательно укажите openid     // Нужно для того, чтобы при повторной авторизации, пользователь мог      // снова выбрать способ авторизации (Google, Facebook и т.д.)     additionalParameters: { prompt: 'login' },     // URI перенаправления (Android)     redirectUrl: 'msauth://com.myapp/asdasd%o293o4iro21342/',   });   const logOutConfig = {     clientId: '777aaa77a-7a77-7777-bb77-8888888aabc',     serviceConfiguration: {       revocationEndpoint:         'https://mycompany.b2clogin.com/mycompany.onmicrosoft.com/B2C_1A_SignIn/oauth2/v2.0/logout',     },   };   // Используем отдельную политику для каждого действия   const pages = {     signIn: 'B2C_1A_SignIn',     signUp: 'B2C_1A_SignUp',     resetPassword: 'B2C_1A_PasswordReset',   };    // Функция для получения данных с Azure.   const getAzureData = async (page) => {     try {       const data = await authorize(config(page));       return data;     } catch (e) {       requestErrorHandler(e, 'azure authorize error');     }   };    export const signIn = () => async (dispatch) => {     const authMethod = 'signIn';     try {       const data = await getAzureData(authMethod);       dispatch(userRegistration(data, authMethod));     } catch (e) {       requestErrorHandler(e, 'sign in error');     }   };     export const azureLogOut = () => async (dispatch, getState) => {     const { refreshToken } = getState().Authentication;     try {       await revoke(logOutConfig, {         tokenToRevoke: refreshToken,         sendClientId: true,       });       dispatch(authActions.logOut());     } catch (e) {       console.warn(e);     }   }; 

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

ШАГ 4

Теперь нужно внести небольшие изменения в следующие файлы:

/android/app/build.gradle

  defaultConfig {     manifestPlaceholders = [         appAuthRedirectScheme: 'msauth'     ]      ...   } 

/ios/yourApp/Info.plist

<key>CFBundleURLTypes</key> <array> ...     <dict>     <key>CFBundleURLName</key>     <string>com.yourApp</string>     <key>CFBundleURLSchemes</key>     <array>       <string>msauth.com.yourApp</string>     </array>   </dict> </array> 

ШАГ 5

Теперь нам необходимо сохранить токен, что бы не просить пользователя авторизоваться каждый раз когда он открывает ваше приложение. Для этого необходимо скачать redux-persist-sensitive-storage
(npm i redux-persist-sensitive-storage).

    import { compose, applyMiddleware, createStore } from "redux";     import { persistStore, persistCombineReducers } from "redux-persist";     import createSensitiveStorage from "redux-persist-sensitive-storage";     import reducers from "./reducers"; // where reducers is an object of reducers      const storage = createSensitiveStorage({       keychainService: "myKeychain",       sharedPreferencesName: "mySharedPrefs"     });      const config = {       key: "root",       storage,     };      const reducer = persistCombineReducers(config, reducers);      function configureStore () {       // ...       let store = createStore(reducer);       let persistor = persistStore(store);        return { persistor, store };     }   

ШАГ 6

Добавляем функции для обновления токена

  export const autoSignIn = (params) => async (dispatch) => {     try {       const userData = await getRefreshedAzureUserData(params);       await dispatch(openApplication(userData, params.authMethod));     } catch (e) {       requestErrorHandler(e, 'auto sign in error');     }   };   export const getRefreshedAzureUserData = async ({ refreshToken, authMethod }) => {     try {       const result = await refresh(config(authMethod), { refreshToken });       return result;     } catch (e) {       requestErrorHandler(e, 'get refresh token error');     }   }; 

Заключение

Вуаля. все готово! Теперь ваши пользователи смогут авторизовываться в вашем мобильном приложении.

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