【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域名配置
在这里插入图片描述


官方SDK

如有需要请自己下载


对接H5号码认证

H5认证页面

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

修改oneLogin.html

<!DOCTYPE html>
<html lang="en">

<head>
    	
	
	
	
	
	
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <meta > 生产上有https访问的,会导致上报的referer为空,移动运营商会去校验请求referer是否进行备案-->
    <!-- step2: 添加meta -->
    <meta content="always" name="referrer">
    <title>H5 一键登录demo</title>
    <style>
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            height: 300px;
        }

        p {
            font-size: 14px;
        }
    </style>
    <!-- 手机查看日志 -->
    <!-- <script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>
    <script>
        var vConsole = new VConsole();
    </script> -->

    <!-- 本机验证本身不需要jquery 库,此处使用仅为了在demo中减少代码量 -->
    <script src="//apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
    <!-- stpe1: 引入JS -->
    <!-- 引入axios 网络请求依赖此库-->
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
    <!-- 本地依赖 -->
    <script src="axios.min.js"></script>
    <!-- 引入gysdk-min.js  注意路径-->
    <script src="gysdk-min.js"></script>
    <script type="text/javascript">
		var userAgent = navigator.userAgent;
		if (userAgent.indexOf('AlipayClient') > -1) {
			// 支付宝小程序的 JS-SDK 防止 404 需要动态加载,如果不需要兼容支付宝小程序,则无需引用此 JS 文件。
			document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
		} else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
			// QQ 小程序
			document.write(
				'<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>'
			);
		} else if (/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) {
			// 微信小程序 JS-SDK 如果不需要兼容微信小程序,则无需引用此 JS 文件。
			document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
		} else if (/toutiaomicroapp/i.test(userAgent)) {
			// 头条小程序 JS-SDK 如果不需要兼容头条小程序,则无需引用此 JS 文件。
			document.write('<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>');
		} else if (/swan/i.test(userAgent)) {
			// 百度小程序 JS-SDK 如果不需要兼容百度小程序,则无需引用此 JS 文件。
			document.write('<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.22.js"><\/script>');
		} else if (/quickapp/i.test(userAgent)) {
			// quickapp
			document.write('<script type="text/javascript" src="https://quickapp/jssdk.webview.min.js"><\/script>');
		}
		if (!/toutiaomicroapp/i.test(userAgent)) {
			document.querySelector('.post-message-section').style.visibility = 'visible';
		}
	</script>
	<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.22.js"></script>
	<!-- uni 的 SDK -->
	<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
</head>

<body>
    <h3>H5 一键登录 demo 演示</h3>
    <p>点击登录体验 H5 一键登录</p>
    <button id='test'>登录</button>
    <p>此处为点击登录模拟场景, 接入方可根据业务需求,进行修改</p>
</body>

</html>
<script>
	// 待触发 `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);
            }
        });   
    })
		});
   
</script>

在这里插入图片描述

uniapp配置

新建index.vue

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


<template>
	<view>
		<web-view src="https://****/h5authlogin/oneLogin.html"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		
		methods: {
			
		}
	}
</script>

<style>

</style>

新建pages2.vue

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

<template>
	<view class="">
		{{text}}
		<br />
		{{code}}
		<br />
		{{gyuid}}
		<br />
		{{accesscode}}
		<br />
	</view>
</template>

<script>
	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: {
			
		}
	}
</script>

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

新建api.php

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

<?php  
  
// 假设你已经有了这些参数的值  
$appId = 'dCZI*********pb2';  
$timestamp = round(microtime(true) * 1000); // 获取当前毫秒时间戳  
$token = $_POST['token'];  
$gyuid = $_POST['gyuid']; 
  
// 构建请求参数  
$params = [  
    'appId' => $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) < 16){
    $key .= $masterSecret;
}
$key = substr($key, 0, 16);

// 解密
$result = openssl_decrypt(hex2bin($pn), $encryptMethod, $key, 1, $iv);
//echo $result;

        // 解密成功返回手机号

完整项目代码

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爬虫脚本项目实战
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/526035.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

谷歌浏览器插件开发速成指南:弹窗

诸神缄默不语-个人CSDN博文目录 本文介绍谷歌浏览器插件开发的入门教程&#xff0c;阅读完本文后应该就能开发一个简单的“hello world”插件&#xff0c;效果是出现写有“Hello Extensions”的弹窗。 作为系列文章的第一篇&#xff0c;本文还希望读者阅读后能够简要了解在此基…

爬取日本常用汉字秘籍

前言 昨天投简历时遇到了这样的一个笔试。本以为会是数据结构算法之类的没想到直接发了一个word直接提需求&#xff0c;感觉挺有意思就写了这篇文章&#xff0c;感兴趣的朋友可以看看。 1. 网页内容解析 首先&#xff0c;我们通过请求网页获取到日本常用汉字的链接列表。然后…

计算机网络——38报文完整性

报文完整性 数字签名 数字签名类比于手写签名 发送方数字签署了文件&#xff0c;前提是他是文件的拥有者/创建者可验证性&#xff0c;不可伪造性&#xff0c;不可抵赖性 谁签署&#xff0c;接收方可以向他人证明是他&#xff0c;而不是其他人签署了这个文件签署了什么&#…

Web攻击越发复杂,企业如何保护云上业务

如今&#xff0c;电子政务、电子商务、网上银行、网上营业厅等依托Web应用&#xff0c;为广大用户提供灵活多样的服务。在这之中&#xff0c;流量攻击堪称是Web应用的最大敌人&#xff0c;黑客通过流量攻击获取利益、竞争对手雇佣黑客发起恶意攻击、不法分子通过流量攻击瘫痪目…

ShardingSphere-JDBC使用时出现雪花算法id无法生成

出现报错&#xff1a; 这是sql 尝试1&#xff1a; 这里改成Long 还是报错 尝试2&#xff1a;将配置重写 删除 props: # 主键生成器属性配置worker-id: 1 # Snowflake算法中的workerId配置解决&#xff01;

基于Difussion图像、视频生成综述

2024年大年初七&#xff08;02.16&#xff09;OpenAI 发布视频生成模型 Sora 在各大平台转疯了&#xff0c;和2022年发布ChatGPT3.5时一样的疯狂。在开工第一天&#xff0c;我就去官网上看了 Sora 的技术报告&#xff0c;遗憾的是&#xff0c;在这份技术报告中只披露了一些模型…

苹果证书分类及作用详解,助力开发者高效管理应用程序

转载&#xff1a;苹果证书的作用及分类详解 摘要&#xff1a;本文将详细介绍苹果证书的作用及分类&#xff0c;包括企业证书、开发者证书、 推送证书、分发证书和MDM证书&#xff0c;帮助开发者了解如何正确使用和管理这些证书&#xff0c; 提升应用程序的开发和发布效率。 引…

基于SSM的校园二手物品交易平台论文

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本校园二手物品交易平台就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数据…

基于单片机分舱式电开水炉位控制系统

**单片机设计介绍&#xff0c;基于单片机分舱式电开水炉位控制系统 文章目录 一 概要二、功能设计三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机分舱式电开水炉位控制系统概要主要涉及通过单片机对电开水炉的各个舱位进行精确控制&#xff0c;实现水位、温度…

C++中的指针:其重要性与应用深度解析

在C编程语言的世界中&#xff0c;指针无疑是一个至关重要的概念。它不仅是C语言的核心特性之一&#xff0c;更是实现高效、灵活编程的关键工具。理解并熟练掌握指针的使用&#xff0c;对于提升程序设计能力、优化代码性能以及深入理解计算机内存模型具有不可估量的价值。 为了帮…

HarmonyOS 应用开发-ArkUI(ets)仿“腾讯新闻”APP

一、效果演示 1、新闻列表页 2、新闻详情页、图片展示页 3、视频页 4、动态页 二、 流程图 –本来自定义了视频的控制栏的&#xff0c;但是发现VideoController()控制器的bug会导致控制器失效&#xff0c;所以没继续做。视频页先不搞了。 三、文件组织&#xff08;“我的页面…

mac上搭建鸿蒙开发环境(2024)

开发环境 设备 MacBook Pro 芯片 Apple M1 系统 11.4 内存 16 GB 一、下载公开版本的DevEco Studio 华为官方目前对外提供的版本是DevEco Studio 3.1&#xff0c;可在官网下载https://developer.huawei.com/consumer/cn/deveco-studio/ 因为目前还在学习阶段&#xff0c;…

OpenHarmony实战:轻量系统STM32F407芯片移植案例

介绍基于STM32F407IGT6芯片在拓维信息Niobe407开发板上移植OpenHarmony LiteOS-M轻量系统&#xff0c;提供交通、工业领域开发板解决方案。 移植架构采用Board与SoC分离方案&#xff0c;使用arm gcc工具链Newlib C库&#xff0c;实现了lwip、littlefs、hdf等子系统及组件的适配…

循序表实战——基于循序表的通讯录

前言&#xff1a;本篇文章主要是利用顺序表作为底层&#xff0c; 实现一个通讯录。偏向于应用&#xff0c; 对于已经学习过c的友友们可能没有难度了已经。没有学习过c的友友&#xff0c; 如果顺序表不会写&#xff0c; 或者说没有自己实现过&#xff0c; 请移步学习顺序表相关内…

xgo: golang基于-toolexec实现猴子补丁

注&#xff1a; 转载请注明出处&#xff0c; 原文链接。 概述 在这篇博客中&#xff0c;我将详细介绍 xgo 的实现细节。 如果你不知道&#xff0c;xgo 项目位于 https://github.com/xhd2015/xgo。 它的作用很简单&#xff0c;就是在每个 Go 函数的开头添加拦截器&#xff0…

python-面向对象编程

面向对象编程 面向对象&#xff0c;python中支持两种编程方式&#xff0c;来写代码&#xff0c;分别是&#xff1a;函数式编程和面向对象 函数式&#xff1a; # 定义函数&#xff0c;在函数中实现功能 def func():print("一个NB的功能")面向对象 calss FOO(object):d…

git提交代码时报错,提不了

问题 今天在换了新电脑&#xff0c;提交代码时报错 ✖ eslint --fix found some errors. Please fix them and try committing again. ✖ 21 problems (20 errors, 1 warning) husky > pre-commit hook failed (add --no-verify to bypass) 解决 通过 --no-verify 解决&…

JavaScript - 请你说一说对随机数的理解

难度级别:初级及以上 提问概率:40% 在前端开发中,随机数的应用场景非常多,而且也是一个常见的考点。例如网页登录的验证码,看似只有4个随机数字加字母的组合,其实这也是随机数的范畴;例如在抽奖算法中,可以用随机数确定用户中奖的概率…

解决电脑无故自动关机或重启的15种方法,总有一种适合你

序言 你的Windows PC是否在没有警告的情况下关闭或重新启动?这背后有几个潜在的原因。例如,它可能是软件/硬件冲突、过热或硬盘驱动器错误。本故障排除指南将概述在Windows 10/11中修复自动关闭和重新启动的多个解决方案。 如果你的计算机经常关闭,则必须在安全模式下启动…

如何实现异地公网环境访问本地部署的支付宝沙箱环境调试支付SDK

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…