【uniapp】个推H5号码认证一键登录（附代码）

落日映苍穹つ 2024-04-20 22:30 184阅读 0赞

前言

最近在做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 是 是 是
免费赠送 100 1000 100
服务态度 两天没问明白排队时间长 及时 未了解
同等套餐费用 便宜 便宜 最便宜

认证

实名认证

我建议企业认证，优惠多

在这里插入图片描述

产品认证

应用服务中新建一键认证，根据流程往下，添加H5认证
在这里插入图片描述

开通

产品开通后
在这里插入图片描述

需要进行H5域名配置
在这里插入图片描述

官方SDK

如有需要请自己下载

对接H5号码认证

H5认证页面

官方自带的oneLogin.html，不过由于是H5没有和Uniapp对接，需要开发者自己对接，可以采用我的，我的已完成基础使用，可通过H5将数据传递到Uniapp中进行业务处理

修改oneLogin.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  11.     <meta charset="UTF-8">
  12.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  13.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  14.     <!-- <meta > 生产上有https访问的，会导致上报的referer为空，移动运营商会去校验请求referer是否进行备案-->
  15.     <!-- step2: 添加meta -->
  16.     <meta content="always" name="referrer">
  17.     <title>H5 一键登录demo</title>
  18.     <style>
  19.         body {
  21.             display: flex;
  22.             align-items: center;
  23.             justify-content: center;
  24.             flex-direction: column;
  25.             height: 300px;
  26.         }
  28.         p {
  30.             font-size: 14px;
  31.         }
  32.     </style>
  33.     <!-- 手机查看日志 -->
  34.     <!-- <script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>
  35.     <script>
  36.         var vConsole = new VConsole();
  37.     </script> -->
  39.     <!-- 本机验证本身不需要jquery 库，此处使用仅为了在demo中减少代码量 -->
  40.     <script src="//apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
  41.     <!-- stpe1: 引入JS -->
  42.     <!-- 引入axios 网络请求依赖此库-->
  43.     <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
  44.     <!-- 本地依赖 -->
  45.     <script src="axios.min.js"></script>
  46.     <!-- 引入gysdk-min.js  注意路径-->
  47.     <script src="gysdk-min.js"></script>
  48.     <script type="text/javascript">
  49.         var userAgent = navigator.userAgent;
  50.         if (userAgent.indexOf('AlipayClient') > -1) {
  52.             // 支付宝小程序的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。
  53.             document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
  54.         } else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
  56.             // QQ 小程序
  57.             document.write(
  58.                 '<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>'
  59.             );
  60.         } else if (/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) {
  62.             // 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。
  63.             document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
  64.         } else if (/toutiaomicroapp/i.test(userAgent)) {
  66.             // 头条小程序 JS-SDK 如果不需要兼容头条小程序，则无需引用此 JS 文件。
  67.             document.write('<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>');
  68.         } else if (/swan/i.test(userAgent)) {
  70.             // 百度小程序 JS-SDK 如果不需要兼容百度小程序，则无需引用此 JS 文件。
  71.             document.write('<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.22.js"><\/script>');
  72.         } else if (/quickapp/i.test(userAgent)) {
  74.             // quickapp
  75.             document.write('<script type="text/javascript" src="https://quickapp/jssdk.webview.min.js"><\/script>');
  76.         }
  77.         if (!/toutiaomicroapp/i.test(userAgent)) {
  79.             document.querySelector('.post-message-section').style.visibility = 'visible';
  80.         }
  81.     </script>
  82.     <script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.22.js"></script>
  83.     <!-- uni 的 SDK -->
  84.     <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
  85. </head>
  87. <body>
  88.     <h3>H5 一键登录 demo 演示</h3>
  89.     <p>点击登录体验 H5 一键登录</p>
  90.     <button id='test'>登录</button>
  91.     <p>此处为点击登录模拟场景， 接入方可根据业务需求，进行修改</p>
  92. </body>
  94. </html>
  95. <script>
  96.     // 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
  97.         document.addEventListener('UniAppJSBridgeReady', function () {
  99.          const appid = "dC***输入你的appid*****b2"
  100.     //初始化个验SDK
  101.     function initGy() {
  103.         GyManager.setDebugMode(true)
  104.         GyManager.init({
  106.             app: "***输入你的app名***",
  107.             appid: appid, timeout: 3000, onResult: function (res) {
  109.                 console.log("demo init ", res);
  110.                 if (res.success) {
  112.                     initResult = res;
  113.                 }
  114.             }
  115.         });
  116.     }
  118.     //保存初始化结果
  119.     let initResult;
  120.     // 可提前判断网络状态 决定是否初始化H5一键登录
  121.     var nettype = GyManager.checkNetInfo();
  122.     console.log("demo checkNetInfo", nettype);
  123.     // 根据客户业务进行判断 网络判断返回 cellular、 wifi、 unknown
  124.     if (nettype === 'wifi') {
  126.         // 可选方案： 
  127.         // 1: 提示用户关闭wifi 进行体验
  128.         // 2: 直接降级走其他验证形式
  129.         console.error("demo wifi状态无法一键登录")
  130.         uni.navigateTo({
  132.         url: '/pages/pages2/pages2?text=wifi状态无法一键登录'
  133.                             });
  134.         //调用服务端校验接口
  135.                     // 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
  137.                 //调用服务端校验接口
  138.     } else {
  140.         // stpe3: 初始化H5一键登录
  141.         initGy()
  142.     }
  144.     // 模拟点击登录场景 可以在页面加载的时候判断网络状态后初始化就调用gateway方法
  145.     $('#test').click(() => {
  147.         // 调用H5一键登录
  148.         if (!initResult) {
  151.              uni.navigateTo({
  153.         url: '/pages/pages2/pages2?text=gysdk初始化失败,无法登录'
  154.                             });
  156.             console.error("demo gysdk初始化失败,无法登录")
  157.             // 降级走其他验证方式
  158.             return
  159.         }
  160.         //step5: 调用H5 一键登录
  161.         GyManager.oneLogin({
  163.             canSwithch: true,
  164.             logo:"./logo.png",
  165.             onTokenSuccess: function (res) {
  167.                 console.log("demo onTokenSuccess", res);
  168.                 console.log(res['code'])
  169.                 console.log(res['accesscode'])
  170.                 console.log(res['gyuid'])
  171.                 // console.log(res['code'])
  172.                 //调用服务端校验接口
  173.                     // 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
  174.                     uni.navigateTo({
  176.         url: '/pages/pages2/pages2?text=登陆成功&code='+res['code']+'&accesscode='+res['accesscode']+'&gyuid='+res['gyuid']
  177.                             });
  178.                 //调用服务端校验接口
  179.             },
  180.             onTokenFail: function (err) {
  182.                 //调用服务端校验接口
  183.                     // 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
  184.         uni.navigateTo({
  186.         url: '/pages/pages2/pages2?text=登陆失败'
  187.                             });
  188.                 //调用服务端校验接口
  189.                 console.error("demo onTokenFail", err);
  190.             }
  191.         });   
  192.     })
  193.         });
  195. </script>

在这里插入图片描述

uniapp配置

新建index.vue

将webview的src换成你的oneLogin.html所访问的域名

  1. <template>
  2.     <view>
  3.         <web-view src="https://****/h5authlogin/oneLogin.html"></web-view>
  4.     </view>
  5. </template>
  7. <script>
  8.     export default {
  10.         data() {
  12.             return {
  15.             }
  16.         },
  18.         methods: {
  21.         }
  22.     }
  23. </script>
  25. <style>
  27. </style>

新建pages2.vue

这一步是为了将H5所返回的数据进行记录处理，由于Uniapp和H5通信不支持postmeassg方法，于是我打算通过uni.navigateTo进行传输数据，在该页面进行其他接口操作

  1. <template>
  2.     <view class="">
  3.         {
  4.     {
  5.     text}}
  6.         <br />
  7.         {
  8.     {
  9.     code}}
  10.         <br />
  11.         {
  12.     {
  13.     gyuid}}
  14.         <br />
  15.         {
  16.     {
  17.     accesscode}}
  18.         <br />
  19.     </view>
  20. </template>
  22. <script>
  23.     export default {
  25.         data() {
  27.             return {
  29.             text:'',
  30.             code:'',
  31.             gyuid:'',
  32.             accesscode:''
  33.             }
  34.         },
  35.         onLoad(options) {
  37.             console.log(options.text)
  38.             console.log(options.code)
  39.             console.log(options.gyuid)
  40.             console.log(options.accesscode)
  41.             this.text=options.text;
  42.             this.code=options.code;
  43.             this.gyuid=options.gyuid;
  44.             this.accesscode=options.accesscode;
  46.             uni.request({
  48.                 url: 'https://******/api.php', //仅为示例，并非真实接口地址。
  49.                 data: {
  51.                     token:options.accesscode,
  52.                     gyuid:options.gyuid
  53.                 },
  54.                 method: 'POST',
  55.                 header: {
  57.                     'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
  58.                 },
  59.                 success: (res) => {
  61.                     console.log(res.data);
  62.                     if (res.data.code==200) {
  64.                         uni.showToast({
  66.                             title:res.data.msg,
  67.                             duration:3000
  68.                         })
  71.                     } else if(res.data.code==100){
  73.                         uni.showToast({
  75.                             title:res.data.msg,
  76.                             duration:3000,
  77.                             icon:'none'
  78.                         })
  79.                     }
  81.                 }
  82.             });
  83.         },
  85.         methods: {
  88.         }
  89.     }
  90. </script>

测试可以成功返回数据如下图：
在这里插入图片描述

新建api.php

此接口用于获取pn（也就是加密的手机号）

  1. <?php  
  3. // 假设你已经有了这些参数的值  
  4. $appId = 'dCZI*********pb2';  
  5. $timestamp = round(microtime(true) * 1000); // 获取当前毫秒时间戳  
  6. $token = $_POST['token'];  
  7. $gyuid = $_POST['gyuid']; 
  9. // 构建请求参数  
  10. $params = [  
  11.     'appId' => $appId,  
  12.     'timestamp' => $timestamp,  
  13.     'token' => $token,  
  14.     'gyuid' => $gyuid  
  15. ];  
  17. // 将请求参数转换为JSON字符串  
  18. $jsonData = json_encode($params);  
  20. // 初始化cURL会话  
  21. $ch = curl_init();  
  23. // 设置cURL选项  
  24. curl_setopt($ch, CURLOPT_URL, 'https://h-gy.getui.net/v2/gy/ct_login/gy_get_pn');  
  25. curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);  
  26. curl_setopt($ch, CURLOPT_POST, true);  
  27. curl_setopt($ch, CURLOPT_POSTFIELDS, $jsonData);  
  28. curl_setopt($ch, CURLOPT_HTTPHEADER, [  
  29.     'Content-Type: application/json',  
  30.     'Content-Length: ' . strlen($jsonData)  
  31. ]);  
  33. // 执行请求并获取响应  
  34. $response = curl_exec($ch);  
  36. // 检查是否有错误发生  
  37. if(curl_errno($ch)){
  39.     $error_msg = curl_error($ch);  
  40.     echo "cURL Error: " . $error_msg;  
  41. }  
  43. // 关闭cURL会话  
  44. curl_close($ch);  
  46. // 处理响应  
  47. if ($response) {
  49.     // 假设服务器返回的是JSON格式的数据，我们将其解码为PHP数组或对象  
  50.     $result = json_decode($response, true); 
  51.     $code=$result['data']['result'];
  52.     if ($code==20000) {
  55.         die(
  56.         json_encode(
  57.             array(
  58.             'code' => 200,
  59.             'msg' => '返回成功',
  60.             'data' => $result
  62.         ),480)
  63. );   
  64.     } else {
  66.         // fail
  67.         die(
  68.         json_encode(
  69.             array(
  70.             'code' => 100,
  71.             'msg' => '返回错误',
  72.             'data' => $result
  74.         ),480)
  75. );   
  76.     }
  80. } else {
  82.     die(
  83.         json_encode(
  84.             array(
  85.             'code' => 100,
  86.             'msg' => '错误',
  87.             'data' => ''
  89.         ),480)
  90. );   
  91. }  
  93. ?>

解密操作

  1. // success解密
  2. $pn=$result['data']['data']['pn'];
  3. // 解密
  4. // 密文及密钥
  5. // $pn = '1fbf2605f954fad3ba18115000735aee';
  6. $masterSecret = 'bZBM********a8';
  8. // 参数设置
  9. $encryptMethod = 'aes-128-cbc';
  10. $iv = '0000000000000000';
  12. // 取16位密钥
  13. $key = $masterSecret;
  14. while(strlen($key) < 16){
  16.     $key .= $masterSecret;
  17. }
  18. $key = substr($key, 0, 16);
  20. // 解密
  21. $result = openssl_decrypt(hex2bin($pn), $encryptMethod, $key, 1, $iv);
  22. //echo $result;
  24.         // 解密成功返回手机号

完整项目代码

uniapp个推H5号码认证一键登录demo

使用教程

解压所有文件上传到网站 下载uniapp到本地解压运行

1、修改oneLogin.html的配置信息，直接访问测试可调用、能使用 就可以下一步
2、修改uniapp端的index.vue和pages2.vue接口域名换成自己的就可以

打包uniapp项目部署到网站，访问项目即可剩下的自己配置了

最后

《记一次云之家签到抓包》
《记一次视频抓包m3u8解密过程》
《抓包部分软件时无网络+过代理检测 解决办法 安卓黄鸟httpcanary+vmos》
《Python】记录抓包分析自动领取芝麻HTTP每日免费IP（成品+教程）》
《某课抓包视频 安卓手机：黄鸟+某课app+VirtualXposed虚拟框架》

推荐专栏：

《Python爬虫脚本项目实战》

该专栏往期文章：
《【Python爬虫项目实战一】获取Chatgpt3.5免费接口文末付代码（过Authorization认证）》

?如果感觉看完文章还不过瘾，欢迎查看我的其它专栏
?作者对python有很大的兴趣，完成过很多独立的项目：例如滇医通等等脚本，但是由于版权的原因下架了，爬虫这一类审核比较严谨，稍有不慎就侵权违规了，所以在保证质量的同时会对文章进行筛选

如果您对爬虫感兴趣请收藏或者订阅该专栏哦《Python爬虫脚本项目实战》，如果你有项目欢迎联系我，我会同步教程到本专栏！

?Python爬虫项目实战系列文章！！
⭐⭐欢迎订阅⭐⭐

【Python爬虫项目实战一】获取Chatgpt3.5免费接口文末付代码（过Authorization认证）
【Python爬虫项目实战二】Chatgpt还原验证算法-解密某宝伪知网数据接口

⭐⭐欢迎订阅⭐⭐
在这里插入图片描述

Python爬虫脚本项目实战
在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，184人围观）

还没有评论，来说两句吧...

相关阅读

    相关 uniapp H5 JSSDK封装使用

    先看效果吧， 封装以后使用很方便，两行代码就能得到微信网页开发中的 jssdk 的 wx.config 执行了 wx.ready 还是 wx.error ，如果返回 true

    朱雀朱雀/ 0 赞/ 467 阅读