业务系统跳转Nacos免登录方案实践
前言
要求开发一个门户页面把现有的应用系统以卡片的形式集成进来,点击卡片能免登录跳转(这里划重点,核心诉求)到各系统,其中就包含了Nacos。要求:点击微服务管理平台卡片会跳转到 Nacos 的控制台。
序列图:
Nacos 登录接口
// Nginx 代理后的地址
http://ip:port/nacos/v1/auth/users/login
返回值:
{
"accessToken": "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJuYWNvcyIsImV4cCI6MTYwNTYyOTE2Nn0.2TogGhhr11_vLEjqKko1HJHUJEmsPuCxkur-CfNojDo",
"tokenTtl": 18000,
"globalAdmin": true
}
示例代码
注意所有地址均为代理后地址
1、JavaScript 示例
此处用来模拟用户登录操作
const http = new XMLHttpRequest();
// nacos 登录接口
const url = "http://ip:port/nacos/v1/auth/users/login";
const formData = new window.FormData();
formData.append("username", "nacos");
formData.append("password", "nacos");
http.open("POST", url, true);
http.onreadystatechange = function () {
if (http.readyState == 4 && http.status == 200) {
localStorage.setItem(
"token",
// 此处注意返回值格式,如果是字符串需要先转换成 JSON 对象
JSON.stringify(JSON.parse(http.responseText))
);
// 登录成功后打开 nacos 控制台页面
window.location.href = "http://ip:port/nacos/#/";
}
};
http.send(formData);
2、Nginx 配置示例
实际项目部署时页面和跳转的 Nacos 页面是不同源的,存在跨域操作。既然跨域,保存在 localStorage 中的 token 信息就不能共享,怎么解决呢,Nginx 该派上用场了
注意修改 ip 和 port
# HTTP
server {
# Nginx 默认端口
listen 80;
# Nacos 代理 开头表示 uri 以某个常规字符串开头,理解为匹配 url路径即可
location ^~/nacos/ {
# Nacos 真实访问地址
proxy_pass http://ip:port/nacos/;
}
# 缓存的对象
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|js|css|ico)$ {
# 缓存的时间,30天 当用户第一次访问这些内容时,会把这些内容存储在用户浏览器本地,这样用户第二次及以后继续访问该网站时,浏览器会检查加载已经缓存在用户浏览器本地的内容,就不会去服务器下载了,直到缓存的内容过期或被清除为止
expires 30d;
# 不记录访问日志
access_log off;
}
}
总结
1、增加一个模拟 Nacos 控制台登录过程
2、通过 Nginx 配置解决页面和 Nacos 控制台页面不同源的问题,保证用户鉴权成功
像 Nacos 控制台这种明文传输用户密码也就是作为内部工具使用可以,真要上线,安全测试肯定不能通过。我们可以基于这个思路进行优化调整