设为首页 加入收藏

TOP

IdentityServer4-前后端分离的授权验证(六)(一)
2019-09-17 17:02:59 】 浏览:66
Tags:IdentityServer4- 前后 分离 授权 验证

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


 

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

      (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)新建文件,创建java script_Client应用程序

       新建文件夹(在D盘新建Express文件夹),cmd进入该文件夹。

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

       

       (4)安装依赖包

       输入:cd java script_Client   进入java script_Client目录

       输入:npm install   安装依赖包

       

       (5)启动并测试项目

       输入:npm start

       

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

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

       


 

二、添加java script客户端测试代码

      (1)安装oidc-client库

       输入:npm install oidc-client –save

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

        

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

      (2)添加测试用的HTML文件

       使用VSCode打开java script_Client文件夹,在public(D:\express\java script_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=" java scripts/oidc-client.js"></script>
    <script src="app.js"></script>
</body>
</html> 

      (3)添加测试的js文件

       在public下新建app.js文件。

       黏贴以下代码

/// <reference path=" java scripts/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", a
首页 上一页 1 2 3 4 下一页 尾页 1/4/4
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇二分搜索算法 下一篇新版的nuget包 PackageLicense 这..

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目