【uniapp】个推H5号码认证一键登录（附代码） |
您所在的位置：网站首页 › 手机号码一键登录安全吗 › 【uniapp】个推H5号码认证一键登录（附代码） |
【uniapp】个推H5号码认证一键登录（附代码）
|
前言
最近在做APP、h5产品，登陆注册成了难题。邮箱验证多数人不会使用，还是短信方便点，短信可以采用号码认证和验证码的方式，前者稍微便宜的，关于性价比和上手程度我推荐个推， 于是有了今天这篇案例记录，对于H5向uniapp进行数据传输，我建议看我这篇【uniapp】H5向uniapp通信存储数据——H5如何传递数据到uniapp方法的解决方案 个推号码认证业务流程
开发者通过修改H5密钥信息完成配置，用户访问该网页通过个推及三大运营商SDK返回token、gyuid，开发者需要通过这几个数据换取手机号，从而完成登陆验证，开发者需要自己写取号接口及解密过程，本次通过该案例实现Uniapp支持H5登录认证成功并获取手机号，下文流程根据用户发起的逻辑进行梳理 产品成功演示demo演示： 个推H5号码认证一键登录 接入产品演示： 个推H5号码认证一键登录2 目录 前言个推号码认证业务流程 产品成功演示阿里云认证的演示图个推演示图对比认证实名认证 产品认证开通官方SDK对接H5号码认证H5认证页面修改oneLogin.html uniapp配置新建index.vue新建pages2.vue 新建api.php解密操作 完整项目代码使用教程 最后 阿里云认证的演示图
个推和阿里云、易盾都支持H5但是易盾需要充值最低套餐，阿里云文档不行，个推可以自定义充值，价格在二者之间，个推认证企业送1000调用次数 产品阿里云个推易盾对接难度🚹易易是否支持H5是是是免费赠送1001000100服务态度两天没问明白排队时间长及时未了解同等套餐费用便宜便宜最便宜 认证 实名认证我建议企业认证，优惠多
应用服务中新建一键认证，根据流程往下，添加H5认证 产品开通后 需要进行H5域名配置 如有需要请自己下载 对接H5号码认证 H5认证页面官方自带的oneLogin.html，不过由于是H5没有和Uniapp对接，需要开发者自己对接，可以采用我的，我的已完成基础使用，可通过H5将数据传递到Uniapp中进行业务处理 修改oneLogin.html H5 一键登录demo body { display: flex; align-items: center; justify-content: center; flex-direction: column; height: 300px; } p { font-size: 14px; } var userAgent = navigator.userAgent; if (userAgent.indexOf('AlipayClient') > -1) { // 支付宝小程序的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。 document.writeln('' + ''); } else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) { // QQ 小程序 document.write( '' ); } else if (/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) { // 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。 document.write(''); } else if (/toutiaomicroapp/i.test(userAgent)) { // 头条小程序 JS-SDK 如果不需要兼容头条小程序，则无需引用此 JS 文件。 document.write(''); } else if (/swan/i.test(userAgent)) { // 百度小程序 JS-SDK 如果不需要兼容百度小程序，则无需引用此 JS 文件。 document.write(''); } else if (/quickapp/i.test(userAgent)) { // quickapp document.write(''); } if (!/toutiaomicroapp/i.test(userAgent)) { document.querySelector('.post-message-section').style.visibility = 'visible'; } H5 一键登录 demo 演示 点击登录体验 H5 一键登录 登录 此处为点击登录模拟场景， 接入方可根据业务需求，进行修改 // 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。 document.addEventListener('UniAppJSBridgeReady', function () { const appid = "dC***输入你的appid*****b2" //初始化个验SDK function initGy() { GyManager.setDebugMode(true) GyManager.init({ app: "***输入你的app名***", appid: appid, timeout: 3000, onResult: function (res) { console.log("demo init ", res); if (res.success) { initResult = res; } } }); } //保存初始化结果 let initResult; // 可提前判断网络状态 决定是否初始化H5一键登录 var nettype = GyManager.checkNetInfo(); console.log("demo checkNetInfo", nettype); // 根据客户业务进行判断 网络判断返回 cellular、 wifi、 unknown if (nettype === 'wifi') { // 可选方案： // 1: 提示用户关闭wifi 进行体验 // 2: 直接降级走其他验证形式 console.error("demo wifi状态无法一键登录") uni.navigateTo({ url: '/pages/pages2/pages2?text=wifi状态无法一键登录' }); //调用服务端校验接口 // 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。 //调用服务端校验接口 } else { // stpe3: 初始化H5一键登录 initGy() } // 模拟点击登录场景 可以在页面加载的时候判断网络状态后初始化就调用gateway方法 $('#test').click(() => { // 调用H5一键登录 if (!initResult) { uni.navigateTo({ url: '/pages/pages2/pages2?text=gysdk初始化失败,无法登录' }); console.error("demo gysdk初始化失败,无法登录") // 降级走其他验证方式 return } //step5: 调用H5 一键登录 GyManager.oneLogin({ canSwithch: true, logo:"./logo.png", onTokenSuccess: function (res) { console.log("demo onTokenSuccess", res); console.log(res['code']) console.log(res['accesscode']) console.log(res['gyuid']) // console.log(res['code']) //调用服务端校验接口 // 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。 uni.navigateTo({ url: '/pages/pages2/pages2?text=登陆成功&code='+res['code']+'&accesscode='+res['accesscode']+'&gyuid='+res['gyuid'] }); //调用服务端校验接口 }, onTokenFail: function (err) { //调用服务端校验接口 // 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。 uni.navigateTo({ url: '/pages/pages2/pages2?text=登陆失败' }); //调用服务端校验接口 console.error("demo onTokenFail", err); } }); }) });
将webview的src换成你的oneLogin.html所访问的域名 export default { data() { return { } }, methods: { } } 新建pages2.vue这一步是为了将H5所返回的数据进行记录处理，由于Uniapp和H5通信不支持postmeassg方法，于是我打算通过uni.navigateTo进行传输数据，在该页面进行其他接口操作 {{text}} {{code}} {{gyuid}} {{accesscode}} export default { data() { return { text:'', code:'', gyuid:'', accesscode:'' } }, onLoad(options) { console.log(options.text) console.log(options.code) console.log(options.gyuid) console.log(options.accesscode) this.text=options.text; this.code=options.code; this.gyuid=options.gyuid; this.accesscode=options.accesscode; uni.request({ url: 'https://******/api.php', //仅为示例，并非真实接口地址。 data: { token:options.accesscode, gyuid:options.gyuid }, method: 'POST', header: { 'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息 }, success: (res) => { console.log(res.data); if (res.data.code==200) { uni.showToast({ title:res.data.msg, duration:3000 }) } else if(res.data.code==100){ uni.showToast({ title:res.data.msg, duration:3000, icon:'none' }) } } }); }, methods: { } }测试可以成功返回数据如下图： 此接口用于获取pn（也就是加密的手机号） $appId, 'timestamp' => $timestamp, 'token' => $token, 'gyuid' => $gyuid ]; // 将请求参数转换为JSON字符串 $jsonData = json_encode($params); // 初始化cURL会话 $ch = curl_init(); // 设置cURL选项 curl_setopt($ch, CURLOPT_URL, 'https://h-gy.getui.net/v2/gy/ct_login/gy_get_pn'); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_POST, true); curl_setopt($ch, CURLOPT_POSTFIELDS, $jsonData); curl_setopt($ch, CURLOPT_HTTPHEADER, [ 'Content-Type: application/json', 'Content-Length: ' . strlen($jsonData) ]); // 执行请求并获取响应 $response = curl_exec($ch); // 检查是否有错误发生 if(curl_errno($ch)){ $error_msg = curl_error($ch); echo "cURL Error: " . $error_msg; } // 关闭cURL会话 curl_close($ch); // 处理响应 if ($response) { // 假设服务器返回的是JSON格式的数据，我们将其解码为PHP数组或对象 $result = json_decode($response, true); $code=$result['data']['result']; if ($code==20000) { die( json_encode( array( 'code' => 200, 'msg' => '返回成功', 'data' => $result ),480) ); } else { // fail die( json_encode( array( 'code' => 100, 'msg' => '返回错误', 'data' => $result ),480) ); } } else { die( json_encode( array( 'code' => 100, 'msg' => '错误', 'data' => '' ),480) ); } ?> 解密操作 // success解密 $pn=$result['data']['data']['pn']; // 解密 // 密文及密钥 // $pn = '1fbf2605f954fad3ba18115000735aee'; $masterSecret = 'bZBM********a8'; // 参数设置 $encryptMethod = 'aes-128-cbc'; $iv = '0000000000000000'; // 取16位密钥 $key = $masterSecret; while(strlen($key) |
【本文地址】
今日新闻 |
推荐新闻 |