前面的部分：

Identity Server 4 从入门到落地（一）—— 从IdentityServer4.Admin开始

Identity Server 4 从入门到落地（二）—— 理解授权码模式

Identity Server 4 从入门到落地（三）—— 创建Web客户端

Identity Server 4 从入门到落地（四）—— 创建Web Api

Identity Server 4 从入门到落地（五）—— 使用Ajax 访问 Web Api

认证服务和管理的github地址： https://github.com/zhenl/IDS4Admin

客户端及web api示例代码的github地址：https://github.com/zhenl/IDS4ClientDemo

前面我们在Web应用的页面上使用Ajax访问Web Api, 这种情况下，认证以及获取Access Token还是在后台进行的，而真正的单页面应用没有后台的参与，web服务器只起到host文件的作用，这部分我们编写简单的单页面应用，试验一下单页面访问受认证保护的Web Api。

我们参考Identity Server 4的官网示例编写这个单页面应用，将其中的认证服务器改为我们本地运行的认证服务http://localhost:4010,Web Api使用前面编写的简单示例，地址为http://localhost:5153。在编写之前，首先下载oidc的客户端，可以从github下载： https://github.com/IdentityModel/oidc-client-js/releases/tag/1.11.5 。我们使用编译完成的最终文件，将下载的文件解压，dist目录就是我们需要的文件。

首先使用Visual Studio 2022创建一个空的Asp.Net Core Web项目，我们使用这个项目作为html和js文件的宿主，除此之外不做其它工作。在项目目录下创建wwwroot目录，用于保存html和js文件，将下载的dist目录拷贝到这个目录中，目录名字改为oidc-client-js-1.11.5。然后在wwwroot下创建index.html、callback.html和app.js三个文件，文件的内容在后面填写。项目的结构如下：



然后修改lanuchSettings.json，项目的运行地址是http://localhost:5210：

{

  "profiles": {

    "IDS4ClientJS": {

      "commandName": "Project",

      "dotnetRunMessages": true,

      "launchBrowser": true,

      "applicationUrl": "http://localhost:5210",

      "environmentVariables": {

        "ASPNETCORE_ENVIRONMENT": "Development"

      }

    }

  }

}

接下来修改program.cs，使应用支持静态文件：

var builder = WebApplication.CreateBuilder(args);

var app = builder.Build();

app.UseDefaultFiles();

app.UseStaticFiles();

app.Run();

这样修改后，项目将Index.html作为缺省页面。

然后就是修改Index.html、callback.html和app.js中的内容。

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="oidc-client-js-1.11.5/oidc-client.js"></script>

    <script src="app.js"></script>

</body>

</html>

内容很简单，就是创建三个按钮，分别是登录、登出和调用Api。所实现的功能在app.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:4010",

    client_id: "js",

    redirect_uri: "http://localhost:5210/callback.html",

    response_type: "code",

    scope: "openid profile myapi",

    post_logout_redirect_uri: "http://localhost:5210/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:5153/WeatherForecast";

        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使用oidc js客户端中定义的Oidc.UserManager实现对认证服务器的访问，完成认证和获取access token的工作，其配置在config 中定义，

var config = {

    authority: "http://localhost:4010",

    client_id: "js",

    redirect_uri: "http://localhost:5210/callback.html",

    response_type: "code",

    scope: "openid profile myapi",

    post_logout_redirect_uri: "http://localhost:5210/index.html",

};

最后，定义callback.html:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

</head>

<body>

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

    <script>

        new Oidc.UserManager({response_mode:"query"}).signinRedirectCallback().then(function() {

            window.location = "index.html";

        }).catch(function(e) {

            console.error(e);

        });

    </script>

</body>

</html>

到此，客户端编写完成，我们还需要在认证服务管理中定义这个客户端，注意，在定义时需要选择单页面应用：



参考上面config中的定义设置客户端的其它部分：





最后一项工作是修改Web Api，增加这个网址的CORS设置：

builder.Services.AddCors(option => option.AddPolicy("cors",

     policy => policy.AllowAnyHeader()

     .AllowAnyMethod()

     .AllowCredentials()

     .WithOrigins(new[] { "https://localhost:7002", "http://localhost:5210" })));

好了，现在可以测试一下这个应用了，在Visual Studio中将解决方案的启动项目设置为多项目启动，同时启动JSClient和Web Api项目：

按F5运行，界面如下：



点击Login，会重定位到认证服务器的登录界面,登录完成后会显示用户的信息：



点击Call Api，会访问Web Api并显示结果：



到此，单页面客户端完成。相关代码可以从github下载： https://github.com/zhenl/IDS4ClientDemo 。

Identity Server 4 从入门到落地（六）—— 简单的单页面客户端的更多相关文章

  1. Identity Server 4 从入门到落地（八）—— .Net Framework 客户端

    前面的部分: Identity Server 4 从入门到落地(一)-- 从IdentityServer4.Admin开始 Identity Server 4 从入门到落地(二)-- 理解授权码模式 ...

  2. Identity Server 4 从入门到落地（三）—— 创建Web客户端

    书接上回,我们已经搭建好了基于Identity Server 4的认证服务和管理应用(如果还没有搭建,参看本系列前两部分,相关代码可以从github下载:https://github.com/zhen ...

  3. Identity Server 4 从入门到落地（七）—— 控制台客户端

    前面的部分: Identity Server 4 从入门到落地(一)-- 从IdentityServer4.Admin开始 Identity Server 4 从入门到落地(二)-- 理解授权码模式 ...

  4. Identity Server 4 从入门到落地（九）—— 客户端User和Role的解析

    前面的部分: Identity Server 4 从入门到落地(一)-- 从IdentityServer4.Admin开始 Identity Server 4 从入门到落地(二)-- 理解授权码模式 ...

  5. Identity Server 4 从入门到落地（十）—— 编写可配置的客户端和Web Api

    前面的部分: Identity Server 4 从入门到落地(一)-- 从IdentityServer4.Admin开始 Identity Server 4 从入门到落地(二)-- 理解授权码模式 ...

  6. Identity Server 4 从入门到落地（十一）—— Docker部署

    前面的部分: Identity Server 4 从入门到落地(一)-- 从IdentityServer4.Admin开始 Identity Server 4 从入门到落地(二)-- 理解授权码模式 ...

  7. Identity Server 4 从入门到落地（十二）—— 使用Nginx集成认证服务

    前面的部分: Identity Server 4 从入门到落地(一)-- 从IdentityServer4.Admin开始 Identity Server 4 从入门到落地(二)-- 理解授权码模式 ...

  8. Identity Server 4 从入门到落地（五）—— 使用Ajax访问Web Api

    前面的部分: Identity Server 4 从入门到落地(一)-- 从IdentityServer4.Admin开始 Identity Server 4 从入门到落地(二)-- 理解授权码模式 ...

  9. Identity Server 4 从入门到落地（四）—— 创建Web Api

    前面的部分: Identity Server 4 从入门到落地(一)-- 从IdentityServer4.Admin开始 Identity Server 4 从入门到落地(二)-- 理解授权码模式 ...

随机推荐

  1. C++的指针使用心得

    使用C++有一段时间了,C++的手动内存管理缺失很麻烦,一不小心容易产生内存泄漏.自己总结了一点使用原则(不一定对),备注一下,避免忘记. 1.类外部传来的指针不处理 2.Qt对象管理的内存不处理 3 ...

  2. 『学了就忘』Linux基础 — 8、虚拟机网络模式说明

    目录 1.虚拟机网卡 2.网络连接模式对应工作的网卡 3.桥接模式说明 4.补充说明 这篇主要总结一下虚拟机网络配置中桥接模式.NAT模式和仅主机模式的区别. 打开VMware,选中虚拟机,点击网络适 ...

  3. Python | 实现pdf文件分页

    不知道大家有没有遇到过这么一种情况,就比如一个pdf格式的电子书,我们经常浏览的是其中的一部分,而这电子书的页数很大,每当需要浏览时,就需要翻到对应的页码,就有点儿繁琐. 还有一些情况,比如,我们想分 ...

  4. linux shell 函数返回值问题（超过255）

    最近再写一个shell测试的时候出现问题,函数返回值异常 用shell计算斐波那契数列数列,写了一个shell函数,然后调用的,验证的时候我只随便计算了几个数(10以内),确认结果是正确的就提交了,后 ...

  5. PTA 根据后序和中序遍历输出先序遍历 (25分)

    PTA 根据后序和中序遍历输出先序遍历 (25分) 本题要求根据给定的一棵二叉树的后序遍历和中序遍历结果,输出该树的先序遍历结果. 输入格式: 第一行给出正整数N(≤30),是树中结点的个数.随后两行 ...

  6. 事件消息生产消费中间件-OSS.DataFlow

    系统重构解耦的过程涉及不同领域服务分拆,或同一服务下实时响应部分和非响应部分分拆,分解后的各部分通过异步消息的流转传递,完成整体的业务逻辑,但是频繁的在业务层面直接调用不同消息队列的SDK,个人感觉不 ...

  7. MAC安装vue.js

    一.下载node node下载地址:https://nodejs.org/en/download/ 下载后点击安装即可. node -v 检查安装是否成功 二.安装 淘宝镜像 (npm) npm in ...

  8. C++ substr 的两个用法

    substr是C++语言函数,主要功能是复制子字符串,要求从指定位置开始,并具有指定的长度.   basic_string substr(size_type _Off = 0,size_type _C ...

  9. Docker多机网络

    前言 前面的文章主要聚焦于单机网络上,对于生产环境而言,单机环境不满足高可用的特点,所以是不具备上生产的条件,因此在开始Docker Swarm篇的时候我们先来聊聊多机网络之间Docker的通信如何做 ...

  10. scrapy获取当当网多页的获取

    结合上节,网多页的获取只需要修改 dang.py import scrapy from scrapy_dangdang.items import ScrapyDangdang095Item class ...