B07-06 APP登入頁

1. 管理者在資料決策系統進入【管理系統】→【行動平臺】→【登入頁】，即可設定登入頁。

2. 登入方式有兩種【內建登入頁】和【自訂登入網頁】，預設為【內建登入頁】。如下圖所示。

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

1. 預設情況下是【內建登入頁】。登入 App 時的效果如下圖1所示。

2. 點擊【登入頁】下的【內建登入頁】並【儲存】，成功設定為內建登入頁。如下圖2所示。

1

【自訂登入網頁】。

1. 使用者的場景需求多樣，如：實現個性化的介面；在使用帳號密碼登入的基礎上，增加圖片驗證碼、滑塊驗證等其他驗證方式；不走帳號密碼登入，自訂登入邏輯（如自己的簡訊驗證流程）等。可以選擇【自訂登入網頁】，設定自訂 App 登入頁面。

2. 首先，使用者需要自訂登入網頁面。關於自訂登入介面的 API 說明參考本文第四部分。

3. 為了方便使用者開發，省去 JSBridge 初始化以及傳遞複雜的參數，官方提供一個封裝好 API 的 JS 檔案，如下代碼塊1所示。於文末可下載檔案。檔案名稱為 JSBridgeInterface.js 。

4. 建立 HTML 檔案。關於 HTML 檔案喚起的相關 API 說明參考參考本文第四部分。關於 HTML 檔案喚起 JS 檔案的方法如下代碼塊2所示。於文末可下載完整檔案。檔案名稱為 ExampleApp.html 。

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預設登入流程，無需喚起loginSuccess API 。
 * @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();
            }
        });
    }
 
}

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

2

放置檔案。

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

2. 例如，在 webroot 下建立 login 檔案夾，並將 JSBridgeInterface.js 和 Login.html 放置在路徑 %FR_HOME%\webapps\webroot\login 中，如下圖所示。

3

設定自訂登入網頁。

1. 【登入頁】選擇【自訂登入網頁】，輸入對應的 URL： http://secure.finedevelop.com:65081/webroot/login/Login.html，點擊【儲存】。如下圖1所示。

2. 自訂APP登入頁面後即可看到頁面效果。注意：代碼內容與圖2所示效果不一致。

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

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

1

提供配置資訊的 API 。

1. 返回值為 logo 圖片、標題、是否支援 vpn/伺服器/忘記密碼等配置內容，使用者根據  API  返回結果動態調整登入頁面顯示。具體資訊如下表格所示。

2

提供觸發 App 動作的 API 。

1. 如登入、登入成功回呼、跳越 vpn/伺服器/忘記密碼頁面等，使用者喚起 API 後會觸發 App 執行動作。具體資訊如下表格所示。

3

提供監聽App動作的 API 。

1. 如監聽App返回登入頁的動作，App返回登入頁後，會觸發監聽回呼。具體資訊如下表格所示。

1

場景1。

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

2. 思路：需要登入時喚起login API ，並傳遞username、password、autoLogin等參數。HTML 檔案參考如下。

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

場景2。

1. 場景：獨立平臺簡訊驗證實現登入。

2. 思路：①向獨立的平臺進行簡訊驗證驗證；②驗證成功後可能會拿到一個認證資訊，如customToken，此參數包含FR平臺帳號資訊；③把 customToken 作為參數，喚起 login API 讓APP執行登入，APP 登入就會帶上這個自訂參數；④FR後臺開發一個插件，攔截登入請求/login，讀取customToken中的使用者資訊，完成FR平臺登入。HTML 檔案參考如下。

3. 後臺插件開發：①先攔截 /login 請求。②讀取 body 中的參數，也就是 customLogin ，決議出帳號。③然後把帳號資訊重新塞到 body 中的 username 和 password 欄位，放行請求，即可實現登入。

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

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

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

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

2. A：喚起registerBackLoginListener(callback) API 監聽APP返回登入頁，執行callback回呼時可清空密碼。

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

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

1. 點擊下載檔案。

APP自訂登入頁.rar