Universal Auth Library

ВАЖНО! Универсальная библиотека только в рамках корпоративного использования

Установка

Установите пакет:

npm i uit-universal-auth-library

Импорт пакета в проект

Импортируем класс для инициализации в приложение

import { AuthInit } from "uit-universal-auth-library";
import "uit-universal-auth-library/dist/styles/main.css";

Инициализируем

Инициализируем пакет:

const temp = new AuthInit(initParams);

где,

• initParams - набор настроек для инициализации приложения состоит из обязательных параметров для конфигурации:

1. env = "development"; //возможные варианты development/production/staging
2. authorizationKey: string; //ключ Authorization token для доступа к API Metro
3. recaptchaKey: string; // строка токен recaptcha v3

Подробнее узнать о recaptcha v3 можно тут: recaptcha

И необязательных для кастомизации текста на страницах (будет дополнятся):

4. texts?: {};

• 4.1. cardLinkedText?: string; // текст на странице привязанной карты к которому будет вначале добавлено "Карта привязана к телефону +7 (777) 777 77 77." текст по умолчанию 'Её всегда можете найти в личном кабинете.Покупайте товары со скидкой, получайте баллы и купоны.';
• 4.2 cardLinkedBtn?: string; // текст на кнопке на странице привязанной карты текст по умолчанию 'К покупкам'
• 4.3 registrationCompleteText?: string; // текст на странице завершения регистрации текст по умолчанию 'Теперь у вас есть карта METRO, её всегда можете найти вличном кабинете.Покупайте товары со скидкой, получайте баллы и купоны.'
• 4.4 registrationCompleteBtn?: string; // текст на кнопке на странице завершения регистрации текст по умолчанию 'К покупкам'

5. callbacks?: {}; - необязательные коллбеки:

• 5.1 Форма открылась и полностью отобразилась authModalOpened?: () => void;
• 5.2 Отправлен запрос на отправку СМС кода smsCodeSended?: (request: unknown, response: unknown) => void;
• 5.3 Отправлен запрос на повторную отправку СМС кода smsCodeReSended?: (request: unknown, response: unknown) => void;
• 5.4 Отобразилась форма для ввода СМС-кода smsFormOpened?: () => void;
• 5.5 Подтверждение СМС кода. Два возможных события: пользователь успешно авторизован (связка есть), пользователь не авторизован (с передачей списка доступных карт для выбора) smsCodeConfirmed?: (request: unknown, response: unknown) => void;
• 5.6 Форма отобразила список доступных для выбора карт (для выбора одной или из нескольких карт) cardListOpened?: () => void;
• 5.7 Отправлен запрос на выбор карты из списка (с успешным ответом или ошибкой) cardSelected?: (request: unknown, response: unknown) => void;
• 5.8 Форма отобразила окно для регистрации registrationFormOpened?: () => void;
• 5.9 Отправлен запрос на регистрацию (с успешным ответом или ошибкой) registrationCompleted?: (request: unknown, response: unknown) => void;
• 5.10 Форма отобразила окно для ручного ввода номера карты enterCardFormOpened?: () => void;
• 5.11 Отправлен запрос на ввод карты по номеру (с успешным ответом или ошибкой) cardEntered?: (request: unknown, response: unknown) => void;
• 5.12 Форма отобразила окно для валидации номера телефона после ручного ввода карты по номеру phoneValidationFormOpened?: () => void;
• 5.13 Отправлен запрос на валидацию карты по номеру (с успешным ответом или ошибкой) phoneValidation?: (request: unknown, response: unknown) => void;
• 5.14 Общее событие закрытие формы с передачей причины закрытия - закрыл пользователь или авторизация прошла успешно (auto: true/false) closeModalAction?: (params: unknown) => void;

Которые расставлены по приложению и используются либо без параметров для открытия форм, либо передают тело запроса и ответ (payload, response).

Вызов модального окна:

Добавить элемент с идентификатором «mua-open-auth-modal»

<button id="mua-open-auth-modal">Открыть модальное окно</button>

Пример инициализации:

import { AuthInit } from "uit-universal-auth-library";
import "uit-universal-auth-library/dist/styles/main.css";

const initParams = {
  env: 'development',
  authorizationKey: '', //токен
  recaptchaKey: '', //токен
  texts: {
    cardLinkedText:
      'Её всегда можете найти в личном кабинете.Покупайте товары со скидкой, получайте баллы и купоны.',
    cardLinkedBtn: 'К покупкам',
    registrationCompleteText:
      'Теперь у вас есть карта METRO, её всегда можете найти в<span class="mua-personal-account">личном кабинете.</span>Покупайте товары со скидкой, получайте баллы и купоны.',
    registrationCompleteBtn: 'К покупкам',
  },
  callbacks: {
    authModalOpened: () => {
      console.log('modal opened');
    },
    smsCodeSended: (request: unknown, response: unknown) => {
      console.log('sms sended', request, response);
    },
    smsCodeReSended: (request: unknown, response: unknown) => {
      console.log('sms reSended', request, response);
    },
    smsFormOpened: () => {
      console.log('sms form authorized');
    },
    smsCodeConfirmed: (request: unknown, response: unknown) => {
      console.log('sms confirmed', request, response);
    },
    cardListOpened: () => {
      console.log('card list opened');
    },
    cardSelected: (request: unknown, response: unknown) => {
      console.log('card selected', request, response);
    },
    registrationFormOpened: () => {
      console.log('registration opened');
    },
    registrationCompleted: (request: unknown, response: unknown) => {
      console.log('registration completed', request, response);
    },
    enterCardFormOpened: () => {
      console.log('enter card form opened');
    },
    cardEntered: (request: unknown, response: unknown) => {
      console.log('card entered', request, response);
    },
    phoneValidationFormOpened: () => {
      console.log('phone validation form opened');
    },
    phoneValidation: (request: unknown, response: unknown) => {
      console.log('phone validation', request, response);
    },
    closeModalAction: (params: unknown) => {
      console.log('close modal', params);
    },
  };
};

const temp = new AuthInit(initParams);