uniapp接入阿里云的无痕验证

uniapp接入阿里云的无痕验证

uniapp接入阿里云的无痕验证

前言：
在网上百度了很久都没找到案例，联系阿里云的售后也没有找到对应的技术人员来提供解决思路，索性就自己写了一种实现方式，缺点是第一次调起阿里云的时候必须拉起二次验证（也就滑块验证）

需求来源：
app接入阿里云无痕验证，但是阿里云无痕验证引入的js都是基于浏览器实现的，它的api绑定在了window上，uniapp编译的app是没有window对象的，在翻阅了阿里云文档后，发现它的滑块验证是通过创建wevview实现的，那么无痕验证是不是也可以通过这种方式实现呢？

阿里云无痕验证文档：

.html?spm=a2c4g.190302.0.0.38bb58ddVOugMs

思路：
在app端通过创建webview将阿里云的js放入到html中，那就可以正常的使用阿里云提供的js了，再通过webview和xxx.vue界面间的通讯就能拿到阿里云的验证参数了

代码部分：
在utils里面新建一个safeCheck.js

safeCheck.js:

let loading = false  //主要用于结合异步请求防止用户重复点击
let webview = null   // 创建的webview对象
let wvId = 'safeHtml' + new Date().getTime()
const htmlPath = '/static/safeCheck.html'; //如果是本地的html路径一定要放static或者hybrid/html下，不然app打包后找不到文件
export function opneWv() {if (loading) {return}loading = trueif (webview) {//非第一次进来会走这,防止重复创建webviewconsole.log('有webview');webview.show()if (webview.isVisible()) {//这里是个坑，如果你在A界面创建的webview，当你销毁了A界面后，webview对象还是存在，但是已经不会显示在界面上了，具体表现就是除了tabbar的界面，你用uni.navigateTo跳到A界面，在A界面创建了webview后，uni.navigateBack退出界面，等你再回到A界面webview.show()就没反应了console.log('可见');webview.evalJS('getCode()');//调用html的函数getCode()获取阿里云验证参数} else {//当webview不可见，说明界面可能被销毁过，这时候就需要重新创建webviewconsole.log('不可见');veFromParent()//在webview的父级，也就是调用opneWv函数的界面删除webviewwebview.close()//h5+文档说remove后也需要close()关闭，不然webview还存在webview = nullwvId = 'safeHtml' + new Date().getTime() //重新创建时后面跟一个时间戳，不然id相同，会认定为同一个webviewloading = falseopneWv()}return} else {//第一次进来会走elseconsole.log('无webview');console.log('创建webView', wvId);webview = ate(htmlPath, wvId, { //可以设定webview的样式'uni-app': 'none',background: 'transparent',webviewBGTransparent: true}, {//这个对象是html接收的文件appkey: 'xxxx',scene: 'xxxx'})}webview.addEventListener('loaded', function () {//准备完毕webview.show();let plusMessageListener = StorageSync('plusMessageListener')if (!plusMessageListener) {plus.globalEvent.addEventListener('plusMessage', getMessage, false)uni.setStorageSync('plusMessageListener', true)}//plusMessageListener是为了确保plus.globalEvent.addEventListener('plusMessage')监听只出现一次let pages = getCurrentPages();let page = pages[pages.length - 1];let ws = page.$getAppWebview()ws.append(webview)//这一步很重要，必须把webview append它父级界面，也就是调用opneWv函数的界面，这种获取getAppWebview的方式主要是为了兼容vue3没有this的情况// vue2可以用以下代码替换// var ws = this.$scope.$getAppWebview(); 此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效//ws.append(webview);}, false);
}function getMessage(msg) {const result = msg.data.args.dataif (result.name == 'postMessage') {...//传参数给后台，异步完成后loading变为falseloading = false}
}

接下来是html部分，我遇见的坑是本地html找不到文件，所以你想避开这个坑就将本地的html放在static下或者hybrid/html下

safeCheck.html

    <script src=".js"></script><script src=".webview.1.5.1.js"></script>
<script>let wvdocument.addEventListener('plusready', function () {//plusready只有在移动端打开才会触发，用于监听plus的api能调用// 阿里云滑动验证 wv = plus.webview.currentWebview()//获取当前webvoewAWSC.use("nvc", function (state, module) {// 初始化 调用module.init进行初始化window.nvc = module.init({appkey: wv.appkey,scene: wv.scene,success: function (data) {uni.postMessage({data: {type: 'value',data}})closeWv()},// 前端二次验证失败时触发该回调参数fail: function (failCode) {uni.postMessage({data: {type: 'fail',}})closeWv()console.log(failCode);},// 前端二次验证加载异常时触发该回调参数。error: function (errorCode) {uni.postMessage({data: {type: 'error',}})closeWv()console.log(errorCode)}});//初始完毕后，获取一次阿里云参数getCode()});})function getCode(parent) {NVCValAsync(function (data) {uni.postMessage({data: {type: 'value',data}})closeWv()});}function getNc() {console.log('打开二次验证');NC({renderTo: 'ncContainer'});}function closeWv() {//关闭当前htmlplus.webview.hide(wv)const parentElement = document.querySelector('#ncContainer');while (parentElement.firstChild) {veChild(parentElement.firstChild);//清除滑块}}</script>

外部链接：.html

思考：
虽然这样成功拿到了阿里云的参数，但是获取的”点“并不多像h5那样在你点击的地方调用阿里云的api获取参数，而是通过’取巧‘的方式再你点击的时候，创建webview拿到的参数，这种参数符合阿里云无痕验证的要求吗？不知道，因为至今阿里云的客户都没能给我找到对应的技术人员来跟我沟通过，但是至少现在能用。

ps：阿里云无痕验证都不支持app，为什么还接入？？？
我能说我是被逼的吗？