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