uit-metro-universal-auth-library

v1.1.17

Published

a month ago

Universal auth library

Downloads

0High
0Medium
0Low

umbrellaitcom

Universal Auth Library

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

Установка

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

npm i uit-metro-universal-auth-library

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

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

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

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

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

const temp = new AuthInit(initParams);

где,

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

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

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

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

texts?: {};

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

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, formState: unknown) => void;
5.9.1 formState - показывает состояние формы, а именно добавленных чекбоксов Пример - {checkboxes: [{elementId: 'checkboxElementId', state: true}]}
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).

openModalElementIds?: string - необязательный набор селекторов для вызова модалки

Пример #open-modal-btn, #open-modal-banner - id элементов по клику на которые сработает вызов модалки Для id обязательно добавляем #, для классов . перед селектором. Если параметр отсутствует, то по дефолту работает вызов описанный ниже:

bannerSlides?: object[]; - необязательные баннеры для слайдера:

image: string - url до фото;
title: string;
subtitle: string.

bannerAutoplayInterval?: number; - необязательный параметр времени смены баннера в мс. По умолчанию 5000мс (5с).
registrationAdditionalCheckboxes?: objects[]; - необязательный параметр, список дополнительных чекбоксов

htmlText: string - html текст для чекбокса, можно написать буквально html и он отобразится;
required: boolean - является ли checkbox обязательным;
id: string - идентификатор поля input чекбокса;

registrationCheckboxesConfig?: objects[]; - необязательный параметр, список конфигов дефолтных чекбоксов

checkboxId: string - идентефикатор чекбокса;
isHidden: boolean - скрыть чекбокс от пользователя;
defaultValue: boolean - значение чекбокса по умолчанию;
htmlBody?: string - необязательный параметр, заменяет текст идущий после чекбокса на кастомный html.

registrationBottomHtml?: string; - необязательный параметр, добавляет html между чекбоксами и кнопкой регистрации;
registrationLicenseOpening?: objects[]; - необязательный параметр, настройка открытия условий покупки и работы с персональными данными при нажатии на элемент-ссылку

elementId: string - идентефикатор элемента;
licenseName: 'personal-data' | 'purchase-terms' - какой экран нужно показать.

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

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

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

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

import { AuthInit } from "uit-metro-universal-auth-library";
import "uit-metro-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, formState: 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);
    },
  };
  bannerSlides: [
    {
      image: 'https://online.metro-cc.ru/images/authentication/registration-1.jpg',
      title: 'Welcome Slide 1',
      subtitle: 'This is the first slide.',
    },
    {
      image: "https://online.metro-cc.ru/images/authentication/registration-2.jpg",
      title: 'Awesome Slide 2',
      subtitle: 'Another beautiful slide.',
    },
    {
      image: "https://online.metro-cc.ru/images/authentication/registration-3.jpg",
      title: 'Final Slide 3',
      subtitle: 'And the last one to see.',
    },
  ],
  registrationAdditionalCheckboxes: [
    {
      htmlText: 'Checkbox',
      required: true,
      id: 'checkboxElementId'
    }
  ],
  registrationCheckboxesConfig: [
      {
        checkboxId: "agreement",
        isHidden: true,
        defaultValue: true,
        htmlBody: "<label>А этот текст не видно но чекбокс прожат</label>",
      },
      {
        checkboxId: "promotion",
        isHidden: false,
        defaultValue: true,
      }
    ],
    registrationBottomHtml: "<br>\n" +
      "        Нажимая на кнопку я принимаю\n" +
      "        <a\n" +
      "          class=\"mua-auth-form__offer-link\"\n" +
      "          href=\"https://www.metro-cc.ru/kak-stat-klientom/3000rub\"\n" +
      "          target=\"_blank\"\n" +
      "        >\n" +
      "          условия программы лояльности алкогуру\n" +
      "        </a>\n" +
      "        ,\n" +
      "        <span class=\"mua-auth-form__offer-link\" id=\"bottom-term\">условия покупки</span>\n" +
      "        и\n" +
      "        <span class=\"mua-auth-form__offer-link\" id=\"bottom-personal-data\">условия обработки персональных данных</span>\n",
    registrationLicenseOpening: [
      {
        elementId: 'bottom-term',
        licenseName: 'purchase-terms'
      },
      {
        elementId: 'bottom-personal-data',
        licenseName: 'personal-data'
      }
    ],
  bannerAutoplayInterval: 7000, // Optional: override default 5000ms
};

const temp = new AuthInit(initParams);

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Universal Auth Library

Установка

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

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

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