Настройка страницы авторизации

Страница входа с указанным адресом электронной почты администратора
Рисунок 1. Страница входа с указанным адресом электронной почты администратора

Данный раздел описывает расширение, которое содержит пример внедрения своего кода на страницу входа Web-клиента, а именно:

  1. Выполнение кода при определённых событиях — тип LoginEvents в модуле @docsvision/webclient/Account.

  2. Подмена текста на странице — объект defaultLoginResources в модуле @docsvision/webclient/Account.

  3. Замена компонентов страницы — объект LoginView в модуле @docsvision/webclient/Account/LoginContainer.

  4. Добавление стилей на страницу.

Данный раздел документации описывает настройку внешнего вида страницы авторизации. Инструкцию по добавлению расширений авторизации см. в документации модуля "Платформа".

Чтобы изменить вид страницы входа, разработайте собственные скрипты По инструкции ниже и поместите их в папку /lib/docsvision/webclient/Content/Account/Scripts.

Ссылка на пример на GitHub: LoginPage.

Дополнительная информация

В примере используется UMD система модулей.

в результате сборки получается файл с расширением .js, который нужно поместить в папку DocsVision/WebClient/Content/Account/Scripts, код будет выполнен перед загрузкой приложения и выполнением ReactDOM.render().

Чтобы добавить стили, нужно создать файл или файлы с расширением .сss и положить в папку DocsVision/WebClient/Content/Account/Styles, стили загружаются после основных стилей страницы.

Входной точкой для внедрения кода на страницу является объект loginExtensionManager доступный глобально через объект windows.

Код расширения будет выполнен перед загрузкой приложения и выполнением ReactDOM.render(), но после загрузки библиотек React и ReactDOM.

Методы loginExtensionManager, а также возможные ресурсы, компоненты и события для замены обозначены в виде типов и интерфейсов в модуле @docsvision/webclient/Account.

Процесс настройки

Чтобы настроить вид страницы авторизации, необходимо:
  1. Скопируйте проект на компьютер для разработки.

  2. Откройте консоль в папке ClientScripts/TypeScript/LoginPage и выполните команду npm install, затем выполнить npm run build:prod.

  3. Скопируйте каталог SamplesOutput/Content/Account/Scripts в каталог /lib/docsvision/webclient/Content/Account/Scripts.

  4. Перезапустите dvwebclient.

Пример кода расширения указан ниже и в файле Index.ts в репозитории примеров Web-клиента.

import React from 'react';
import { windowWithLoginExtensionManager, ILoginPlugin, ILoginExtensionManager, LoginEvents } from '@docsvision/webclient/Account';
import { LoginView } from '@docsvision/webclient/Account/LoginContainer';
import { LoginLogic } from '@docsvision/webclient/Account/LoginLogic';
import "index.scss"

const loginExtensionManager: ILoginExtensionManager = (window as windowWithLoginExtensionManager).loginExtensionManager;
loginExtensionManager.setResources({ Login_AdminMail: 'admin@docsvision.com' }); (1)
if (loginExtensionManager.currentLocale === 'ru') {
    loginExtensionManager.setResources({ Login_Greeting: 'Приветствуем,' });
} else {
    loginExtensionManager.setResources({ Login_Greeting: 'Hello,' });
}

const plugin: ILoginPlugin = {
    order: 1,
    eventName: "LogicEventConstructor",
    fn: (data) => {
        (2)
    },
    name: 'myPlugin',
};
const plugin2: ILoginPlugin = {
    order: 2,
    eventName: "EventContainerUseEffect",
    fn: (data) => {
        (3)
    },
    name: 'myPlugin2',
};

(4)
loginExtensionManager.addPlugin(plugin);
loginExtensionManager.addPlugins([plugin2]);

(5)
loginExtensionManager.onSetupView = function (view: LoginView): LoginView {
    (6)
    view.logo = React.memo((logic: LoginLogic): React.ReactElement => {
        return <img src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png' className="my-custom-logo" />;
    });

    (7)
    view.authBoxBefore = (logic: LoginLogic): React.ReactElement => null;
    view.authBoxAfter = (logic: LoginLogic): React.ReactElement => null;
    view.formBefore = (logic: LoginLogic): React.ReactElement => null;
    view.formAfter = (logic: LoginLogic): React.ReactElement => <a href="#" className="my-custom-element" >Забыли пароль?</a>;
    view.providersBefore = (logic: LoginLogic): React.ReactElement => null;
    view.providersAfter = (logic: LoginLogic): React.ReactElement => null;
    return view;
};
1 Замените текст.
2 Добавьте код выполнения некоторого действия.
3 Добавьте код выполнения ещё одного действия.
4 Добавьте события.
5 Измените компоненты представления.
6 Замените логотип.
7 Точки расширения.

Проверка примера

  1. Перейти на страницу логина в браузере http://company.com/DocsvisionWebClient/account/login.

  2. В результате на странице входа будут изменены логотип и приветствие, а также добавлена почта администратора.