Сервис авторизации Sobank и CreditPro

Технологии:

Typescript + React

Инструкция по установке

 npm i bca-auth-widget-npm

или

 yarn add bca-auth-widget-npm

Пример использования

Имопртируем npm пакет

import { AuthWindowContainer, ModalModel } from 'bca-auth-widget-npm';

• AuthWindowContainer - компонент виджета
• ModalModel - управление виджетом
  • modalState: state
  • setOpenedModal - открытие виджета (boolean)
  • setTimer - установка таймера (number)
  • setShowChangePhone - показать/скрыть смену номера (boolean)
  • setDisabledPhone -
  • setShowCode - показать код (boolean)
  • setDisabledCode
  • resetTimer - перезапустить таймер

Показать/скрыть виджет

  const openHandler = useCallback(() => {
    setOpenedModal(!modalState.opened);
  }, [setOpenedModal]);

      <AuthWindowContainer
        theme="sobank"
        backUrl="https://develop.onbank.online"
        authType="MTS_ID"
        notify={() => undefined}
      />
      
      <button onClick={openHandler}>open modal</button>

theme - темизация виджета (sobank или creditPro) backUrl - адрес бэкенда (https://develop.onbank.online) authType - тип авторизации (MTS_ID или BASIC_SMS) notify - текст уведомления ( (text) => void )

Инструкция по установке Module Federation

• git clone

• yarn && yarn run serve запускается на 4174 порте

В "хостовом" приложении:

• Создать в корне проекта файл .npmrc

• Установить библиотеки, которые еще не установлены:

  yarn add react react-dom react-router-dom recoil
  yarn add @ca-actual-projects/sobankui" -D

или

npm install react react-dom react-router-dom recoil  
npm install  @ca-actual-projects/sobankui" –D  

Если приложение собрано на Vite:

yarn add @originjs/vite-plugin-federation -D

или

npm install  @originjs/vite-plugin-federation –D  

• В config сборщика добавить Module Federation пример для Webpack5, пример для Vite
  Важно! Не использовать в config плагины для абсолютных путей, вместо этого использовать alias.

• Создать описание SERVER_URL

• Создать config

• Создать declaration: authRemote.d.ts

• Обернуть приложение в RecoilRoot

• Использование в проекте на примерах