单点登录（sso）的简单实现

程序员文章站 2022-06-11 14:30:17

...

单点登录（Single Sign On）：简称为 SSO，是比较流行的企业业务整合的解决方案之一。SSO的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。

下面我们实现一个简单的Demo：

预备安装好node，express；

接下来我们实现一个服务,接下来的我们页面请求的服务都将请求此处，如下图1.js：

        var express = require('express');
var app = express();

app.all('*', function (req, res, next) {
  res.header('Access-Control-Allow-Origin', req.headers.origin);
  //Access-Control-Allow-Headers ,可根据浏览器的F12查看,把对应的粘贴在这里就行
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  res.header('Access-Control-Allow-Methods', '*');
  res.header("Access-Control-Allow-Credentials",true);
  res.header('Content-Type', 'application/json;charset=utf-8');
  next();
});

app.get('/', function(req, res,next){
  res.cookie('rememberme', '999991', { expires: new Date(Date.now() + 900000), httpOnly: true });
  res.send('var ss="hello world"');
});
app.get('/aa/', function(req, res,next){
  console.log("headers = " + JSON.stringify(req.headers));// 包含了各种header，包括x-forwarded-for(如果被代理过的话)
  console.log("x-forwarded-for = " + req.header('x-forwarded-for'));// 各阶段ip的CSV, 最左侧的是原始ip
  console.log("ips = " + JSON.stringify(req.ips));// 相当于(req.header('x-forwarded-for') || '').split(',')
  console.log("remoteAddress = " + req.connection.remoteAddress);// 未发生代理时，请求的ip
  console.log("ip = " + req.ip);// 同req.connection.remoteAddress, 但是格式要好一些
  res.send('"hello world"');
});

app.listen(3000);

实现两个静态文件访问服务器：2.js

        const express = require('express')
const path = require('path')
const app = express()
// path.join(__dirname, 'public') 表示工程路径后面追加 public
app.use(express.static(path.join(__dirname, 'publish')))

app.listen(8080, () => {
 console.log(`App listening at port 8080`)
})

3.js

        const express = require('express')
const path = require('path')
const app = express()
// path.join(__dirname, 'public') 表示工程路径后面追加 public
app.use(express.static(path.join(__dirname, 'publish')))

app.listen(8081, () => {
 console.log(`App listening at port 8080`)
})

在创建两个静态文件，目录结构如下图:

index.html

        <!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>主页</title>
</head>

<body>
 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
 </script>
 <script src="http://192.168.1.11:3000">

 </script>
</body>

</html>

2.index1.html

        <!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>主页1</title>
</head>

<body>
 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
 </script>
 <script>
 $.ajax({
 type: "get",
 dataType: "text",
 xhrFields: {
 withCredentials: true
            },
 crossDomain: true,
 url: 'http://192.168.1.11:3000/aa/',
 data: {},
 success: function (data) {
 console.log(data)
            }
        });
 </script>
</body>

</html>

通过上面代码我们可以了解，我们在3000端口上架设了两个服务接口，一个是设置cookie，一个是接收并打印用户传过来的cokie的；

通过