[App]登入頁

1.1 版本

1.2 功能簡介

管理者在數據決策系統開啟「管理系統>行動平台>App配置>登入設定」，即可設定登入頁。如下圖所示：

登入方式有兩種「內建登入頁」和「自訂登入網頁」，預設為「內建登入頁」。

注：暫不支援APP登入頁面國際化。

預設情況下是「內建登入頁」。登入 App 時的效果如下圖所示：

點選「管理系統>行動平台>App設定>登入設定>登入方式」的「內建登入頁」並「儲存」，成功設定為內建登入頁。如下圖所示：

使用者的場景需求多樣，如：

• 實現個性化的介面；

• 在使用帳號密碼登入的基礎上，增加圖片檢驗碼、滑塊驗證等其他驗證方式；

• 不走帳號密碼登入，自訂登入邏輯（如自己的簡訊驗證流程）等。

可以選擇「自訂登入網頁」，設定自訂 App 登入頁面。

3.1 建立檔案

首先，使用者需要自訂登入網頁面。

注：關於自訂登入介面的API說明參考本文 3.4 節。

3.1.1 下載 JS檔案

為了方便使用者開發，省去 JSBridge 初始化以及傳遞複雜的參數，官方提供一個封裝好API的 JS 檔案。

下載地址：JSBridgeInterface.js

程式碼如下所示：

var configChangedListener = null;
var jsBridge = null;
 
/**
 * 初始化環境(必須先呼叫此方法，在callback回呼中再呼叫其他API)
 * @param callback
 */
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);
}
 
 
/**
 * 呼叫APP的登入方法
 * 走APP預設登入流程，無需呼叫loginSuccessAPI
 * @param params
 * {
 *    username: '1',
 *    password: '1',
 *    autoLogin: false
 * }
 */
function login(params) {
    if(jsBridge) {
        jsBridge.callHandler('loginServer', { 'params': params }, function(response) {
 
        });
    }
}
 
/**
 * 登入成功呼叫API
 * 如已經實現了自訂登入流程，並從FR平台獲取了登入結果則直接呼叫此方法，否則無需呼叫此方法。
 * @param data  string類型;是FR平台/login請求傳回結果
 */
function loginSuccess(data) {
    if(jsBridge) {
        jsBridge.callHandler('onLoginSuccess', { data: data }, function(response) {
 
        });
    }
}
 
/**
 * 跳轉vpn頁面
 */
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) {
 
        });
    }
}
 
/**
 * 獲取配置資訊
 * @param callback
 *
 * callback傳回配置資訊範例：
 * {
 *   showForgetPassword: true,
 *   showEditServer: true,
 *   showVpn: true,
 *   logoUrl: 'http://xxx',
 *   logoTitle: 'title'
 * }
 */
function getConfigs(callback) {
    if(jsBridge) {
        jsBridge.callHandler('getConfigs', {}, function(response) {
            if(callback) {
                callback(JSON.parse(response));
            }
        });
    }
}
 
/**
 * 註冊APP傳回登入頁的監聽，APP傳回登入頁時會執行callback
 * @param callback
 */
function registerBackLoginListener(callback) {
    if(jsBridge) {
        jsBridge.registerHandler('backToLogin', function(data, cb) {
            if(callback) {
                callback();
            }
        });
    }
 
}
显示代码

3.1.2 建立 HTML 檔案

建立 HTML 檔案。（關於 HTML 檔案呼叫的相關API說明參考 3.4 節）

關於 HTML 檔案呼叫 JS 檔案的方法如下：

<script type="text/javascript" src="./JSBridgeInterface.js"></script>  //引入JSBridgeInterface.js檔案
<script>
    //初始化環境
    init(function() {
        //回呼方法中呼叫API
        login({username: '1', password: '1', autoLogin: false});
    })
</script>

為了幫助使用者建立 HTML 檔案，本文提供一個範例檔案供使用者參考。下載地址：ExampleApp.html

3.2 放置檔案

將 AppInterface.js檔案和建立好的 HTML 檔案放置在工程裏的同級目錄下。

例如，在 webroot 下建立 login 資料夾，並將 AppInterface.js 和 Login.html 放置在路徑%FR_HOME%\webapps\webroot\login中，如下圖所示：

3.3 設定自訂登入網頁

開啟「管理系統>行動平台>App設定>登入設定>登入方式」選擇「自訂登入網頁」，輸入對應的 URL 並「儲存」。如下圖所示：

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

 注：URL為 http/https 開頭的絕對路徑，不支援相對路徑。

自訂 APP 登入頁面後，效果如下圖所示：

注：效果圖需要自己開發，文檔給的範例檔案不能實現該效果。

3.4 API說明

3.4.1 API類型

內建登入頁包括帳號、自動登入、忘記密碼、伺服器等功能，提供API以方便客戶靈活組合。我們會提供兩類API：

1）提供配置資訊的API。

回傳值為 logo圖片、標題、是否支援 vpn/伺服器/忘記密碼等配置內容，使用者根據API傳回結果動態調整登入頁面顯示。

2）提供觸發 App 動作的API。

如登入、登入成功回呼、跳轉 vpn/伺服器/忘記密碼頁面等，使用者呼叫API後會觸發 App 執行動作。

3）提供監聽App動作的API。

如監聽App傳回登入頁的動作，App傳回登入頁後，會觸發監聽回呼。

3.4.2 API說明

1）提供獲取配置資訊的API

2）提供觸發 App 動作的API

3）提供監聽App動作的API。

4.1 場景1

場景1：只自訂登入網頁UI，仍然使用APP預設登入流程。

思路：

需要登入時呼叫loginAPI，並傳遞username、password、autoLogin等參數

HTML 檔案參考如下：

//初始化環境
init(function() {
    //回呼方法中，可監聽按鈕點選後呼叫loginAPI登入
    login({username: '1', password: '1', autoLogin: false});
})

4.2 場景2

場景2：獨立平台簡訊驗證實現登入。

思路：

1）向獨立的平台進行簡訊驗證驗證；

2）驗證成功後可能會拿到一個認證資訊，如customToken，此參數包含FR平台帳號資訊；

3）把customToken作為參數，呼叫loginAPI讓APP執行登入，APP登入就會帶上這個自訂參數；

4）FR後台開發一個插件，攔截登入請求/login，讀取customToken中的使用者資訊，完成FR平台登入。

HTML 檔案參考如下：

//初始化環境
init(function() {
    //簡訊驗證，拿到包含FR帳號的認證資訊，如customToken。程式略。
    //.....
 
    //呼叫login方法並傳遞customToken
    login({customToken});
})

後台插件開發：

• 先攔截/login請求

• 讀取body中的參數，也就是customLogin，解析出帳號

• 然後把帳號資訊重新塞到body中的username和password欄位，放行請求，即可實現登入

Q1：自訂登入網頁不想每次都輸入使用者密碼，下次啟動想自動填入，如何處理？

A：可使用localStorage.setItem('username', '1111')方法儲存使用者資訊，下次初始化時透過localStorage.getItem('username')讀取使用者資訊，並填入。詳見ExampleApp.html範例。

Q2：APP傳回登入頁時，想要登入頁清空密碼來保證安全，如何處理？

A：呼叫registerBackLoginListener(callback)API監聽APP傳回登入頁，執行callback回呼時可清空密碼。

• PC 端的自訂登入網頁和行動端的分別設定，互不影響。

• 暫不支援 APP 登入頁面國際化。