上两节介绍完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