OIDC擴展1：JS調用掃碼登錄
調用說明
//Url中的換行僅為了提高可讀性，實際代碼中應去掉。
<script src="https://sso.foxconn.com/lib/jquery/dist/jquery.min.js"></script>
<script src="https://sso.foxconn.com/Civet/JsLogin?
client_id=[您的client_id]&
redirect_uri=[跳轉地址]&
scope=[Scope，至少包含：openid]&
state=[可為空]
"></script>
<script>
var hsso_options = {
scanPrompt: "相信掃一掃快速登錄",
imgSize: 145,
imgMarginTop: 10,
imgMarginBottom: 20,
linkCommonLogin: true
};
var hsso = new BelieveSSO("#div1", hsso_options);
</script>
此功能必須引用jQuery 1.7版本或以上。
JS主要方法為： new BelieveSSO(selector, options);
-
selector
DOM對像選擇字符串，用來指定顯示二維碼容器。 -
options
配置參數，可以為空。json對像，可包含下列值，且均可以為空。-
scanPrompt提示用戶掃碼，默認值為“請使用相信「掃一掃」功能”。 -
refershPrompt刷新二維碼提示，默認值為“點擊刷新二維碼”。 -
s0Prompt用戶已掃碼的提示，默認值為“請在相信手機端確認登錄操作”。 -
s1Prompt相信手機端操作已完成時的提示，默認值為“中央授權中心正在登錄”。 -
imgSize二維碼圖片寬度，單位px，默認值為180。 -
imgMarginTop二維碼圖片上端空白高度，單位px，默認值為30。 -
imgMarginBottom二維碼圖片下端空白高度，單位px，默認值為30。 -
useDefaultCsss是否加載默認CSS樣式，默認值為 true。 -
linkCommonLogin是否鏈接通用登錄方式，默認值為 false。 -
commonLoginLabel通用登錄方式鏈接顯示的文字，默認為“其它登錄方式”。
-
效果如下
自定義樣式說明
HTML結構如下，您可以通過定義class來實現自定義樣式
<div class="sso-qrcode">
<div class="qrcode">
<img class="qr-img" src="{系統二維碼}" id="login-qrcode-image">
<div id="qrcode-timeout" style="display: none;">
<div class="refresh"></div>
<label>{刷新提示}</label>
</div>
</div>
<label id="scan-info"> {掃碼及狀態提示} </label>
<a href="{對應OIDC鏈接}" id="scan-link-common-login">{其它登錄方式}</a>
</div>
例如在您的界面上定義如下CSS。
套用如下樣式 去掉自定義樣式