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
        }

oidc-client 在html页面的使用

推荐阅读