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

```

注意替換其中的秘鑰,域名和機構(gòu)信息。

雙擊執(zhí)行后轩触，我們得到了我們需要的所有證書文件寞酿。

所有需要的證書物料

2? 配置tomcat服務器

2.1? tomcat 安裝配置

略

2.2 配置server.xml

上傳server.jks文件至 tomcat安裝目錄下，conf文件夾下

進入tomcat服務器脱柱，conf文件夾伐弹，編輯server.xml，對connector字段添加如下配置

文本內(nèi)容

<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? 調(diào)用代碼示例

定義androidTlsConfig

3.3 測試步驟

使用下面的測試用例代碼繁调，運行后界面

運行后的界面示例

在不動態(tài)安裝DCloud CA的前提下，依次訪問三個網(wǎng)站:

接下來靶草，動態(tài)下載DCloud官網(wǎng)證書蹄胰。

再次測試三個網(wǎng)站

測試用例代碼：

```

<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>

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協(xié)議頭是固定格式

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>

```

uni-app 配置HTTPS雙向認證

uni-app 配置HTTPS雙向認證

0 實驗準備

1? 生成必須的證書文件

2? 配置tomcat服務器

2.1? tomcat 安裝配置

2.2 配置server.xml

2.3? 配置瀏覽器證書

3? uni-app 配置訪問

3.1? ?前提條件

3.2? 調(diào)用代碼示例

3.3 測試步驟