一、说明
git地址https://github.com/Rainbowhhy/prometheus_login_webUI
1、实现思路
主要是通过nginx代理转发进行实现,我们可以在nginx转发到prometheus之前添加一层认证的过程,从而进行实现。当然,如果有实力的朋
友也可以修改prometheus的源码来添加认证机制。
2、nginx auth_basic 方式
nignx的ngx_http_auth_basic_module模块实现了访问nignx web页面必须输入用户名和密码,经过认证后才能进行访问,我们可以利用这
个特性来为prometheus设置代理。
该实现方式比较简单,只需要在nginx配置文件里面添加上auth_basic相关的参数即可,网上也有很多资料,这里就不在赘述了。
3、nginx auth_request 方式
有时候我们需要自定义一个 web 登录网页作为我们的监控系统的登录入口,这就可以结合 auth_request 模块来实现。
auth_request原理:
(1)当auth_request对应的路由返回401或者403时,nginx会拦截请求,直接返回前端401或者403信息;
(2)当auth_request对应的路由返回2xx状态码时,nginx不会拦截请求,而是构建一个subrequest请求,再去请求真实受保护资源的接口;
登录认证实现思路:
(1)通过nginx代理prometheus访问,初次访问首页时,auth_request返回401,让其强制跳转到我们自定义的login 登录界面;
(2)在login登录认证界面,如果用户名密码认证正确,返回一个token,并且重定向到nginx首页;
(3)此时再次访问首页时,是带着token来进行访问,验证token正确,auth_request返回200,就成功转发 prometheus监控页面;
(4)如果token过期,登录首页时就返回到login页面,再次进行用户名密码认证。
二、配置
1、nginx配置文件
# For more information on configuration, see:
# * Official English Documentation: http://nginx.org/en/docs/
# * Official Russian Documentation: http://nginx.org/ru/docs/
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;
# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;
events {
worker_connections 1024;
}
http {
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
include /etc/nginx/mime.types;
default_type application/octet-stream;
# Load modular configuration files from the /etc/nginx/conf.d directory.
# See http://nginx.org/en/docs/ngx_core_module.html#include
# for more information.
include /etc/nginx/conf.d/*.conf;
server {
listen 0.0.0.0:9190; # 访问首页入口
location / {
proxy_pass http://localhost:9090/; # prometheus服务监听端口
auth_request /auth;
error_page 401 = @error401;
}
location @error401 { # 401就转发到登录页面
add_header Set-Cookie "ORIGINURL=$scheme://$http_host;Path=/";
return 302 /login;
}
location /auth {
# internal;
proxy_pass http://localhost:5000/auth; # 后端token认证
auth_request off;
}
location /login {
proxy_pass http://localhost:5000/login; # 后端用户名密码认证
auth_request off;
}
location /static/rainbowhhy {
proxy_pass http://localhost:5000/static/rainbowhhy;
# 此处很重要,需要自定义一个静态文件目录,本文为rainbowhhy,否则会与prometheus的静态文件冲突,导致prometheus的页面加载不完全
auth_request off;
}
}
}
2、登录认证
登录认证部分是通过 flask 实现
代码目录结构如下
├── profiles.json
├── readme.md
├── requirements.txt
├── run.py
├── static
│ └── rainbowhhy
│ ├── css
│ │ └── style.css
│ └── js
│ └── jquery-1.8.2.min.js
└── templates
└── login.html
安装包准备
pip3 install flask==1.1.1
pip3 install flask-login==0.4.1
pip3 install werkzeug==0.16.0
密码加密文件
profiles.json,采用json格式保存加密后的用户名和密码
cat profiles.json
{"admin": ["pbkdf2:sha256:150000$8J65mjTc$db116dd4d5de7eff899d126bd57b4f73910afb1e57982a9ded6878c547b584c5"]}
生成密码的方式:
>>> from werkzeug.security import generate_password_hash
>>> generate_password_hash("12345678")
'pbkdf2:sha256:150000$8J65mjTc$db116dd4d5de7eff899d126bd57b4f73910afb1e57982a9ded6878c547b584c5'
3、前后端认证服务
后端认证服务:run.py
前端登录页面: templates/login.html
4、启动服务
启动nginx服务
systemctl start nginx
启动flask认证服务
python3 run.py
效果图