[APP] Страница входа

1. Обзор

1.1 Версия

Версия FineBI	Версия приложения	Функциональные изменения
6.0	V11.0.68	-

1.2 Функциональный профиль

Администратор входит в систему FineBI и открывает раздел "System Management > Мобильная платформа > Конфигурация APP > Настройки входа ", чтобы установить страницу входа.

Существует два типа методов входа в систему "Встроенная страница входа" и "Настроенная страница входа", по умолчанию используется "Встроенная страница входа". Как показано на рисунке ниже:

Примечание 1: Индивидуальная страница входа для ПК и мобильных устройств настраивается отдельно и не влияет друг на друга.

Примечание 2: Интернационализация страницы входа в APP на данный момент не поддерживается.

登陆设置11111.png

2. Встроенная страница входа в систему

По умолчанию это "Встроенная страница входа". Эффект при входе в приложение показан на следующем рисунке:

Screenshot_20210707_141120_com.finereact.v10(1).jpg

Администратор входит в систему FineBI, открывает "System Management > Мобильная платформа > Конфигурация APP", выбирает "Встроенную страницу входа" для "Способа входа" в "Настройках входа" и "Сохранить", после чего встроенная страница входа успешно устанавливается. Как показано на рисунке ниже:

登陆设置2222.png

3. Настройка страницы входа в систему

Пользователи имеют различные потребности в сценариях, такие как:

Реализация персонализированного интерфейса;
Добавьте другие методы аутентификации, такие как CAPTCHA с изображением и аутентификация с помощью слайдера, в дополнение к входу с помощью имени пользователя и пароля;
Отсутствие логина-пароля, пользовательской логики входа (например, собственный процесс SMS-аутентификации) и т.д.

Вы можете установить пользовательскую страницу входа в приложение, выбрав "Пользовательская страница входа".

企业微信截图_35363d9b-3430-4825-9b3b-c2e4dca3c192.png

3.1 Новые документы

Во-первых, пользователю необходимо настроить страницу входа в систему.

Примечание: Описание интерфейса для настройки экрана входа в систему см. в разделе 3.4 данного документа.

3.1.1 Загрузка файлов JS

Чтобы облегчить разработку и избавить пользователя от необходимости инициализировать JSBridge и передавать сложные параметры, предоставляется JS-файл, инкапсулирующий интерфейс.

Скачать: JSBridgeInterface.js

Код показан ниже:

  
  
   
  
 var configChangedListener = null; var jsBridge = null; /** * Инициализация окружения (необходимо сначала вызвать этот метод, а затем вызвать другие интерфейсы в обратном вызове  
  
  
  
 перед вызовом других интерфейсов) * @param callback */ function init(callback) {  
  
 setupWebViewJavascriptBridge(function(bridge) { jsBridge = bridge; & nbsp; bridge.registerHandler('onConfigChanged', function(data,  
  
 responseCallback) { if(configChangedListener) { & nbsp; configChangedListener(data, responseCallback); } }  
  
 responseCallback); } &  
  
  
  
   
nbsp; }); callback(); }); } function  
 setupWebViewJavascriptBridge(callback) { if (window.WebViewJavascriptBridge) { return&  
 nbsp;callback(WebViewJavascriptBridge); } if (window.WVJBCallbacks) { return  
  
 window.WVJBCallbacks.push(callback); } window.WVJBCallbacks = [callback]; &  
 nbsp;var WVJBIframe = document.createElement('iframe'); WVJBIframe.style.display&  
  
 nbsp;= 'none'; WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__'; &nbsp  
; document.documentElement.appendChild(WVJBIframe); setTimeout(function() { document.  
  
   
   
  
  
 documentElement.removeChild(WVJBIframe);}, 50); } /** * Вызов метода входа в APP * Выполните процесс входа в APP по умолчанию, не нужно вызывать интерфейс  
  
  
  
 интерфейс loginSuccess * @param params * { * имя пользователя: '1', *  
  
  
  
пароль: '1', * autoLogin: false * } */ function&  
  
 nbsp;login(params) { if(jsBridge) { jsBridge.  
   
 callHandler('loginServer', { 'params': params }, function(response) { &  
  
  
   
  
  
 nbsp; }); } } /** * Интерфейс вызова успешного входа * Если был реализован пользовательский процесс входа в систему и результат входа получен от FR-платформы, то вызывайте этот метод напрямую, в противном случае вызывать этот метод не нужно.  
  
  
  
 * @param data string type; is FR platform/login request return result */ function loginSuccess(data) { &  
 nbsp; if(jsBridge) { jsBridge.callHandler('onLoginSuccess',  
   
  
 { data: data }, function(response) { });  
  
   
  
  
  
  
  
 } } /** * Переход на vpn-страницу */ function route2Vpn() { if(jsBridge) { &  
 nbsp; jsBridge.callHandler('route2Vpn', {}, function(response) { &   
  
  
  
   
  
  
  
nbsp; }); } } /** * Переход к списку серверов */ function&  
  
 nbsp;route2Server() { if(jsBridge) { jsBridge.  
   
 callHandler('route2Server', {}, function(response) { }  
  
  
   
  
  
  
  
 ); } } /** * Переход на страницу забытого пароля */ function route2ForgetPassword() { &  
 nbsp;if(jsBridge) { jsBridge.callHandler('route2ForgetPassword',  
   
  
  
  
   
  
 {}, function(response) { }); } } /** &  
  
  
  
  
 nbsp;* Получение информации о конфигурации * @param callback * * Пример обратного вызова, возвращающего информацию о конфигурации: * { *  
  
  
 showForgetPassword: true, * showEditServer: true, * showVpn: true, &nbsp  
  
  
;* logoUrl: 'http://xxx', * logoTitle: 'title' * } &nbsp  
  
  
;*/ function getConfigs(callback) { if(jsBridge) { &  
 nbsp; jsBridge.callHandler('getConfigs', {}, function(response) { &  
 nbsp; if(callback) { &  
  
 nbsp; callback(JSON.parse(response)); } &  
  
  
   
  
  
 nbsp; }); } } /** * Зарегистрируйте слушатель для возврата приложения на страницу входа, обратный вызов будет выполнен, когда приложение вернется на страницу входа &  
  
  
 nbsp;* @param callback */ function registerBackLoginListener(callback) { if(  
 jsBridge) { jsBridge.registerHandler('backToLogin', function(data  
  
, cb) { if(callback) { &  
 nbsp; callback();  
  
  
   
} }); } }

3.1.2 Создание нового HTML-файла

Создайте новый HTML-файл. (Описание интерфейса для вызова HTML-файлов см. в разделе 3.4).

Вызов JS-файла из HTML-файла осуществляется следующим образом:

<script type="text/javascript" src=".   
  
  
 /JSBridgeInterface.js"></script> //Введите файл JSBridgeInterface.js <script> //Инициализируйте окружение &  
  
 nbsp; init(function() { //вызов интерфейса в методе обратного вызова &  
 nbsp; login({username: '1', password: '1', autoLogin: false}); &  
 nbsp; }) </script>

Чтобы помочь пользователям создавать HTML-файлы, в этой статье приведен пример файла, к которому можно обратиться. Скачать: ExampleApp.md

3.2 Размещение документов

Поместите файл AppInterface.js и только что созданный HTML-файл в одну и ту же директорию в вашем проекте.

Например, создайте новую папку login в webroot и поместите AppInterface.js и Login.md по пути %FineBI%\webapps\webroot\login, как показано ниже:

3.3 Настройка пользовательской страницы входа в систему

Администратор входит в систему FineBI, открывает "System Management > Мобильная платформа > Конфигурация APP > Настройки входа ", выбирает "Настроенная страница входа" для "Способа входа", вводит соответствующий URL и "Сохранить". Как показано на рисунке ниже:

Пример URL-адреса: http: //secure.finedevelop.com:63778/webroot/login/Login.md

Примечание: URL - это абсолютные пути, начинающиеся с http/https, относительные пути не поддерживаются.

自定义.png

После настройки страницы входа в App результат показан ниже:

企业微信截图_35363d9b-3430-4825-9b3b-c2e4dca3c192.png

3.4 Описание интерфейса

3.4.1 Типы интерфейсов

Встроенная страница входа включает в себя учетную запись, автоматический вход, забыли пароль, сервер и другие функции, обеспечивая интерфейсы, чтобы облегчить гибкие комбинации для клиентов. Мы предоставляем два типа интерфейсов:

1) Интерфейс, предоставляющий информацию о конфигурации.

Возвращаемое значение - это изображение логотипа, заголовок, поддержка vpn/сервера/забытого пароля и другое содержимое конфигурации, пользователь в зависимости от результатов возврата интерфейса динамически настраивает отображение страницы входа.

2) Предоставьте интерфейс для запуска действий App.

Например, вход в систему, обратный вызов успешного входа, переход на страницу vpn/сервера/забытого пароля и т. д., при вызове которых пользователь обратится к интерфейсу, вызовет приложение для выполнения действия.

3) Предоставьте интерфейс для прослушивания действий App.

Если вы прослушиваете действие возврата приложения на страницу входа, обратный вызов слушателя будет вызван после того, как приложение вернется на страницу входа.

3.4.2 Описание интерфейса

1) Предоставьте интерфейс для получения информации о конфигурации

имя интерфейса	описание интерфейса	параметрический	Описание параметров	возвращаемое значение
getConfigs	Получает элемент конфигурации отображения страницы входа в систему, который позволяет пользователям выборочно отображать элементы, связанные со страницей входа в систему, на основе информации о конфигурации.	обратный вызов (функция)	Возврат элементов конфигурации, отображаемых на странице входа в систему, через обратный вызов	Возвращается через обратный вызов { logoUrl : '', //адрес изображения логотипа logoTitle : '', //заголовок логотипа showVpn : true, //Если поддерживается vpn showEditServer : true, //Если поддерживается сервер редактирования showForgetPassword //поддерживается ли забывание пароля }

2) Предоставить интерфейс для запуска действий приложения

имя интерфейса	описание интерфейса	параметрический	Описание параметров	возвращаемое значение
loginServer	Вход на сервер (Перейдите к стандартному процессу входа в APP)	params (объект)	{имя пользователя: '',//имя пользователяпароль: '',//passwordautoLogin: true, //нужен ли автологинcustomToken: 'xxx' // пользовательская информация для аутентификации (этот ключ может быть настроен и требует плагина для работы с бэкэндом)}	-
onLoginSuccess	Вызовите этот интерфейс после успешного входа в систему(Проходит через индивидуальный процесс входа в систему)	данные (объект)	Возвращаемое значение запроса /login должно быть передано этому интерфейсу.	-
route2Vpn	Перейти на страницу VPN	-	-	-
route2Server	Список серверов перехода	-	-	-
route2ForgetPassword	Перейти к разделу Забыли пароль	-	-	-

3) Предоставьте интерфейс для прослушивания действий App.

имя интерфейса	описание интерфейса	параметры	Описание параметров	возвращаемое значение
registerBackLoginListener	Этот интерфейс вызывается, когда приложение возвращается на страницу входа в систему.	-	-	-

4. Примеры идей развития

4.1 Сцена 1

Сценарий 1: Настройте только пользовательский интерфейс страницы входа и продолжайте использовать стандартный процесс входа в приложение.

Мысли:

Вызовите интерфейс входа в систему, когда вам нужно войти в систему и передать имя пользователя, пароль, autoLogin и другие параметры.

Ссылка на HTML-файл приведена ниже:

  
  
  
 //Инициализация окружения init(function() { //В методе обратного вызова можно прослушать нажатие кнопки и вызвать интерфейс входа для авторизации login({username: &#39  
;1', password: '1', autoLogin: false}); })

4.2 Сцена 2

Сценарий 2: Независимая платформа SMS-аутентификации для входа в систему.

Мысли:

1) SMS-верификация на независимую платформу;

2) После успешной проверки можно получить информацию об аутентификации, например customToken, этот параметр содержит информацию об имени пользователя платформы FR;

3) Возьмите customToken в качестве параметра и вызовите интерфейс входа в систему, чтобы APP выполнил вход в систему, при этом вход в систему APP примет этот пользовательский параметр;

4) Бэкенд FR разрабатывает плагин, который перехватывает запрос на вход/логин, считывает информацию о пользователе в customToken и завершает вход в платформу FR.

Ссылка на HTML-файл приведена ниже:

  
  
 //Инициализируем окружение init(function() { //SMS-аутентификация, получаем информацию об аутентификации, содержащую имя пользователя FR, например customToken. процесс опущен.  
 //.....   
   
  
  
// Вызываем метод login и передаем customToken login({customToken}); })

Разработка внутренних плагинов:

1) Сначала перехватите запрос /login;

2) Прочитайте параметр в теле, который является customLogin, и разберите имя пользователя;

3) Затем вставьте информацию об имени пользователя обратно в поля имени пользователя и пароля в теле, отпустите запрос, и вы сможете войти в систему.

5. часто задаваемые вопросы

В: Я не хочу вводить пароль пользователя каждый раз, когда настраиваю страницу входа, но хочу, чтобы он автоматически заполнялся при следующем запуске, как с этим быть?

A：Вы можете использовать метод localStorage.setItem('username', '1111') для сохранения информации о пользователе, а также прочитать информацию о пользователе через localStorage.getItem('username') и заполнить ее при следующей инициализации. Подробности см. в примере ExampleApp.md.

Q：Как поступить с приложением, когда оно возвращается на страницу входа в систему и хочет, чтобы страница входа в систему очистила пароль для безопасности?

Ответ: Вызовите интерфейс registerBackLoginListener(callback) для прослушивания APP для возврата на страницу входа, и пароль может быть очищен при выполнении обратного вызова.