美文网首页前端知多少
单点登录(sso)的简单实现

单点登录(sso)的简单实现

作者: 孙悟空SUN | 来源:发表于2020-02-12 17:26 被阅读0次
    48540923dd54564e4c3e6c84bbde9c82d1584f30.png
    单点登录(Single Sign On):简称为 SSO,是比较流行的企业业务整合的解决方案之一。SSO的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。

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

    预备安装好nodeexpress

    接下来我们实现一个服务,接下来的我们页面请求的服务都将请求此处,如下图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`)
    })
    

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

    v2-e0cb09d6b8384e5cbda907dfcafcba3e_hd.png

    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的;

    通过

    node 1.js
    node 2.js
    node 3.js
    
    

    启动服务

    我本地ip是192.168.1.11,

    我们访问 http://192.168.1.11:8080/index.html

    v2-8862e6061c94bd0c63eab54e7e3b3c0f_hd.png

    服务端已经在8080端口服务上设置3000端口的cookie

    在访问http://192.168.1.11:8081/index1.html

    v2-0e46f475239395407bcb94773f1bae58_hd.png

    控制台已经接收到cookie

    v2-c33182b572db552e08072afd8e71bea2_hd.png

    到此我们即实现已经完成,我们可以把8080看成a系统,8081看成b系统,这样只要通过3000(认证平台),在a、b系统都可以使用认证平台的cookie

    相关文章

      网友评论

        本文标题:单点登录(sso)的简单实现

        本文链接:https://www.haomeiwen.com/subject/skucfhtx.html