springboot+vue+nginx 配置Https访问——自签名证书验证

这段时间做的项目慢慢往移动端方向偏了,哈哈快成为复合型人才了。

问题:移动(或pc)端打开浏览器实现扫一扫识别扫描内容的功能

一看这个需求,这不简单嘛,网上例子随便一找一大堆。。。比如类似原生js实现 MediaDevices.getUserMedia()、引用zxing扫描二维码识别内容 等等。

于是兴高采烈的拿过来用了,但是发现都报错,源于:getUserMedia is not implemented in this browser, 然后再搜索查看解决方法,有人是这么说的

 end:显然第二种方案不可取,不可能让用户为了适应应用去配置东西,我都嫌麻烦,更别说用户了。

所以采用第一种:http换成https协议

  咱的项目是:springboot+vue,那需要怎样做呢?

  1. https协议需要到ca申请证书,一般免费证书较少,因而需要一定费用。

  免费的证书例如在:阿里云、腾讯云上都有,搜索:SSL证书。我当时想着有点麻烦啊,但申请就申请吧,毕竟咱的项目还是要部署到线上的。

  但是申请没那么简单,需要公网域名和服务器!因为过程中有一步是要验证的(dns、或文件验证),像咱这无权无势的码农就别想了,果断ps。

  2. 使用本地自签证书,不安全但功能可以实现啊,目前先这样做吧


SpringBoot

       JDK中keytool是一个证书管理工具,可以生成自签名证书。 本人这里用的系统是windows,cmd打开命令黑窗口,然后生成命令如下(找不到keytoo命令的先去配置java环境) 我指定的名字叫tomcat.keystore 别名叫tomcat,密码自己设置,我这里用的tomcat,最后那个直接按得回车,执行后提示你输入密码、账户等信息,随便输入无所谓。

  D://是生成证书保存路径,tomcat.keystore生成证书的名字和后缀

keytool -genkey -alias tomcat -keyalg RSA -keystore D:/tomcat.keystore

  将生成的文件tomcat.keystore拷贝到项目的src/main/resources资源目录下,yml或properties文件中配置如下

# 证书文件
server.ssl.key-store=classpath:tomcat.keystore
# 证书密码
server.ssl.key-password=123456
# 证书类型(可以不配置)
server.ssl.key-store-type=JKS
# 证书别名(可以不配置)
server.ssl.key-alias=tomcat

另外补充一点:以下可配置为http、https共同使用,实现思路是监听http请求转发到https请求

package com.bisp.common.config;

import org.apache.catalina.Context;
import org.apache.catalina.connector.Connector;
import org.apache.tomcat.util.descriptor.web.SecurityCollection;
import org.apache.tomcat.util.descriptor.web.SecurityConstraint;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.boot.web.embedded.tomcat.TomcatServletWebServerFactory;
import org.springframework.boot.web.servlet.server.ServletWebServerFactory;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

/**
 * @ClassName TomcatConfig
 * @Description TODO
 * @Author yzx
 * @Date 2022/11/24 10:59
 **/
@Configuration
public class TomcatConfig {
    /**获取配置端口*/
    @Value("${server.port}")
    private Integer httpPort;

    @Bean
    public ServletWebServerFactory servletContainer() {
        TomcatServletWebServerFactory factory = new TomcatServletWebServerFactory(){
            @Override
            protected void postProcessContext(Context context) {
                SecurityConstraint constraint = new SecurityConstraint();
                constraint.setUserConstraint("CONFIDENTIAL");
                SecurityCollection collection = new SecurityCollection();
                collection.addPattern("/*");
                constraint.addCollection(collection);
                context.addConstraint(constraint);
            }
        };
        factory.addAdditionalTomcatConnectors(tomcatConnector());
        return factory;
    }

    private Connector tomcatConnector() {
        Connector connector = new Connector("org.apache.coyote.http11.Http11NioProtocol");
        connector.setScheme("http");
        //http端口号,可以自行指定(不能和其它已经使用的端口重复,否则会报错)
        //设置http的监听端口为80端口,这样访问的时候也可以不用带上端口号
        connector.setPort(9090);
        connector.setSecure(false);
        //监听到的http的端口号后转向到https的端口号,可以自行指定
        connector.setRedirectPort(httpPort);
        return connector;
    }

}

Vue

  1. 修改vue项目根路径下的vue.config.js文件,添加 https: true
    module.exports = {
      devServer: {
        https: true,  // 启动项目为http协议,加入这句话即可
    }
  2. 修改请求后台接口url的 http:// 改为 https://(仅供参考)

完成以上两点后启动vue,不出所料还是报错。。

 

这是我们发现浏览器没有找到可信任的ssl证书,所以提示不安全,我们点击高级——继续前往,看似好像也没什么问题

但是我们在调用后台接口url时,不出所料还是报错...这就回到了本文开头的问题,就是还是说浏览器不信任该证书...

 那怎么办?进退两难了?正规的证书没钱买,自签的证书又不信任,于是我又开始大量寻找答案

  • 有的人说复制接口url地址到浏览器新标签页,再次打开信任就好了,这不投机取巧,没解决根本问题么
  • 还有的说把本地证书安装到浏览器插件中,那不回到本文开头的问题嘛
  • 或者配置axios忽略证书校验

  • 或者配置vue信任本地证书

 但都行不通!后来看到一个正确的解释是这样的

 无奈vue开启https协议到此,我们转到nginx配置ssl证书

Nginx

  1.  下载 nginx windows 版本并解压,这里不过多描述
  2.  下载 OpenSSL windows 版本并安装,这里不过多描述
  3.  添加 C:\OpenSSL-Win64,  C:\nginx-1.16.1 到环境变量 PATH 路径;
  4.  在C:\nginx-1.16.1目录下创建ssl目录,以后自签名证书存到这个目录;
  5.  启动 cmd 命令行程序,切到 C:\nginx-1.16.1\ssl 目录,开始创建证书。
    • 基本思路是先创建服务器私钥,再创建CSR文件,最后用私钥签发CSR文件得到服务器公钥证书。

      C:\nginx-1.16.1\ssl>openssl genrsa -des3 -out server.key 2048  创建服务器私钥
      Generating RSA private key, 2048 bit long modulus (2 primes)
      ...............+++++
      .........................................................................+++++
      e is 65537 (0x010001)
      Enter pass phrase for server.key:
      Verifying - Enter pass phrase for server.key:
       
      C:\nginx-1.16.1\ssl>openssl req -new -key server.key -out server.csr  创建CSR证书请求文件
      Enter pass phrase for server.key:
      You are about to be asked to enter information that will be incorporated
      into your certificate request.
      What you are about to enter is what is called a Distinguished Name or a DN.
      There are quite a few fields but you can leave some blank
      For some fields there will be a default value,
      If you enter '.', the field will be left blank.
      -----
      Country Name (2 letter code) [AU]:CN
      State or Province Name (full name) [Some-State]:Shanghai
      Locality Name (eg, city) []:Shanghai
      Organization Name (eg, company) [Internet Widgits Pty Ltd]:XXXXX
      Organizational Unit Name (eg, section) []:Software
      Common Name (e.g. server FQDN or YOUR name) []:YYYY
      Email Address []:
       
      Please enter the following 'extra' attributes
      to be sent with your certificate request
      A challenge password []:
      An optional company name []:
       
      C:\nginx-1.16.1\ssl>copy server.key server.key.orig  备份有秘密的私钥文件
      已复制         1 个文件。
       
      C:\nginx-1.16.1\ssl>openssl rsa -in server.key -out server.key  去掉私钥文件的密码
      Enter pass phrase for server.key:
      writing RSA key
       
      C:\nginx-1.16.1\ssl>openssl x509 -req -days 3650 -in server.csr -signkey server.key -out server.crt    使用服务器私钥签署服务器公钥证书
      Signature ok
      subject=C = CN, ST = Shanghai, L = Shanghai, O = Intel, OU = Software, CN = server1
      Getting Private key
  6.  部署自签证书到nginx服务器
    • 用记事本编辑 C:\nginx-1.16.1\conf\nginx.conf文件,向文件末尾追加 https 服务器配置:

      # 二级路由跳转、接口代理、https信任自签证书
          server {
              server_name  192.168.43.20;
      
              listen 443 ssl;        # 监听443端口, 开启ssl(必须)
      
              # 引用ssl证书(必须,如果放在nginx/conf/ssl下可以用相对路径,其他位置必须用绝对路径)
              ssl_certificate   ../ssl/server.crt;
              ssl_certificate_key ../ssl/server.key;
      
              # 协议优化(可选,优化https协议,增强安全性)
              ssl_protocols    TLSv1 TLSv1.1 TLSv1.2;
              ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
              ssl_prefer_server_ciphers on;
              ssl_session_cache  shared:SSL:10m;
              ssl_session_timeout 10m;
      
              # 二级路由跳转
              location /ayyingyong20221119 {
                  try_files $uri $uri/ /ayyingyong20221119/index.html;
                  index index.html;
              }
      
              # 当遇到/api (也就是我们的接口)对其进行反向代理
              location /ayyingyong20221119/api {
                  proxy_pass https://localhost:9090/ayyingyong20221119/api;
              }
          }
  7.  重启 nginx 然后在浏览器输入 https://192.168.43.20/ayyingyong20221119 看看
    • nginx -s reload

      或打开任务管理器先停止nginx服务,再双击启动服务

 

并且我们的后台服务也正常调用,当然获取摄像头权限也是没问题的,大功告成!


 

同理,移动端同pc端效果是一样的,因为具有摄像头就可以实现效果预览。

 

随着移动端的发展,越来越多的开发app内嵌webview 。很多时候本地浏览器没问题,放在app里却问题频出,为了准确的把锅丢给app开发,我们就要掌握移动端请求抓包的技法!!!

这里推荐大家一个好用的工具 Fiddler Everywhere :可以运行在任何浏览器,任何系统、跨平台(Windows、Mac、Linux)的一款Web调试代理工具。它记录了计算机和Internet之间的所有HTTP(S)通信,可以检查和编辑通信,并拥有Mock请求以及修改响应返回的能力。

 

好用的前端组件 Vant:轻量、可靠的移动端 Vue 组件库开发团队,注意区别 vue2、vue3 版本

 

posted on 2022-11-25 17:08  尹镇镇  阅读(3385)  评论(1编辑  收藏  举报