uni-app 访问验证码的技巧和窍门 - 实施步骤
最编程
2024-06-22 11:41:36
...
申请插件
登陆微信小程序的后台，在设置-第三方服务-插件管理中添加插件，通过 appid（wxefa63d84fe9f64a2)查找并添加验证码插件,等待极验通过申请即可使用。
插件通过后，可以在微信开发者工具详情-插件信息中查看插件的版本号
配置插件
- 在文件src/manifest.json中找到微信相关的配置，加入插件：
"mp-weixin": { /* 微信小程序特有相关 */ "appid": "xx", "setting": { "urlCheck": false }, "usingComponents": true, "optimization": { "subPackages": true }, "plugins": { "myPlugin": { "version": "1.3.3", "provider": "wxefa63d84fe9f64a2" } } },- 在
src/pages.json中找到分包subPackages，加入承载验证码操作的中间页，在这个页面引入插件，就可以在当前页面中使用：
"subPackages": [ "root": "packageSecond", "pages": [ { "path": "pages/geetest/geetest", "style": { "navigationBarTitleText": "验证码", "mp-weixin": { "usingComponents": { "captcha": "plugin://myPlugin/captcha" } } } } ] ]中间页
新建中间页，在分包目录下，如src/packageSecond/pages下新建一个中间页面geetest/geetest.vue，页面中引入极验验证码的模板，按照vue的语法转换模板，监听成功和失败的时间，做相应的业务逻辑处理，根据官方文档，微信小程序的模板写法<captcha id="captcha" wx:if="{{loadCaptcha}}" gt="{{gt}}" challenge="{{challenge}}" offline="{{offline}}" bindonSuccess="captchaSuccess" /> wx:if换成v-if，{{}}语法换成 vue 模板语法，事件绑定换成@onSuccess
// geetest/geetest.vue
<template>
<view class="container">
<view class="gettest-box">
<captcha
v-if="geetestObj.loadCaptcha"
:gt="geetestObj.gt"
:challenge="geetestObj.challenge"
:offline="geetestObj.offline"
@onError="error"
@onSuccess="success"
/>
</view>
</view>
</template>
<script>
import { mapState } from 'vuex'
import store from 'store'
export default {
computed: {
...mapState({
geetestObj: state => state.geetestObj,
}),
},
methods: {
error(e) {
console.log('我是挤眼验证码，我出错了')
},
async success(result) {
try {
store.commit('SET_GEETEST_RESULT', result.detail)
const secondVerifyUrl = '/api/secondVerify'
const reportResultUrl = '/api/reportResult'
const options = {stone: true, json: true}
const resultData = result.detail
// 二次验证需要的参数
const secondVerifParams = {
challenge: resultData.geetest_challenge,
serverStatus: this.geetestObj.serverStatus,
validate: resultData.geetest_validate,
seccode: resultData.geetest_seccode,
devicePlatform: 'h5',
}
const secondVerify = await postRequest(secondVerifyUrl, secondVerifParams, options)
let { resultCode = '' } = secondVerify
if (resultCode) {
const params = {
challenge: resultData.geetest_challenge,
serverStatus: this.geetestObj.serverStatus,
result: resultCode === '200' ? 1 : 0,
devicePlatform: 'h5',
}
const reportResult = await postRequest(reportResultUrl, params, options)
if (reportResult.resultCode) {
const pages = getCurrentPages() // 当前页面
const beforePage = pages[pages.length - 2] // 上一页
const options = beforePage.options
uni.navigateBack({
success: function() {
beforePage.onLoad(options) // 执行上一页的onLoad方法
}
})
}
}
} catch(e) {
console.log(e)
}
}
}
}
</script>
<style lang="scss">
.container {
width: 100vw;
height: 100vh;
position: relative;
.gettest-box {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
}
</style>监听接口
封装好的接口请求中监听响应的状态，将数据存到 store 中，在验证码中间页拿到数据，进行二次验证的时候传给后端接口。
// server.js
fetchInstance.interceptors.response.use(res => {
// #ifdef MP-WEIXIN
if (res.data.status === 485) {
const data = res.data.data
const obj = {
loadCaptcha: data.newCaptcha,
gt: data.gt,
challenge: data.challenge,
offline: !data.serverStatus,
serverStatus: data.serverStatus
}
store.commit('SET_GEETEST_OBJ', obj)
uni.navigateTo({
url: '/packageSecond/pages/geetest/geetest'
})
}
// #endif
})以上就是接入的这个过程。 效果如下：
参考： https://docs.geetest.com/sensebot/apirefer/api/miniprogram https://docs.geetest.com/sensebot/deploy/client/miniprogram https://uniapp.dcloud.io/component/mp-weixin- plugin