APP Login Page

1. version

2. Function introduction

The administrator opens the Manage>Mobile Platform>Login Page in the Decision-Making Platform to set the login page. As shown below:

There are two login methods: Built-in login page and Custom login page, the default is Built-in login page.

The default is Built-in login page. The effect when logging in to the App is shown in the figure below:

Click Built-in Login Page under Login Page and Save to successfully set it as a built-in login page. As shown below:

The user's scene needs are diverse, such as:

• Realize a personalized interface;

• On the basis of using the user name and password to log in, add image verification code, slider verification and other verification methods;

• Login without username and password, customize login logic (such as your own SMS verification process), etc.

You can select Custom Login Page to set a custom App login page.

1. New file

First, the user needs to customize the login page.

Note: Refer to section III.4. of this article for the interface description of the custom login interface.

1)Download JS file

In order to facilitate user development, save JSBridge initialization and pass complex parameters, the official provides a JS file that encapsulates the interface.

Download link: 

JSBridgeInterface.zip

The code is as follows:

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();
            }
        });
    }
 
}

2)New HTML file

Create a new HTML file. (Refer to Section 3.4 for the related interface description of HTML file call)

The method for calling JS files from HTML files is as follows:

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

To help users create HTML files, this article provides a sample file for users' reference. Download link: 

ExampleApp.zip

2. Place files

Place the JSBridgeInterface.js file and the newly created HTML file in the same directory in the project.

For example, create a new login folder under webroot, and place JSBridgeInterface.js and ExampleAPP.html in the path %FR_HOME%\webapps\webroot\help, as shown in the following figure:

3. Set up a custom login webpage

Open Manage>Mobile Platform>Login Page and select Custom Login Page, enter the corresponding URL and Save. As shown below:

Note: The URL is an absolute path starting with http/https, and relative paths are not supported.

After customizing the APP login page, the effect is as shown in the figure below:

Note: The renderings need to be developed by yourself, and the sample files given in the document cannot ensure to achieve this effect.

4. Interface description

1)Interface type

The built-in login page includes functions such as account number, automatic login, forgotten password, server, etc., and provides an interface to facilitate the flexible combination of customers. We will provide two types of interfaces:

• Provide an interface for configuring information

  The return value is the logo image, title, whether to support vpn/server/forgot password and other configuration content. The user dynamically adjusts the login page display according to the interface return result.

• Provide an interface for triggering App actions.

  For example, login, login success callback, jump to the vpn/server/forgot password page, etc., after the user calls the interface, the App will be triggered to perform actions.

• Provide an interface for monitoring App actions.

  For example, when the app is monitored for returning to the login page, the monitoring callback will be triggered after the app returns to the login page.

2)Interface description

1) Provide an interface for obtaining configuration information

2) Provide an interface for triggering App actions

3) Provide an interface for monitoring App actions.

1. Scene 1

Scenario 1: Only customize the login page UI and still use the APP default login process.

Ideas:

When you need to log in, call the login interface and pass parameters such as username, password, autoLogin, etc.

The HTML file reference is as follows:

init(function() {
    login({username: '1', password: '1', autoLogin: false});
})

2. Scene 2

Scenario 2: Independent platform SMS verification to achieve login.

Ideas:

1) Perform SMS verification to an independent platform;

2) After the verification is successful, you may get an authentication information, such as customToken, this parameter contains the user name information of the FR platform;

3) With customToken as a parameter, call the login interface to let the APP perform login, and the APP login will bring this custom parameter;

4) FR backend develops a plugin, intercepts the login request/login, reads the user information in customToken, and completes the FR platform login.

The HTML file reference is as follows:

init(function() {

    login({customToken});
})

Background plugin development:

• Intercept/login request first

• Read the parameters in the body, which is customLogin, and parse out the username

• Then re-fill the user name information into the username and password fields in the body, release the request, and then log in

Q1: I don't want to enter the user password every time in the customized login page, but I want to fill it in automatically next time I start it. How to deal with it?

A: The localStorage.setItem('username', '1111') method can be used to save user information, and the user information can be read and filled in through localStorage.getItem('username') during the next initialization. See the ExampleApp.html example for details.

Q2: When the APP returns to the login page, I want to clear the password on the login page to ensure security, how to deal with it?

A: Call the registerBackLoginListener(callback) interface to monitor the APP's return to the login page, and the password can be cleared when the callback is executed.

• The custom login page on the PC side and the separate settings on the mobile side do not affect each other