1.1 版本

1.2 功能简介

管理员在数据决策系统打开「管理系统>移动平台>登录页」，即可设置登录页。如下图所示：

登录方式有两种「内置登录页」和「自定义登录页」，默认为「内置登录页」。

注：暂不支持国际化。

默认情况下是「内置登录页」。登录 App 时的效果如下图所示：

点击「登录页」下的「内置登录页」并「保存」，成功设置为内置登录页。如下图所示：

用户的场景需求多样，如：

• 实现个性化的界面；

• 在使用用户名密码登录的基础上，增加图片验证码、滑块验证等其他验证方式；

• 不走用户名密码登录，自定义登录逻辑（如自己的短信验证流程）等。

可以选择「自定义登录网页」，设置自定义 App 登录页面。

3.1 新建文件

首先，用户需要自定义登录页面。

注：关于自定义登录界面的接口说明参考本文 3.4 节。

3.1.1 下载 JS文件

为了方便用户开发，省去 JSBridge 初始化以及传递复杂的参数，官方提供一个封装好接口的 JS 文件。

下载地址：JSBridgeInterface.js

代码如下所示：

var configChangedListener = null;
var jsBridge = null;
function init(callback) {
    setupWebViewJavascriptBridge(function(bridge) {
        jsBridge = bridge;
        bridge.registerHandler('onConfigChanged', function(data, responseCallback) {
            if(configChangedListener) {
                configChangedListener(data,responseCallback);
            }
        });
        callback();
    });
}

function setupWebViewJavascriptBridge(callback) {
    if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
    if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
    window.WVJBCallbacks = [callback];
    var WVJBIframe = document.createElement('iframe');
    WVJBIframe.style.display = 'none';
    WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function() { document.documentElement.removeChild(WVJBIframe);}, 50);
}

function login(params) {
    if(jsBridge) {
        jsBridge.callHandler('loginServer', { 'params': params }, function(response) {

        });
    }
}

function loginSuccess(data) {
    if(jsBridge) {
        jsBridge.callHandler('onLoginSuccess', { data: data }, function(response) {

        });
    }
}

function route2Vpn() {
    if(jsBridge) {
        jsBridge.callHandler('route2Vpn', {}, function(response) {

        });
    }
}

function route2Server() {
    if(jsBridge) {
        jsBridge.callHandler('route2Server', {}, function(response) {

        });
    }
}

function route2ForgetPassword() {
    if(jsBridge) {
        jsBridge.callHandler('route2ForgetPassword', {}, function(response) {

        });
    }
}

function getConfigs(callback) {
    if(jsBridge) {
        jsBridge.callHandler('getConfigs', {}, function(response) {
            if(callback) {
                callback(JSON.parse(response));
            }
        });
    }
}

function registerBackLoginListener(callback) {
    if(jsBridge) {
        jsBridge.registerHandler('backToLogin', function(data, cb) {
            if(callback) {
                callback();
            }
        });
    }

}

3.1.2 新建 HTML 文件

新建 HTML 文件。（关于 HTML 文件调用的相关接口说明参考 3.4 节）

关于 HTML 文件调用 JS 文件的方法如下：

<script type="text/javascript" src="./JSBridgeInterface.js"></script>  //引入JSBridgeInterface.js文件
<script>
    init(function() {
        login({username: '1', password: '1'});
    })
</script> 

为了帮助用户创建 HTML 文件，本文提供一个示例文件供用户参考。下载地址：ExampleApp.html

3.2 放置文件

将 AppInterface.js 文件和新建好的 HTML 文件放置在工程里的同级目录下。

例如，在 webroot 下新建 login 文件夹，并将 AppInterface.js 和 Login.html 放置在路径%FR_HOME%\webapps\webroot\login中，如下图所示：

3.3 设置自定义登录网页

打开「管理系统>移动平台>登录页」选择「自定义登录页」，输入对应的 URL 并「保存」。如下图所示：

示例的 URL 为：http://secure.finedevelop.com:65081/webroot/login/Login.html

 注：URL为 http/https 开头的绝对路径，不支持相对路径。

自定义APP登录页面后，效果如下图所示：

3.4 接口说明

内置登录页包括帐号、自动登录、忘记密码、服务器等功能，提供接口以方便客户灵活组合。我们会提供两类接口：

1）提供配置信息的接口。

返回值为 logo图片、标题、是否支持 vpn/服务器/忘记密码等配置内容，用户根据接口返回结果动态调整登录页面显示。

2）提供触发 App 动作的接口。

如登录、登录成功回调、跳转 vpn/服务器/忘记密码页面等，用户调用接口后会触发 App 执行动作。

接口说明：

App 暴露给自定义的 HTML 文件的接口：

自定义的 HTML 文件需要暴露给 App 的接口（可选）:

• PC 端的自定义登录页和移动端的分别设置，互不影响。

• 暂不支持国际化。