1、引入插件oidc-client.min.js,配置地址
var obj = { //登錄配置信息 authority: 'www.renzheng.com'//認證地址, client_id: 'appkey', redirect_uri: 'http://localhost:1233?callback=1', post_logout_redirect_uri: 'http://localhost:1233/', }
使用
var Oidc = window.Oidc var mgr = new Oidc.UserManager({ authority: authority, //授權中心,需要對接相應的公司的IT安全童鞋 client_id: client_id, //項目的id需要后端配置 redirect_uri: redirect_uri, // sso授權成功之后的跳轉路由,在這個路由,我們需要做重定向處理 response_type: 'id_token token', post_logout_redirect_uri: post_logout_redirect_uri, scope: 'openid profile email phone address userDetail Performance', })
2、index頁面添加加載頁面和回調處理邏輯
var callback = getUrlParam('callback') || ''; if (callback == 1) { //執行回調 getUserjwt() } else { var loginuser var id_token = window.localStorage.id_token if (id_token == undefined || id_token == 'null' || id_token == null) { signinRedirectCallback() } else { LoadIndex()//正常加載頁面、目錄首頁等信息 } //點擊左側菜單欄目監聽 $('.layuimini-menu-left').on("click", function (e) { if (id_token == undefined || id_token == 'null' || id_token == null) { signinRedirectCallback() } }); //登錄重定向處理 async function signinRedirectCallback() { await mgr.signinRedirect() //執行重定向 } //登出處理 $("#loginOut").click(function () { //window.location = 'page/login-1.html'; signoutRedirectCallback() }) //登出重定向處理 async function signoutRedirectCallback() { userCookie.DeleteCookie('LoginUser') window.localStorage.removeItem('UserJwt') window.localStorage.removeItem('id_token') await mgr.signoutRedirect({ 'id_token_hint': id_token }) } } //解析jwt async function getUserjwt() { var callbackUserInfo = await mgr.signinRedirectCallback() var jwt = callbackUserInfo.access_token var id_token = callbackUserInfo.id_token if (!jwt) { return; } //解析jwt令牌 console.log(jwt)
var userInfoData = jwt_decode(jwt)
window.localStorage.setItem('jwt', jwt) window.localStorage.setItem('id_token', id_token) // var user = await mgr.getUser() window.location.href = 'http://' + window.location.host }