OIDC擴展功能1：JS調用掃碼登錄

OIDC擴展1：JS調用掃碼登錄

調用說明

2FA功能

//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 通用登錄方式鏈接顯示的文字，默認為“其它登錄方式”。
BelieveSSO對像方法getLoginInfo
獲得中央授權中心當前登錄的用戶信息，若有登錄信息直接跳至授權端點自動授權。使用此方法可解決Js掃碼需用戶重復掃碼問題。
此getLoginInfo方法使用了Cookie跨域讀取，目前在較寬鬆的安全策略下支持此功能。隨著各大瀏覽器的安全升級之后此功能可能無法使用。
【Google Chrome】为停用第三方 Cookie 做好准备
【Microsoft Edge】如何在浏览器中处理第三方 Cookie 阻止
【中央授權中心討論議題】標準地址的意義以及window.open方法是否可用？
```
<script>
   ... //接上段代碼
   hsso.getLoginInfo(function(data){
        //data 數據格式如下
       //{loggedIn: true, username: 'X000001', amr: ['qrcode', 'totp']} 
       ....
   });
</script>
```

效果如下

自定義樣式說明

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。
套用如下樣式去掉自定義樣式

body {
    background: url('https://icivetmedia.foxconn.com/group1/M00/71/07/CoaWx2SlFTCAVTIoAABlG0Wrt1Y467.jpg');
    background-size: cover;
    background-attachment: fixed;
}
.sso-qrcode {
    background-color: rgba(0, 0, 255, 0.4);
    width: 500px;
    border-radius: 5px;
    margin: 0 auto;
    padding: 10px;
    display: flex;
    align-items: flex-start;
    position: relative;
}
.qrcode::after {
    content: "";
    width: 30px;
    height: 30px;
    border-radius: 4px;
    border: 0.5px solid #dcdcdc;
    position: absolute;
    left: 45px;
    top: 45px;
    background-image: url(https://sso.foxconn.com/sso_v1/images/logo-h.svg);
    background-size: cover;
    z-index: 5;
    background-color: #fff;
}
    .sso-qrcode .qrcode {
        width: 120px;
        margin: 0;
    }
    .sso-qrcode #qrcode-timeout label {
        font-size: 12px;
    }
    .sso-qrcode .qr-img {
        border: 3px solid #FFF;
    }
    .sso-qrcode label {
        text-align: left;
        padding-left: 15px;
        color: #FFF;
    }
    .sso-qrcode #scan-link-common-login{
        color: #FFF;
        position: absolute;
        left: 145px;
        top: 80px;
        text-align: left;
    }

OIDC擴展1：JS調用掃碼登錄

調用說明

自定義樣式說明

[標題]