SpringBoot+Vue前后端分离，基于Nginx实现双向Https部署并实现数字证书登录

背景

最近公司要求将基于SpringBoot+Vue开发的Web应用进行双向Https部署，在此对本次部署进行了总结，本文章内容不对数字证书的生成以及单、双向Https等基本概念进行讲解。

概要说明

部署时，客户端到Nginx采用双向Https访问，客户端选择数字证书进行登录，由Nginx配置双向Https认证，Nginx可以自动解析数字证书，并且我们可以拿到Nginx解析数字证书后的信息，获取到Nginx中的DN值后，放入请求头中，当Nginx反向代理请求Web应用时，就可以将数字证书中的用户信息数据DN传递给Web应用，应用拿到后就可以进行登录。
在此过程中，为了安全起见，Nginx到Web应用的请求采用的是单向Https。

Web应用的配置

Web应用我们采用的是单向Https部署，且采用的是SpringBoot框架，因此需要通过简单的配置实现单向https。
在实际部署过程中，若Web应用不采用单向Https方式部署，那么在Nginx代理位置直接配置http的服务地址即可。

开启https

在application.properties或者application.yml中进行配置，因本项目使用的是application.properties，具体的证书信息根据实际情况进行填写，配置如下：

# 配置服务端数字证书的路径、密码、类型
server.ssl.key-store=classpath:server.p12
server.ssl.key-store-password=123456
server.ssl.key-store-type=PKCS12

配置了如上属性后，默认开启了https，此时配置文件中的server.port配置的端口为https请求的端口。

增加登录接口

当Nginx将数字证书中的用户信息DN值传递给Web应用后，应用服务拿着DN值进行用户登录操作，如果验证成功，则直接登录成功。

    @PostMapping("/login")
    public String login(HttpServletRequest request) throws Exception{
        // 获取请求头中的DN值
        String DN = request.getHeader("DN");
        // 处理一下DN值，因为传进来的是DN=XXXXX
        DN = DN.substring(3);
        System.out.println(DN);
        ......
    }

该接口用于接收DN值，有了DN值就可以进行登录等其他操作。

Nginx配置

Nginx的配置是最关键的，首先，需要将Vue生成的静态资源交给Nginx处理。其次，需要将Nginx配置成双向Https认证，客户端的证书交给Nginx认证并解析。最后，Nginx将数字证书解析后的DN值传递给Web应用的对应接口。
Nginx配置如下：

    # https服务
    server {
	    # https服务监听端口，ssl代表开启ssl协议
        listen       8443 ssl;
		# 服务名称
        server_name  localhost;

        # SSL证书配置
        ssl_certificate     cert/root.crt;
		ssl_certificate_key cert/root.key;
		# 验证客户端证书的根证
		ssl_client_certificate cert/root.crt;
		# 是否开启SSL客户端验证，如开启则为双向https，不开启则为单向https
		ssl_verify_client on;
		# 超时时间
		ssl_session_timeout 5m;
		ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
		ssl_ciphers ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP;
		ssl_prefer_server_ciphers on;

		# 静态资源拦截
        location / {
			root html\dist;
			index index.html index.htm;
			try_files $uri $uri/ /index.html last;
			
		}
		
		location /api/ {
			# 代理的服务地址
			proxy_pass https://localhost:9601/;
			
			proxy_set_header Host $http_host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			# 以上三行，目的是将代理服务器收到的用户的信息传到真实服务器上
			
			proxy_set_header X-Nginx-Proxt true;
			proxy_set_header HTTP_X_FORWORDED_FOR $remote_addr;
			
			# 将Nginx从数字证书中解析出的DN值，放入变量DN（此名称为自定义）中，并将DN放入请求头中，以便后台进行获取
			proxy_set_header DN  $ssl_client_s_dn;
			
		}

		
		
    }

vue静态资源配置的路径为根路径即：/，并将vue生成的静态资源放入Nginx的html\dist目录下。
对于后台请求的拦截，路径为/api/，所有路径中包含有api的都是对Web应用服务的请求，这里最关键的就是proxy_set_header DN ssl_client_s_dn，其中$ssl_client_s_dn是Nginx解析数字证书后返回的DN值，DN是我们自定义的变量名称，Web应用在接口中通过该变量名称在请求头中获取DN值，proxy_set_header是将我们定义的DN值放入请求头中，这样我们才能在Web服务接口中获取到DN值。

总结

这里就不展示效果了，经过测试是可用的，本文内容主要是使用主路认证方式进行认证，因此在Vue登录页面中我进行了判断，如果是Https，那么我直接调用了证书登录接口，当调用后台接口时，必然会通过Nginx反向代理，此时Nginx会要求客户端进行认证，浏览器弹出数字证书，用户选择证书后，Nginx进行验证，通过后将请求证书登录接口，Web应用拿到DN值，进行验证登录，登录成功返回给Vue，Vue直接登录成功进入主页，完成！

如有说的不对的地方，请多指教！