Uniapp 验证 HTTPS 协议

Uniapp 中 验证 HTTPS协议的是示例代码

<template>
	<view class="content">

		<view style="margin-top: 20px;"><text>sslVerify : {{text}}</text></view>
		<view>
			<button @click="testSslVerify">sslVerify</button>
		</view>

		<view style="margin-top: 20px;"><text>testCaVerify : {{text}}</text></view>
		<view>
			<button @click="testCaVerify">testCaVerify</button>
		</view>
		
		<view style="margin-top: 20px;"><text>testCaCrtVerify : {{text}}</text></view>
		<view>
			<button @click="testCaCrtVerify">testCaCrtVerify</button>
		</view>
		
		<view class="uni-textarea" style="margin-top: 20px;">
				<textarea style="border: 1px solid red;" v-model="certificates" placeholder="占位符字体是红色的"/>
		</view>
		<view style="margin-top: 20px;"><text>customVerify : {{text}}</text></view>
		<view>
			<button @click="customVerify">customVerify</button>
		</view>
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				text: 'empty',
				certificates:"[{ 'host': '10.11.1.1', 'client': '',  'clientPassword': '', 'server': ['/static/ssl/server.crt'] }]"
			}
		},
		onLoad() {

		},
		methods: {
			testSslVerify() {
				uni.request({
					url: 'https://10.11.1.1/api/mobile/GetToken', //仅为示例，并非真实接口地址。
					data: {
						qRcodeId: 'qRcodeId',
						deviceId: 'deviceId'
					},
					sslVerify: false,
					success: (res) => {
						uni.showToast({
							title: 'success' + JSON.stringify(res),
							duration: 5000,
							icon: "none",
						})
						this.text = 'testSslVerify request success';
					},
					fail: (res) => {
						uni.showToast({
							title: 'fail' + JSON.stringify(res),
							duration: 5000,
							icon: "none",
						})
					},
					complete(res) {
						uni.showToast({
							title: 'complete' + JSON.stringify(res),
							duration: 5000,
							icon: "none",
						})
					}
				});
			},
			
			testCaVerify(){
				uni.configMTLS({
				    certificates: [{
				        'host': 'https://10.11.1.1',
				        'client': '/static/ssl/ca.p12',
				        'clientPassword': 'aaaaaaa',
				        'server': ['/static/ssl/server.cer'],
				    }],
				    success ({code}) { 
						uni.showToast({
								title: "configMTLS success：" + JSON.stringify(code),
								duration: 5000,
								icon: "none",
							});
					},
					fail: (res) => {
						uni.showToast({
							title: 'configMTLS fail' + JSON.stringify(res),
							duration: 5000,
							icon: "none",
						})
					},
				});
				uni.request({
					url: 'https://10.11.1.1/api/mobile/GetToken', 
					data: {
						qRcodeId: 'qRcodeId',
						deviceId: 'deviceId'
					},
					success: (res) => {
						uni.showToast({
							title: 'success' + JSON.stringify(res),
							duration: 5000,
							icon: "none",
						})
						this.text = 'testCaVerify request success';
					},
					fail: (res) => {
						uni.showToast({
							title: 'fail' + JSON.stringify(res),
							duration: 5000,
							icon: "none",
						})
					},
					complete(res) {
						uni.showToast({
							title: 'complete' + JSON.stringify(res),
							duration: 5000,
							icon: "none",
						})
					}
				});
			},

			testCaCrtVerify(){
				uni.configMTLS({
				    certificates: [{
				        'host': 'https://10.11.1.1',
				        'client': '/static/ssl/ca.p12',
				        'clientPassword': 'abxcddddd',
				        'server': ['/static/ssl/server.crt'],
				    }],
				    success ({code}) { 
						uni.showToast({
								title: "configMTLS success：" + JSON.stringify(code),
								duration: 5000,
								icon: "none",
							});
					},
					fail: (res) => {
						uni.showToast({
							title: 'configMTLS fail' + JSON.stringify(res),
							duration: 5000,
							icon: "none",
						})
					},
				});
				uni.request({
					url: 'https://10.11.1.1/api/mobile/GetToken', 
					data: {
						qRcodeId: 'qRcodeId',
						deviceId: 'deviceId'
					}, 
					success: (res) => {
						uni.showToast({
							title: 'success' + JSON.stringify(res),
							duration: 5000,
							icon: "none",
						})
						this.text = 'testCaCrtVerify request success';
					},
					fail: (res) => {
						uni.showToast({
							title: 'fail' + JSON.stringify(res),
							duration: 5000,
							icon: "none",
						})
					},
					complete(res) {
						uni.showToast({
							title: 'complete' + JSON.stringify(res),
							duration: 5000,
							icon: "none",
						})
					}
				});
			},
			
			customVerify(){ 
				uni.configMTLS({
					    certificates: this.certificates,
					    success ({code}) { 
							uni.showToast({
									title: "configMTLS success：" + JSON.stringify(code),
									duration: 5000,
									icon: "none",
								});
						},
						fail: (res) => {
							uni.showToast({
								title: 'configMTLS fail' + JSON.stringify(res),
								duration: 5000,
								icon: "none",
							})
						},
					});
					uni.request({
						url: 'https://10.11.1.1/api/mobile/GetToken', 
						data: {
							qRcodeId: 'qRcodeId',
							deviceId: 'deviceId'
						},
						success: (res) => {
							uni.showToast({
								title: 'success' + JSON.stringify(res),
								duration: 5000,
								icon: "none",
							})
							this.text = 'customVerify request success';
						},
						fail: (res) => {
							uni.showToast({
								title: 'fail' + JSON.stringify(res),
								duration: 5000,
								icon: "none",
							})
						},
						complete(res) {
							uni.showToast({
								title: 'complete' + JSON.stringify(res),
								duration: 5000,
								icon: "none",
							})
						}
					});
				
			}
		
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>