1. 概述
1.1 版本
FineBI 版本 | App 版本 | 功能變動 |
6.0 | V11.0.68 | - |
1.2 功能簡介
管理者登入FineBI系統,開啟「管理系統>行動平台>APP配置>登入設定」,即可設定登入頁。
登入方式有兩種「內建登入頁」和「自訂登入網頁」,默認為「內建登入頁」。如下圖所示:
注1:PC 端的自訂登入頁和行動端的分別設定,互不影響。
注2:暫不支援 APP 登入頁面國際化。
2. 內建登入頁
預設情況下是「內建登入頁」。登入 App 時的效果如下圖所示:
管理者登入FineBI系統,開啟「管理系統>行動平台>APP配置」,「登入設定」中「登入方式」選擇「內建登入頁」並「儲存」,成功設定為內建登入頁。如下圖所示:
3. 自訂登入網頁
使用者的場景需求多樣,如:
實現個性化的介面;
在使用帳號密碼登入的基礎上,增加圖片驗證碼、滑塊驗證等其他驗證方式;
不走帳號密碼登入,自訂登入邏輯(如自己的簡訊驗證流程)等。
可以選擇「自訂登入網頁」,設定自訂 App 登入頁面。
3.1 建立檔案
首先,使用者需要自訂登入頁面。
注:關於自訂登入介面的接口說明參考本文 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 放置在路徑%FineBI%\webapps\webroot\login中,如下圖所示:
3.3 設定自訂登入網頁
管理者登入FineBI系統,開啟「管理系統>行動平台>APP配置>登入設定」,「登入方式」選擇「自訂登入頁」,輸入對應的 URL 並「儲存」。如下圖所示:
範例的 URL 為:http://secure.finedevelop.com:63778/webroot/login/Login.html
注:URL為 http/https 開頭的絕對路徑,不支援相對路徑。
自訂 App 登入頁面後,效果如下圖所示:
3.4 API說明
3.4.1 介面類別型
內建登入頁包括帳號、自動登入、忘記密碼、伺服器等功能,提供API以方便客戶靈活組合。我們會提供兩類API:
1)提供配置資訊的API。
傳回值為 logo 圖片、標題、是否支援 vpn/伺服器/忘記密碼等配置內容,使用者根據API傳回結果動態調整登入頁面顯示。
2)提供觸發 App 動作的API。
如登入、登入成功回檔、跳轉 vpn/伺服器/忘記密碼頁面等,使用者呼叫API後會觸發 App 執行動作。
3)提供監聽 App 動作的API。
如監聽 App 傳回登入頁的動作,App傳回登入頁後,會觸發監聽回檔。
3.4.2 API說明
1)提供獲取配置資訊的API
API名 | API描述 | 參數 | 參數描述 | 傳回值 |
getConfigs | 獲取登入頁顯示配置項,使用者可根據配置資訊選擇性渲染登入頁相關元素。 | callback (function) | 透過callback來傳回登入頁顯示的配置項 | 透過callback傳回 { logoUrl : '', //logo圖片位址 logoTitle : '', //logo標題 showVpn : true, //是否支援vpn showEditServer: true, //是否支援編輯伺服器 showForgetPassword //是否支援忘記密碼 } |
2)提供觸發 App 動作的API
API名 | API描述 | 參數 | 參數描述 | 傳回值 |
loginServer | 登入伺服器 (走APP預設登入流程) | params (object) | { username: '',//帳號 password: '',//密碼 autoLogin: true, //是否走自動登入 customToken:‘xxx‘ //自訂認證資訊(這個key可以自訂,需要後臺插件進行配合) } | - |
onLoginSuccess | 登入成功後呼叫此API (走自訂登入流程) | data (object) | /login請求的傳回值,需要傳遞給此API | - |
route2Vpn | 跳轉 VPN 頁面 | - | - | - |
route2Server | 跳轉伺服器列表 | - | - | - |
route2ForgetPassword | 跳轉忘記密碼 | - | - | - |
3)提供監聽 App 動作的API。
API名 | API描述 | 參數 | 參數描述 | 傳回值 |
registerBackLoginListener | App 傳回登入頁時,會呼叫此API | - | - | - |
4. 開發思路範例
4.1 場景1
場景1:只自訂登入頁UI,仍然使用APP預設登入流程。
思路:
需要登入時呼叫login API,並傳遞username、password、autoLogin等參數
HTML 檔案參考如下:
//初始化環境
init(function() {
//回呼方法中,可監聽按鈕點選後呼叫login API登入
login({username: '1', password: '1', autoLogin: false});
})
4.2 場景2
場景2:獨立平台簡訊驗證實現登入。
思路:
1)向獨立的平台進行簡訊驗證驗證;
2)驗證成功後可能會拿到一個認證資訊,如customToken,此參數包含FR平台帳號資訊;
3)把customToken作為參數,呼叫login API讓APP執行登入,APP登入就會帶上這個自訂參數;
4)FR後臺開發一個插件,攔截登入請求/login,讀取customToken中的使用者資訊,完成FR平台登入。
HTML 檔案參考如下:
//初始化環境
init(function() {
//簡訊驗證,拿到包含FR帳號的認證資訊,如customToken。程式略。
//.....
//呼叫login方法並傳遞customToken
login({customToken});
})
後臺插件開發:
1)先攔截/login請求;
2)讀取body中的參數,也就是customLogin,解析出帳號;
3)然後把帳號資訊重新塞到body中的username和password欄位,放行請求,即可實現登入。
5. 常見問題
Q:自訂登入頁不想每次都輸入使用者密碼,下次啟動想自動填入,如何處理?
A:可使用localStorage.setItem('username', '1111')方法儲存使用者資訊,下次初始化時透過localStorage.getItem('username')讀取使用者信息,並填入。詳見ExampleApp.html範例。
Q:APP傳回登入頁時,想要登入頁清空密碼來保證安全,如何處理?
A:呼叫registerBackLoginListener(callback)API監聽APP傳回登入頁,執行callback回檔時可清空密碼。