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

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

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

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

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

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

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

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

Чтобы изменить вид страницы входа, разработайте собственные скрипты По инструкции ниже и поместите их в папку \%WebCinstallDir%\Site\Content\Account\Scripts.

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

Рекомендуется осуществлять сборку в виде umd модуля.

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

Чтобы добавить стили, нужно создать файл или файлы с расширением .сss и положить в папку DocsVision\WebClient\5.5\Site\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\Site\Content\Account\Scripts в каталог Путь к установленному WebClient\5.5\Site\Content\Account\Scripts.

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

Пример кода расширения указан ниже и в файле 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; (1)
loginExtensionManager.setResources({ Login_AdminMail: 'admin@docsvision.com' });
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 Выполните действие 1.
3 Выполните действие 2.
4 Добавьте события.
5 Измените компоненты представления.
6 Замените элемент.
7 Точки расширения.

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

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

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