二、实现简单Web-SSO之环境配置

xuxueli 发布于2019-07-25 13:37 / 3485人阅读

摘要：另外声明，本实战是用实现的。修改每个项目的文件中的端口设置。如果都成功，配置就完成了这样，我们就在本地模拟出了跨域。

一、总述
二、环境配置
[三、业务servers管理]
[四、用户信息同步]
[五、token的拦截、生成、验证（服务端）]
[六、概念辨析：session、cookie、token的区别与token存储]
[七、token的分享（浏览器端）]
[八、安全性措施]
[九、用户体验]
[十、性能]

学习前提

你已经知道什么是SSO了

了解域名解析流程与hosts文件的作用

知道nginx代理的使用

会启动一个web应用(python、java-web、php、node.js等等)

本系列着重于SSO的实现，涉及到的技术主要以推荐阅读呈现。如果你不懂前提提到的点，可粗略浏览本文后去学习下技术细节再回头看，千万不要似动非懂的。另外声明，本实战是用node.js + express4.x实现的。

hosts文件设置

我们约定如下几个域名：

id.vhost.com sso系统负责验证登录、注册、修改公共用户信息

music.vhost.com 音乐应用 (同域)

note.com 日记应用(跨域)

添加如下内容:

127.0.0.1    id.vhost.com
127.0.0.1    music.vhost.com
127.0.0.1    note.com

nginx代理设置

我们约定这三个server在127.0.0.1上的端口

id.vhost.com --> 127.0.0.1:3000

music.vhost.com --> 127.0.0.1:3001

note.com --> 127.0.0.1:3002

这里放一个参考配置代码，文件id.vhost.com.conf:

  1 server {
  2     listen  80;
  3     server_name id.vhost.com;
  4     charset utf-8;
  5     access_log /var/log/nginx/id.vhost.com.log main;
  6     location / {
  7         proxy_set_header X-Real-IP $remote_addr;
  8         proxy_set_header X-Forwarded-For $proxy_add_x_forwarde    d_for;
  9         proxy_set_header Host $http_host;
 10         proxy_set_header X-NginX-Proxy true;
 11 
 12         proxy_pass http://127.0.0.1:3000;
 13     }
 14 }

其余两个自行配置

项目初始化

使用Express Generator来生成项目

express -e --git id    // 我们使用ejs前端模板，同时添加.gitignore文件
express -e --git music
express -e --git note

这样项目就生成完毕了！接下来修改启动端口。修改每个项目的bin/www文件中的端口设置。分别为3000、3001、3002（上面已经说了）

var port = normalizePort(process.env.PORT || "3000");

然后分别启动三个项目、以及nginx。在浏览器中访问id.vhost.com、music.vhost.com、note.vhost.com。如果都成功，配置就完成了！这样，我们就在本地模拟出了跨域。

反馈

请支出错误之处、不足需要补充之处好让我进行修改！

大胆说出你的疑问！

推荐阅读

百度百科: SSO

维基百科: host文件

借助Nginx搭建反向代理服务器

云服务器 GPU云服务器网络环境之vps 实现二叉树 java实现二次握手最小二乘 c语言实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/39245.html

三篇文章带你极速入门php（二）之迅速搭建php环境

摘要：另本文目标是迅速建立集成环境用来开发，如果想要分开一点点搭建，自行百度就好了。本文不赘述，自行百度就完事了下载地址，选中或者版即可，下载完后安装上就好。前言今天讲一下php在windows,mac,linux上的集成环境搭建，环境这个事得对号入座，windows用phpstudy，mac用mamp，linux用lnmp一键安装，直接跳转对应的地方看就好了。另：本文目标是迅速建立...

Jackwoo 2019-07-01 11:13 评论0 收藏0
前端小姐姐学PHP之（二）

摘要：上次了我们配置好开发环境了，本小节主要讲述内容点的运行环境配置创建数据库数据表连接数据库一的运行环境配置版注版原文地址谢谢技术大大插图简单明了上图啦版配置好啦点击浏览器打开之后直接就可以看了，不用在删除端口了。上次了我们配置好开发环境了，本小节主要讲述内容点： phpStrom的运行环境配置创建数据库、数据表连接数据库一、phpStrom的运行环境配置（windows版） ...

lindroid 2019-08-29 16:28 评论0 收藏0
前端小姐姐学PHP之（二）

摘要：上次了我们配置好开发环境了，本小节主要讲述内容点的运行环境配置创建数据库数据表连接数据库一的运行环境配置版注版原文地址谢谢技术大大插图简单明了上图啦版配置好啦点击浏览器打开之后直接就可以看了，不用在删除端口了。上次了我们配置好开发环境了，本小节主要讲述内容点： phpStrom的运行环境配置创建数据库、数据表连接数据库一、phpStrom的运行环境配置（windows版） ...

CoderDock 2019-07-01 10:34 评论0 收藏0
前端小姐姐学PHP之（二）

摘要：上次了我们配置好开发环境了，本小节主要讲述内容点的运行环境配置创建数据库数据表连接数据库一的运行环境配置版注版原文地址谢谢技术大大插图简单明了上图啦版配置好啦点击浏览器打开之后直接就可以看了，不用在删除端口了。上次了我们配置好开发环境了，本小节主要讲述内容点： phpStrom的运行环境配置创建数据库、数据表连接数据库一、phpStrom的运行环境配置（windows版） ...

pekonchan 2019-08-23 11:25 评论0 收藏0
前端小姐姐学PHP之（二）

摘要：上次了我们配置好开发环境了，本小节主要讲述内容点的运行环境配置创建数据库数据表连接数据库一的运行环境配置版注版原文地址谢谢技术大大插图简单明了上图啦版配置好啦点击浏览器打开之后直接就可以看了，不用在删除端口了。上次了我们配置好开发环境了，本小节主要讲述内容点： phpStrom的运行环境配置创建数据库、数据表连接数据库一、phpStrom的运行环境配置（windows版） ...

mcterry 2019-08-02 11:19 评论0 收藏0