Successfully!

Error!

You are viewing 10.0 help doc. More details are displayed in the latest help doc

APP Login Page

I. Overview

1. version

FineReport Version
App Version
10.0.17 10.4.986


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.

1.png


II. 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:

Login Page Default.png

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

3.png

III. Customize the login page

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.

4.png

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:

4.png


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.

6.png

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.

Login Page Demo.png


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

Interface name

Interface 

Description

Parameter

Parameter

 Description

Return Value
getConfigs

Gets the

configuration 

items displayed 

on the login page, and the user can 

selectively render the relevant 

elements of the 

login page 

according to the 

configuration 

information. 

 callback 

(function)

 Return the 

configuration

 items 

displayed on the 

login page 

through callback 

Return through callback

{

    logoUrl:'', 

    logoTitle:'', 

    showVpn: true, 

    showEditServer: true, 

    showForgetPassword

}


2) Provide an interface for triggering App actions

Interface name

Interface

 description

 Parameters

 Parameter

 description

 Return value
loginServer

login server

(Take the APP 

default login 

process)

params (object)

{

    username:'',

    password:'',

    autoLogin: 

true, 

    customToken: ‘xxx’ 

}


onLoginSuccess

Call this interface after successful

login(Take a 

custom login 

process)

data (object)

 /login request,

 which needs to 

be passed to this 

interface


route2Vpn

Jump to VPN

page

None None
route2ServerJump server listNoneNone
route2ForgetPassword 

Jump to forget

the password 

NoneNone

3) Provide an interface for monitoring App actions.

Interface name

 Interface

 description

Parameters

Parameter

 description

Return value
RegisterBackLoginListener

App will call this

interface when 

returning to the 

login page




IV. Examples of development ideas

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

V. Frequently Asked Questions

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.

VI. Matters needing attention

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


Attachment List


Theme: Fine Mobile
Already the First
Already the Last
  • Helpful
  • Not helpful
  • Only read

Doc Feedback