当前位置： 移动技术网 > IT编程>开发语言>.net > asp.net core系列 58 IS4 基于浏览器的JavaScript客户端应用程序

asp.net core系列 58 IS4 基于浏览器的JavaScript客户端应用程序

2019年04月20日  | 移动技术网IT编程  | 我要评论

爱q线报国际,忍不住 作文,电影天堂'

一. 概述

　　本篇探讨使用"基于浏览器的javascript客户端应用程序"。与上篇实现功能一样，只不过这篇使用javascript作为客户端程序，而非core mvc的后台代码httpclient实现。 功能一样：用户首先要登录identityserver站点，再使用identityserver发出的访问令牌调用we​​b api，可以注销identityserver站点下登录的用户，清除cookie中的令牌信息。所有这些都将来自浏览器中运行的javascript。

　　此示例还是三个项目：

　　　　identityserver令牌服务项目 http://localhost:5000

　　　　api资源项目 http://localhost:5001

　　　　javascript客户端项目 http://localhost:5003

　　开源github

 

二. identityserver项目

　　1.1 定义客户端配置

　　　　config.cs中，定义客户端，使用code 授权码模式，即先登录获取code,再获取token。项目其它处代码不变。

       public static ienumerable<client> getclients()
        {
            return new list<client>
            {
                // javascript client
                new client
                {
                    clientid = "js",
                    clientname = "javascript client",
                    //授权码模式
                    allowedgranttypes = granttypes.code,
                    //基于授权代码的令牌是否需要验证密钥,默认为false
                    requirepkce = true,
                    //令牌端点请求令牌时不需要客户端密钥
                    requireclientsecret = false,

                    redirecturis =           { "http://localhost:5003/callback.html" },
                    postlogoutredirecturis = { "http://localhost:5003/" },

                    //指定跨域请求,让identityserver接受这个指定网站的认证请求。
                    allowedcorsorigins =     { "http://localhost:5003" },

                    allowedscopes =
                    {
                        identityserverconstants.standardscopes.openid,
                        identityserverconstants.standardscopes.profile,
                        "api1"
                    }
                }
            };
        }

　　　　

三. api项目

　　在web api项目中配置 跨域资源共享cors。这将允许从http:// localhost:5003 (javascript站点) 到http:// localhost:5001 (api站点) 进行ajax调用(跨域)。项目其它处代码不变。

       public void configureservices(iservicecollection services)
        {
            services.addmvccore()
                .addauthorization()
                .addjsonformatters();

            services.addauthentication("bearer")
                .addjwtbearer("bearer", options =>
                {
                    options.authority = "http://localhost:5000";
                    options.requirehttpsmetadata = false;

                    options.audience = "api1";
                });

            //添加cors服务
            services.addcors(options =>
            {
                // this defines a cors policy called "default"
                options.addpolicy("default", policy =>
                {
                    policy.withorigins("http://localhost:5003")
                        .allowanyheader()
                        .allowanymethod();
                });
            });
        }
        public void configure(iapplicationbuilder app)
        {
            //添加管道
            app.usecors("default");
            app.useauthentication();
            app.usemvc();
        }

　　

四. javascript客户端项目

　　　　在项目中，所有代码都在wwwroot下，没有涉及到服务端代码，可以完全不用core程序来调用。目录如下所示：

　　　　其中添加了两个html 页(, callback.html),一个app.js文件，这些属于自定义文件。oidc-client.js是核心库。

 

　　4.1 index页面

　　　　用于调用登录、注销、和api。引用了oidc-client.js和app.js　

<body>
    <button id="login">login</button>
    <button id="api">call api</button>
    <button id="logout">logout</button>

    <pre id="results"></pre>

    <script src="oidc-client.js"></script>
    <script src="app.js"></script>
</body>

 　　

 　　4.2 app.js

　　　　是应用程序的主要代码，包括：登录、api请求，注销。配置与服务端代码差不多，如下所示：

/// <reference path="oidc-client.js" />

//消息填充
function log() {
    document.getelementbyid('results').innertext = '';

    array.prototype.foreach.call(arguments, function (msg) {
        if (msg instanceof error) {
            msg = "error: " + msg.message;
        }
        else if (typeof msg !== 'string') {
            msg = json.stringify(msg, null, 2);
        }
        document.getelementbyid('results').innerhtml += msg + '\r\n';
    });
}

document.getelementbyid("login").addeventlistener("click", login, false);
document.getelementbyid("api").addeventlistener("click", api, false);
document.getelementbyid("logout").addeventlistener("click", logout, false);

var config = {
    authority: "http://localhost:5000",
    client_id: "js",
    redirect_uri: "http://localhost:5003/callback.html",
    response_type: "code",
    scope:"openid profile api1",
    post_logout_redirect_uri : "http://localhost:5003/",
};
//usermanager类
var mgr = new oidc.usermanager(config);

//用户是否登录到javascript应用程序
mgr.getuser().then(function (user) {
    if (user) {
        log("user logged in", user.profile);
    }
    else {
        log("user not logged in");
    }
});

//登录
function login() {
    mgr.signinredirect();
}

//跨域请求api
function api() {
    mgr.getuser().then(function (user) {
        var url = "http://localhost:5001/identity";

        var xhr = new xmlhttprequest();
        xhr.open("get", url);
        xhr.onload = function () {
            log(xhr.status, json.parse(xhr.responsetext));
        }
        xhr.setrequestheader("authorization", "bearer " + user.access_token);
        xhr.send();
    });
}

//注销
function logout() {
    mgr.signoutredirect();
}

 　　4.3 callback.html

　　　　用于完成与identityserver的openid connect协议登录握手。对应app.js中config对象下的redirect_uri: "http://localhost:5003/callback.html"。登录完成后，我们可以将用户重定向回主页面。添加此代码以完成登录过程

<body>
    <script src="oidc-client.js"></script>
    <script>
        new oidc.usermanager({ response_mode: "query" }).signinredirectcallback().then(function () {
            window.location = "";
        }).catch(function (e) {
            console.error(e);
        });
    </script>
</body>

 

五 测试

　　(1) 启动identityserver程序http://www.lhsxpumps.com/_localhost:5000

　　(2) 启动api程序http://localhost:5001。这二个程序属于服务端

　　(3) 启动javascriptclient程序 http://localhost:5003

　　(4) 用户点击login，开始握手授权，重定向到identityserver站点的登录页

　　(5) 输入用户的用户名和密码，登录成功。跳转到identityserver站点consent同意页面

　　(6) 点击 yes allow后，跳回到客户端站点http://localhost:5003/，完成了交互式身份认证。

　　(7) 调用点击call api按钮，获取访问令牌，请求受保护的api资源。调用callapi 时，是访问的api站点http://www.lhsxpumps.com/_localhost:5001/identity。

 

参考文献

　　添加javascript客户端

 

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网