Question

我在自己的个人时间里进行了更多的JS开发，并为此创建了一种SDK来登录openID connect实现（非常基本，只有隐式流和代码流）。这篇文章是关于隐式流程的客户端JS。

我已成功创建了一个小型SDK，允许我启动登录请求，并监控弹出的已完成登录（或窗口关闭）。最后，我现在想要添加一个自定义事件，以便其他代码可以订阅并在发生这种情况时得到通知。我无法让这个工作。所以我的问题是，如果发布的代码我怎么能这样做，当然如果你有任何关于改进我的代码的建议，我会很乐意接受它们。

以下是代码：

var mysystemID = {
    authorizationURL:"MYRUL_TO_SERVER/oauth/v2/authorize",
    client_id:"MYCLIENTID",
    redirect_uri:window.location.protocol+"//"+window.location.host+"/callback",
    response_type:"id_token token",
    windowref : undefined,
    intervalID : null,
    access_token:"",
    id_token:"null",
    parser:document.createElement('a'),
     checkLogin : function(){
        if (this.windowref==undefined){
            return false;
        }
        if (this.windowref.closed){
            console.log("window closed")
            clearInterval(this.intervalID)
            this.intervalID=null
        }
        try{
            this.parser.href = this.windowref.location.href;
            if((this.parser.protocol + "//" +this.parser.host + this.parser.pathname) == this.redirect_uri)
            {
                console.log("login detected")
                clearInterval(this.intervalID)
                this.intervalID=null
                this.windowref.close() 
                var obj = {}
                var str = this.parser.hash.substring(1)
                $.each(str.split("&"),function(index,value){
                    var pieces = value.split("=")
                    obj[pieces[0]] = pieces[1]
                })
                console.log(obj)
                this.access_token = obj.token
                this.id_token = JSON.parse(atob(obj.id_token.split(".")[1]))
                // var event = new CustomEvent("my_login", {"detail":{"access_token":this.id_token}});
                // this.dispatchEvent(event);
                console.log(this.id_token)  
            }
        }catch(e){
            //do nothing
        }
    }
}
    mysystemID.login_process = function(){
        var scope = $('#scope').val() ||"openid"
        var uri = this.authorizationURL+"?response_type="+encodeURIComponent(this.response_type)
        +"&client_id=" + this.client_id +"&redirect_uri="+encodeURIComponent(this.redirect_uri) 
        +"&scope="+encodeURIComponent(scope)+"&nonce="+Math.floor( Math.random()*99999);
        console.log(uri)
        this.windowref = window.open(uri,
            "login with mysystem
 ID","width=400, height=600")
        if (this.windowref!=null){
            this.intervalID =  setInterval(this.checkLogin.bind(mysystemID),500)
        }
    }.bind(mysystemID)
    mysystemID.logout = function(){
        this.access_token = ""
        this.id_token = ""
    }.bind(mysystemID)
    mysystemID.isLoggedIn = function(){
        return this.access_token!=""
    }.bind(mysystemID)

一些注意事项，我依靠jquery来做一些事情。我像这样实例化它：

$(document).ready(function(){
   $('a#login_push').on("click",mysystemID.login_process)
});

在代码中，您可以看到我对此事件的尝试：

// var event = new CustomEvent("my_login", {"detail":{"access_token":this.id_token}});
// this.dispatchEvent(event);

听众被链接到

$(document).ready(function(){
       $('a#login_push').on("click",mysystemID.login_process).on("my_login",function(e,data){console.log('logged in fired')});
});

如何将自定义事件添加到Javascript“SDK”

0 个答案: