Prometheus监控之login 登录认证界面（nginx + flask 实现）

一、说明

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

效果图