Настройка страницы авторизации
Данное расширение содержит пример внедрения своего кода на страницу входа Web-клиента, а именно:
-
Выполнение кода при определённых событиях — тип
LoginEventsв модуле@docsvision/webclient/Account. -
Подмена текста на странице — объект
defaultLoginResourcesв модуле@docsvision/webclient/Account. -
Замена компонентов страницы — объект
LoginViewв модуле@docsvision/webclient/Account/LoginContainer. -
Добавление стилей на страницу.
| Данный раздел документации описывает настройку внешнего вида страницы авторизации. Инструкцию по добавлению расширений авторизации см. в документации модуля "Платформа". |
Чтобы изменить вид страницы входа, разработайте собственные скрипты По инструкции ниже и поместите их в папку Каталог-установки-Web-клиента\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.
Процесс настройки
-
Скопировать проект на компьютер для разработки.
-
Открыть консоль в папке
ClientScripts\TypeScript\LoginPageи выполнить командуnpm install, затем выполнитьnpm run build:prod. -
Скопировать каталог
SamplesOutput\Site\Content\Account\Scriptsв каталогПуть к установленному WebClient\5.5\Site\Content\Account\Scripts. -
Перезапустить 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 | Точки расширения. |