oidc-client 在html頁面的使用


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
        }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM