IdentityServer4-前后端分离的授权验证（六）

上两节介绍完Hybrid模式在MVC下的使用，包括验证从数据获取的User和Claim对MVC的身份授权。本节将介绍Implicit模式在JavaScript应用程序中的使用，使用Node.js+Express构建JavaScript客户端，实现前后端分离。本节授权服务和资源服务器基于第四和第五节。

一、使用Node.js+Express搭建JavaScript客户端

（1）首先需要Node.js环境

下载并安装Node.js，官网下载地址：https://nodejs.org/en/

输入指令：node –v  检测是否已安装Node.js，已安装会显示安装的Node.js版本

（2）安装Express

打开cmd，输入指令：npm install express-generator –g

输入指令：express –h    已安装express会显示帮助文档

（3）新建文件，创建JavaScript_Client应用程序

新建文件夹（在D盘新建Express文件夹），cmd进入该文件夹。

输入：express JavaScript_Client     在当前目录下创建一个名为JavaScript_Client的应用。目录结构如下：

（4）安装依赖包

输入：cd JavaScript_Client   进入JavaScript_Client目录

输入：npm install   安装依赖包

（5）启动并测试项目

输入：npm start

浏览器打开：http://localhost:3000

看到以下页面证明成功了。

二、添加JavaScript客户端测试代码

（1）安装oidc-client库

输入：npm install oidc-client –save

我们会发现在D:\express\JavaScript_Client\node_modules\oidc-client\dist  有两个js文件

我们只需使用这两个文件。把这两个文件复制到D:\express\JavaScript_Client\public\ javascripts 目录下

（2）添加测试用的HTML文件

使用VSCode打开JavaScript_Client文件夹，在public（D:\express\JavaScript_Client\public）下新建index.html文件。添加几个测试用的按钮。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <button id="login">Login</button>
    <button id="api">Call API</button>
    <button id="logout">Logout</button>

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

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

（3）添加测试的js文件

在public下新建app.js文件。

黏贴以下代码

/// <reference path=" javascripts/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: "id_token token",
    scope:"openid profile api1",
    post_logout_redirect_uri : "http://localhost:5003/index.html",
};
var mgr = new Oidc.UserManager(config);

mgr.getUser().then(function (user) {
    if (user) {
        log("User logged in", user.profile);
    }
    else {
        log("User not logged in");
    }
});

function login() {
    mgr.signinRedirect();
}

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();
}

以下对app.js代码进行分析

App.js中log函数用来记录消息

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‘;
    });
}

使用oidc-client库中的UserManager类来管理OpenID连接协议。添加此代码以配置和实例化UserManager:

var config = {
    authority: "http://localhost:5000",
    client_id: "js",
    redirect_uri: "http://localhost:5003/callback.html",
    response_type: "id_token token",
    scope:"openid profile api1",
    post_logout_redirect_uri : "http://localhost:5003/index.html",
};
var mgr = new Oidc.UserManager(config);

接下来，UserManager提供一个getUser API来获取用户是否登录到JavaScript应用程序。返回的User对象有一个profile属性，其中包含用户的声明。添加此代码以检测用户是否登录到JavaScript应用程序:

mgr.getUser().then(function (user) {
    if (user) {
        log("User logged in", user.profile);
    }
    else {
        log("User not logged in");
    }
});

接下来，我们要实现登录、api和注销功能。UserManager提供登录用户的signinRedirect和用户登出的signoutRedirect。我们在上述代码中获得的用户对象还有一个access_token属性，可以使用该属性对web API进行身份验证。access_token将通过Bearer模式传递给Web API。添加以下代码在我们的应用程序中实现这三个功能:

function login() {
    mgr.signinRedirect();
}

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）再新建一个callback.html。一旦用户登录到IdentityServer，这个HTML文件就是指定的redirect_uri页面。它将完成OpenID Connect协议与IdentityServer的登录握手。这里的代码都由我们前面使用的UserManager类提供。登录完成后，我们可以将用户重定向回index.html页面。添加此代码完成登录过程:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script src=" javascripts/oidc-client.js"></script>
    <script>
        new Oidc.UserManager().signinRedirectCallback().then(function () {
            window.location = "index.html";
        }).catch(function (e) {
            console.error(e);
        });
    </script>
</body>
</html>

（8）修改服务端口为5003

三、修改授权服务配置，资源服务器允许跨域调用API

（1）修改授权服务配置

在AuthServer项目，打开Config.cs文件，在GetClients中添加JavaScript客户端配置

                // JavaScript Client
                new Client
                {
                    ClientId = "js",
                    ClientName = "JavaScript Client",
                    AllowedGrantTypes = GrantTypes.Implicit,
                    AllowAccessTokensViaBrowser = true,

                    RedirectUris = { "http://localhost:5003/callback.html" },
                    PostLogoutRedirectUris = { "http://localhost:5003/index.html" },
                    AllowedCorsOrigins = { "http://localhost:5003" },

                    AllowedScopes =
                    {
                        IdentityServerConstants.StandardScopes.OpenId,
                        IdentityServerConstants.StandardScopes.Profile,
                        "api1"
                    },
                }

（2）在资源服务配置允许跨域调用api

在ResourceAPI项目，打开Startup.cs文件中的ConfigureServices方法，配置CORS，允许Ajax调用从http://localhost:5003调用http://localhost:5001的Web API。

 //JS-allow Ajax calls to be made from http://localhost:5003 to http://localhost:5001.
            services.AddCors(options =>
            {
                //this defines a CORS policy called "default"
                options.AddPolicy("default", policy =>
                {
                    policy.WithOrigins("http://localhost:5003")
                        .AllowAnyHeader()
                        .AllowAnyMethod();
                });
            });

在Configure方法中将CORS中间件添加到管道中

 //JS-Add the CORS middleware to the pipeline in Configure:

            app.UseCors("default");

（3）添加测试用的api接口

添加IdentityController控制器

[Route("[controller]")]
    public class IdentityController : ControllerBase
    {
        [Authorize(Roles ="admin")]
        [HttpGet]
        public IActionResult Get()
        {
            return new JsonResult(from c in User.Claims select new { c.Type, c.Value });
        }
    }

（4）测试

运行AuthServer项目，运行ResourceAPI项目。

在VSCode终端输入：npm start

打开浏览器：http://localhost:5003/

点击Login，使用账号:zhubingjian 密码:123  登录

登录返回用户的Claims信息

点击Call API，调用资源服务器的API接口

成功获取接口返回的信息。


通过这六节的内容，大概地介绍了IdentityServer4中Client的应用场景，包括MVC、前后端分离和服务端。

此外还介绍了如何动态配置Client、如何验证从数据库中获取的User以及自定义Claims的方法。

这个系列对IdentityServer4的介绍也是我博客的起点，写博客虽然很花时间，但是可以帮助我加深对知识点的理解。然而文中也体现到我对某些知识点的理解还是不到位的，望大家见谅。

参考官网地址：https://identityserver4.readthedocs.io/en/release/quickstarts/7_javascript_client.html

授权服务和资源服务源码地址：https://github.com/Bingjian-Zhu/Mvc-HybridFlow.git

JavaScript客户端源码地址：https://github.com/Bingjian-Zhu/Identity-JavaScript_Client.git

原文地址：https://www.cnblogs.com/FireworksEasyCool/p/10197620.html

时间： 2024-10-10 04:37:44

IdentityServer4-前后端分离的授权验证（六）的相关文章

SpringBoot20 集成SpringSecurity02 -&gt; 利用SpringSecurity进行前后端分离的登录验证

1 SpirngBoot环境搭建 创建一个SpringBoot项目即可,详情参见三少的相关博文 参考博文 -> 点击前往 SpirngBoot项目脚手架 -> 点击前往 2 引入SpirngSecurity依赖 技巧01:引入了springSecurity相关依赖后,项目就会被SpringSecurity进行管理了:默认的登录名为user,登录密码会被打印到控制台上 技巧02:SpringSecurity默认的配置使用的是 <!--spring-security相关--> <

SpringBoot2.0.3 + SpringSecurity5.0.6 + vue 前后端分离认证授权

新项目引入安全控制 项目中新近添加了Spring Security安全组件,前期没怎么用过,加之新版本少有参考,踩坑四天,终完成初步解决方案.其实很简单,Spring Security5相比之前版本少了许多配置,操作起来更轻量 MariaDb登录配置加密策略 SpringSecurity5在执行登录认证时,需预设加密策略. 坑一:加密策略配置,验密始终不通过,报错401 坑二:本地重写的UserDetailsService实现类在注入的时候找不到,目前图省事直接用了 @Qualifier制定 其

django的crsf机制防御详解及在前后端分离中post数据到django-vue

django的crsf机制防御详解及在前后端分离中post数据到django 更新于: 2018-07-28 |  分类于 django CSRF(Cross Site Request Forgery) 跨站点伪造请求 某个用户已经登陆了你的网站,另外有一个恶意的网站有一个指向你网站的链接,那么当用户点击这个链接时,就会请求你的网站,但是你的网站以为是用户发来的请求,这时恶意网站就得逞了. django的应对措施 用户在post请求时,发送给用户一个token,然后在django内部实现了一个校

从壹开始前后端分离[.netCore 不定期 ] 36 ║解决JWT权限验证过期问题

缘起 哈喽,老张的不定期更新的日常又开始了,在咱们的前后端分离的.net core 框架中,虽然已经实现了权限验证<框架之五 || Swagger的使用 3.3 JWT权限验证[修改]>,只不过还是有一些遗留问题,最近有不少的小伙伴发现了这样的一些问题,本来想着直接就在原文修改,但是发现可能怕有的小伙伴看不到,就单发一条推送吧,所以我还是单写出一篇文章来说明解决这些问题,希望对无论是正在开发权限管理系统,还是平时需要数据库动态绑定权限分配的你有一些启发和思考.今天咱们注意解决这三个问题: 1.

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十六 ║ Vue前篇：ES6初体验 &amp; 模块化

缘起 昨天说到了<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇:JS对象&字面量&this>,通过总体来看,好像大家对这一块不是很感兴趣,嗯~~这一块确实挺枯燥的,不能直接拿来代码跑一下那种,不过还是得说下去,继续加油吧!如果大家对昨天的小demo练习的话,相信现在已经对JS的面向对象写法很熟悉了,如果嵌套字面量定义函数,如何使用this关键字指向.今天呢,主要说一下ES6中的一些特性技巧,然后简单说一下模块化的问题,好啦,开始今天的讲

前后端分离的思考与实践（六）

原文出处: 淘宝UED - 筱谷 Nginx + Node.js + Java 的软件栈部署实践 起 关于前后端分享的思考,我们已经有五篇文章阐述思路与设计.本文介绍淘宝网收藏夹将 Node.js 引入传统技术栈的具体实践. 淘宝网线上应用的传统软件栈结构为 Nginx + Velocity + Java,即: 在这个体系中,Nginx 将请求转发给 Java 应用,后者处理完事务,再将数据用 Velocity 模板渲染成最终的页面. 引入 Node.js 之后,我们势必要面临以下几个问题: 技

关于大型网站技术演进的思考（十六）--网站静态化处理—前后端分离—下（8）

我第一次听说nodejs技术大概是在2009年年末,不过我真正认真在网络上进一步了解nodejs还是在2010年年中,当时对nodejs的认识和我现在对nodejs的认识有着天壤的区别,开始想了解nodejs我只是为了感慨谷歌公司开发的V8引擎居然如此强大,它不仅仅可以作为chrome浏览器的javascript内核运行平台,居然还能为服务端使用javascript语言作为平台,通过对nodejs的了解让我认识到chrome浏览器是如此的优秀,但是如此相对的是我并不认为javascript作为服

【转】关于大型网站技术演进的思考（十六）--网站静态化处理—前后端分离—下（8）

我第一次听说nodejs技术大概是在2009年年末,不过我真正认真在网络上进一步了解nodejs还是在2010年年中,当时对nodejs的认识和我现在对nodejs的认识有着天壤的区别,开始想了解nodejs我只是为了感慨谷歌公司开发的V8引擎居然如此强大,它不仅仅可以作为chrome浏览器的javascript内核运行平台,居然还能为服务端使用javascript语言作为平台,通过对nodejs的了解让我认识到chrome浏览器是如此的优秀,但是如此相对的是我并不认为javascript作为服

分享一个前后端分离方案源码-前端angularjs+requirejs+dhtmlx 后端asp.net webapi

一.前言 半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家.关于前后端分离这个话题大家也谈了很久了,希望我这个实践能对大家有点点帮助,演示和源码都贴在后面. 二.技术架构 这两年angularjs和reactjs算是比较火的项目了,而我选择angularjs并不是因为它火,而是因它的模块化.双向数据绑定.注入.指令等都是非常适合架构较复杂的前端应用,而且文档是相当的全,碰到问题基本上可以在网上都找到答案.所以前端基本思路就以angularjs为主.代码模块化,通过requir