0 实验准备

---

准备一个可以正常使用的域名，这里使用的是  test.duqingquan.com  

准备一个可以正常使用服务器，并正确设置域名解析。 这里是 debian9.6

准备一个web服务器， 这里用的是tomcat 9.0.41

准备一个安装JDK的计算机。这里安装的是Open JDK 11.

1  生成必须的证书文件

---

有条件的可以使用CA认证的，我这里使用的自签名的文件。

将下面的脚本写入一个文本文件，重命名为 auto.bat (windows平台)

```

echo "auto create key"

# 生成服务端keystore -> server.jks

keytool -genkeypair -v -alias tomcatKey -keyalg RSA -validity 3650 -keystore ./server.jks  -storepass 886688 -dname "CN=duqingquan.com" -ext SAN=dns:test.duqingquan.com

# 生成服务器端公钥至 server.cer

keytool -exportcert -alias tomcatKey  -keystore ./server.jks  -file ./server.cer  -storepass 886688

# 生成客户端keystore -> client.p12

keytool -genkeypair -v -alias client -dname "CN=duqingquan.com"  -keyalg RSA -validity 3650 -keystore ./client.p12 -storepass 336633 -storetype PKCS12

# 生成客户端公钥 -> client.cer

keytool -exportcert -alias client -file ./client.cer -keystore ./client.p12 -storepass 336633 -storetype PKCS12

# 让服务器keystore信任客户端公钥

keytool -importcert -alias clientca  -keystore ./server.jks  -file ./client.cer  -storepass 886688

# 让客户端keystore信任服务器公钥

keytool -importcert -alias serverca  -keystore ./client.p12  -file ./server.cer  -storepass 336633

# 打印服务器keystore

keytool -list -keystore ./server.jks -storepass 886688

# 打印服务器公钥

keytool -rfc -printcert -file .\server.cer -v

pause

```

注意替换其中的秘钥,域名和机构信息。

双击执行后，我们得到了我们需要的所有证书文件。

所有需要的证书物料

2  配置tomcat服务器

---

2.1  tomcat 安装配置

略

2.2 配置server.xml

上传server.jks文件至 tomcat安装目录下，conf文件夹下

进入tomcat服务器，conf文件夹，编辑server.xml，对connector字段添加如下配置

文本内容

<Connector

protocol="org.apache.coyote.http11.Http11NioProtocol"

  sslImplementationName="org.apache.tomcat.util.net.jsse.JSSEImplementation"

  port="13888" maxThreads="200"

  scheme="https" secure="true" SSLEnabled="true"

                  truststoreFile="conf/server.jks" truststorePass="886688"

                  keystoreFile="conf/server.jks" keystorePass="886688"

  clientAuth="true" sslProtocol="TLS"/>

保存server.xml 重启tomcat.

打开tomcat根目录下的logs目录，

使用 tail -f catalina.out  查看tomcat实时日志，如果server.xml配置有误，在这里可以看到报错信息。

tomcat成功重启后，访问

https://test.duqingquan.com:13888/examples/servlets/servlet/HelloWorldExample

提示如下信息，说明服务器端配置成功。

2.3  配置浏览器证书

双击 client1.cer文件，进行安装

安装成功后，此时再次访问，报错信息变成了

再次安装，客户端keystore :  client.p12

安装成功后，重新访问。会提示选择客户端证书。

选择证书后，可以正常访问。

3  uni-app 配置访问

---

3.1   前提条件

使用HX 3.2.0以上版本

3.2  调用代码示例

定义androidTlsConfig

3.3 测试步骤

使用下面的测试用例代码，运行后界面

运行后的界面示例

在不动态安装DCloud CA的前提下，依次访问三个网站:

接下来，动态下载DCloud官网证书。

再次测试三个网站

测试用例代码：

```

<template>

<view>

<button @click="downloadCAFile"> downloadCAFile</button>

<button @click="taobaoTlsRequest"> taobaoTlsRequest</button>

<button @click="dcloudTlsRequest"> dcloudTlsRequest</button>

<button @click="goTlsRequest"> goTlsRequest</button>

<text>{{requestResult}}</text>

</view>

</template>

<script>

export default {

data() {

return {

androidConfig : {

keystore:'data:keystore/p12;base64,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',

storePass:"336633",

ca:["data:cert/pem;text,-----BEGIN CERTIFICATE-----\nMIIC8TCCAdmgAwIBAgIEKov9yzANBgkqhkiG9w0BAQsFADAZMRcwFQYDVQQDEw5k\ndXFpbmdxdWFuLmNvbTAeFw0yMTA0MTkxMDM3MTJaFw0zMTA0MTcxMDM3MTJaMBkx\nFzAVBgNVBAMTDmR1cWluZ3F1YW4uY29tMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8A\nMIIBCgKCAQEAkfpFOl97d2gWOOyc9UVx91pyIQQBq2lj6PNqy8fGCckkOqYxXecG\nWFq0zGqEVoaNL/TXK5Pa2apZXPl/bRYrJOlcFk5MW6dq4PkcFqrmS7ZwL6nFJ/YH\nZqXMK9NrbDZEVTpdmlt/pu/l+/Rex99Rkc6ws4Z9YI/p0LkMgjqL9LcAag1fJZK/\n2YLCN2hk+ujwGuz2qmJxAoq2oKefWSghjGkzb47y9g7h6acXlIWA42+7lyeh8iPD\nUkkGHj+kJOsF3VykDhV3FMpzcMfMIx7HMWJt4NVYjgourVhXKQ6JXACDBzD2vfki\n/M79h7o3PHiNE8ZGe8tNuexDnR1eR2ftywIDAQABo0EwPzAdBgNVHQ4EFgQUhAfB\nEwQZzkblt9LnGm+mANYPtRswHgYDVR0RBBcwFYITdGVzdC5kdXFpbmdxdWFuLmNv\nbTANBgkqhkiG9w0BAQsFAAOCAQEAGhB6wR8oASt+MMQy9zFq0p4fnoE2UzrmJ2uo\nCUVJZo+qnrutA1gzI/b4jOEFP/x4iVwfHRqycz9D0RWWheVYGyvFCXeuxcFTynnR\nOG8UtbUCuO+a7KDBc8RfbKHopyvBAIjnNzP/Xd4qNaCA/wQDDbpIwyS8qDcOb4YR\nArtPeiOnWWt3cLZ0Sw9mmCp3h8VEtgqyukuF8M36cPneE3LXtDtfL+YTZWIHUo1e\nZIV/pFtunbJ7TDm9RrSpSB9fmP0eflVSYCpOPvuhFdrf3IJLzhJcf06Ve58TcvLg\nUfMzW7OCLhOke6Sq3VM/5HCok70q+iRPkBYifjDqBzAqidbTiw==\n-----END CERTIFICATE-----"],

},

requestResult:""

}

},

methods: {

downloadCAFile:function() {

var that = this;

if(that.androidConfig.ca.length > 1){

console.log("远程公钥文件已装载");

return ;

}

uni.downloadFile({

//仅为示例，这里的证书公钥可以从浏览器导出

    url: 'https://dcloud.oss-cn-hangzhou.aliyuncs.com/UniADSDK/res/DCloud.pem',

    success: (res) => {

// 这里的mime协议头是固定格式

let downloadCAFilePath = "data:keystore/p12;filepath," + res.tempFilePath;

console.log('downloadCAFilePath  === ' + downloadCAFilePath);

that.androidConfig.ca.push(downloadCAFilePath);

console.log('that.androidConfig.ca  === ' + JSON.stringify(that.androidConfig.ca));

    }

});

},

goTlsRequest:function(){

var that = this;

uni.request({

url:"https://test.duqingquan.com:13888/examples/servlets/servlet/HelloWorldExample",

method:"get",

androidTLSConfig:this.androidConfig,

sslVerify:true,

success: (res) => {

console.log("success === " + JSON.stringify(res));

that.requestResult = res;

},

fail: (res) => {

console.log("fail === " + JSON.stringify(res));

that.requestResult = res;

}

});

},

dcloudTlsRequest:function(){

var that = this;

uni.request({

url:"https://ask.dcloud.net.cn/people/i7788",

method:"get",

androidTLSConfig: this.androidConfig,

success: (res) => {

console.log("success2 === " + JSON.stringify(res));

that.requestResult = res;

},

fail: (res) => {

console.log("fail2 === " + JSON.stringify(res));

that.requestResult = res;

}

});

},

taobaoTlsRequest:function(){

var that = this;

uni.request({

url:"https://www.taobao.com/",

method:"get",

androidTLSConfig: this.androidConfig,

success: (res) => {

console.log("success3 === " + JSON.stringify(res));

that.requestResult = res;

},

fail: (res) => {

console.log("fail3 === " + JSON.stringify(res));

that.requestResult = res;

}

});

},

}

}

</script>

<style>

.container {

padding: 20px;

font-size: 14px;

line-height: 24px;

}

.swiper-item {

/* #ifndef APP-NVUE */

display: flex;

/* #endif */

flex-direction: column;

justify-content: center;

align-items: center;

background-color: #999;

color: #fff;

}

.image {

width: 750rpx;

}

//css 

.button-icon {

background-image: linear-gradient(to right, rgb(0, 238, 255), rgb(0, 193, 252));

border-radius: 50rpx;

height: 65rpx;

padding-left: 20rpx;

padding-right: 20rpx;

overflow: hidden;

}

.myMenu-icon {

font-size: 50rpx;

padding-top: 8rpx;

border-radius: 50rpx;

overflow: hidden;

}

</style>

```