uni-app微信小程序获取手机号授权登录(复制即用,js完成敏感数据对称解密,无需走服务端处理)

news2024/11/9 6:12:08

目录

一、示例

二、具体实现说明


一、示例

  • 获取到的手机号

二、具体实现说明

属性说明
属性名说明生效时机
@getphonenumber获取用户手机号回调open-type="getPhoneNumber"
  •  按钮写法
<template>
	<view class="login">
		<view class="content">
			<button class="button_wx" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
				<u-icon name="weixin-fill" color="#FFFFFF" size="50"></u-icon>
				<text class="button_text">授 权 登 录</text>
			</button>
		</view>
	</view>
</template>
接口说明
接口说明
wx.login()获取登录凭证(code),通过凭证进而换取用户登录态信息
auth.code2Session登录凭证校验
参数说明
参数说明
code用户登录凭证(有效期五分钟),只能消费一次
WXBizDataCrypt.js用于对称解密微信接口返回的敏感数据(底部标红处有下载地址
appid微信公众号平台申请的AppID(小程序ID)
secret微信公众号平台申请的AppSecret(小程序密钥)
js_code登录时获取的 code
grant_type授权类型(只需填写 authorization_code)
返回值说明
返回值说明
openid用户唯一标识
session_key会话密钥
unionid用户在开放平台的唯一标识符,若当前小程序已绑定到微信开放平台帐号下会返回,详见 UnionID 机制说明
errcode错误码
errmsg错误信息
encryptedData包括敏感数据在内的完整用户信息的加密数据
iv加密算法的初始向量,详见 用户数据的签名验证和加解密
errcode的合法值
说明
-1系统繁忙,此时请开发者稍候再试
0请求成功
40029code 无效
45011频率限制,每个用户每分钟100次
40226高风险等级用户,小程序登录拦截 。风险等级详见用户安全解方案
  • 解密算法js下载

        下载地址:WXBizDataCrypt.js 

  •  具体实现(代码复制即用)
<script>
	import WXBizDataCrypt from "@/utils/WXBizDataCrypt.js";//必要解密js
	let that;
	export default {
		data() {
			return {
				appid: '填写你自己的appid',//必要
				secret: '填写你自己的secret',//必要
				code: '',//临时登录凭证
			};
		},
		mounted() {
			that = this;
			that.isLogin();
			that.getWxCode();
		},
		methods: {
			isLogin() {
				try {
					const phoneNumber = uni.getStorageSync('phoneNumber');
					if (phoneNumber) {//自动登录
						// 业务登录方法

					}
				} catch (e) {
					// error
				}
			},
			// 获取临时登录凭证
			getWxCode() {
				wx.login({
					success: res => {
						console.log('获取用户临时登录凭证code:', res.code);
						that.code = res.code;
					}
				})
			},
			// 获取手机号的回调函数
			getPhoneNumber(e) {
				const {
					errMsg,
					encryptedData,
					iv
				} = e.detail;
				if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
					console.log('用户拒绝授权=>');
				} else {
					console.log('用户同意授权=>', errMsg);
					console.log('用户手机号加密数据:', e.detail.encryptedData);
					console.log('加密算法的初始向量:', iv);
					console.log('开始校验登录凭证code=>');
					//登录凭证校验,返回用户唯一标识、会话密钥
					uni.request({
						url: 'https://api.weixin.qq.com/sns/jscode2session',//微信登录凭证校验接口
						data: {
							appid: that.appid,
							secret: that.secret,
							js_code: that.code,
							grant_type: 'authorization_code'
						},
						success(sessionRes) {
							console.log('登录凭证code校验成功=>');
							const {
								openid,
								session_key
							} = sessionRes.data;
							console.log('用户唯一标识:', openid);
							console.log('会话密钥:', session_key);
							console.log('开始解密用户手机号=>');
							var pc = new WXBizDataCrypt(that.appid, session_key);
                            //解密用户数据
							var data = pc.decryptData(encryptedData, iv);
							if (data) {
								console.log('用户手机号解密成功: ', data.phoneNumber);
								uni.setStorageSync("phoneNumber", data.phoneNumber);
								// 业务登录方法
								// that.startLogin(data.phoneNumber);

							}
						}
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		min-height: 100vh;
	}

	.content {
		margin-top: 500rpx;
	}

	.button_wx {
		background-color: #07c160;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		font-size: 30rpx;
		width: 601rpx;
		height: 100rpx;
		border-radius: 2.5rem;
	}

	.button_text {
		font-size: 20px;
		margin-left: 0.5em;
	}
</style>


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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

为什么要写这个带点玄幻气息的英语单词记忆博客

&#x1f31f;博主&#xff1a;命运之光 ☀️专栏&#xff1a;英之剑法&#x1f5e1; ❤️‍&#x1f525;专栏&#xff1a;英之试炼&#x1f525; ☀️博主的其他文章&#xff1a;点击进入博主的主页 &#x1f433; 开篇想说的话&#xff1a;开学就大三了&#xff0c;命运之光…

DMA详解及应用(嵌入式学习)

DMA 0. 前言1. DMA作用2. DMA特性3. DMA寄存器4. DMA的增量或者循环模式5. 练习 0. 前言 DMA&#xff08;Direct Memory Access&#xff0c;直接内存访问&#xff09;是一种计算机系统中用于高效地实现数据传输的技术。它允许数据在外设和内存之间直接传输&#xff0c;而无需C…

GEE:为每个对象(斑块/超像素)添加属性

作者:CSDN @ _养乐多_ 本文将介绍为每个对象(斑块/超像素)添加属性的代码。并举例将最近距离作为属性添加到每个对象(斑块/超像素)特征中。 结果如下图所示, 文章目录 一、代码二、代码链接一、代码 这段代码的目的是对动态世界土地覆盖图像进行分析,并提取出其中的目…

贪婪算法简介-数据结构和算法教程

贪婪算法是一种算法范例&#xff0c;它遵循在每个阶段进行局部最优选择的问题求解启发式&#xff0c;希望找到全局最优值。换句话说&#xff0c;贪婪算法在每一步都选择最好的可能选项&#xff0c;而不考虑该选择对未来步骤的影响。 当一个问题可以被划分成更小的子问题&#…

1.GPIO的工作原理

1.stm32引脚说明&#xff1a; 对于stm32f103zet6&#xff1a; 一共有7组io口&#xff1b;每组io口有16个io&#xff1b;一共有16*7112个io&#xff1b;分组情况为&#xff1a;GPIOA&#xff0c;GPIOB~GPIOG&#xff1b; 2.GPIO的基本结构&#xff1a; 3.GPIO的工作模式&…

C++入门:类和对象(后)

目录 前言&#xff1a; 一&#xff1a;static成员 (1)概念 (2)特性 (3)例子 二&#xff1a;explicit关键字 三&#xff1a;内部类 (1)概念 (2)特性 (3)实例 四&#xff1a;匿名对象 (1)概念 (2)特性 (3)实例 五&#xff1a;拷贝对象时的一些编译器优化 (1)引入 …

Spring整合MyBatis底层原理

Spring整合MyBatis底层原理 项目结构图 项目代码 build.gradle需要进入的依赖 // testImplementation(platform("org.junit:junit-bom:5.9.1")) // testImplementation("org.junit.jupiter:junit-jupiter")implementation("org.aspectj:aspect…

电池SOC和动力电池OCV功率联合估计研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

爱心方程(理科生的浪漫?)

目录 前言 C/C 源代码 扩展 Java Python HTML 前言 这个在大一的时候就想找了&#xff0c;然后后面是找到了一个&#xff0c;但是忘记出处了。我决定把可以找到的所有爱心给整理一下&#xff0c;为了实现“理科生的浪漫”&#xff01;&#xff01;&#xff01; C/C 首先…

你认为年轻人存款难吗?难啊难,难如上青天!!!

近日&#xff0c;有调查称“大概五分之一的年轻人存款在一万元以内。10万元存款是一个“坎”&#xff0c;存款超过10万就会超过53.7%的人。”“年轻人”“存款”两个词碰撞在一起&#xff0c;引来了广泛的关注和讨论。你认为年轻人存款难吗&#xff1f;可以从以下几个角度发表你…

Linux Nacos 设置systemctl service 并添加为开机启动

为方便在启动服务器时&#xff0c;不需要一个一个手动启动服务&#xff0c;需要把nacos设置为开机启动。方法如下&#xff1a; 在/usr/lib/systemd/system 目录下面添加nacos.service脚本&#xff1a; # 下面这一行必须有&#xff0c;不然会报错 #vim /usr/lib/systemd/system…

libevent(3)IO模型基础知识

一、用户态和内核态 我们知道现在的操作系统是分层的&#xff0c;内核封装了与底层的接口&#xff0c;通过系统调用提供给上层应用使用。 当进程运行在内核空间时&#xff0c;它就处于内核态&#xff1b;当进程运行在用户空间时&#xff0c;它就处于用户态。 当我们需要进行IO操…

【小沐学Python】网络爬虫之requests

文章目录 1、简介2、requests方法2.1 get2.2 post 3、requests响应信息4、requests的get方法4.1 url4.2 headers4.3 params4.4 proxies4.5 verify4.6 timeout4.7 cookies4.8 身份验证 3、测试代码3.1 获取网页HTML&#xff08;get&#xff09;3.2 获取网页HTML&#xff08;带he…

【LeetCode热题100】打卡第26天:最大矩形

文章目录 最大矩形⛅前言&#x1f512;题目&#x1f511;题解 最大矩形 ⛅前言 大家好&#xff0c;我是知识汲取者&#xff0c;欢迎来到我的LeetCode热题100刷题专栏&#xff01; 精选 100 道力扣&#xff08;LeetCode&#xff09;上最热门的题目&#xff0c;适合初识算法与数…

随着ChatGPT、文言一心的大火,未来可能的生活工作方式

前面的文章笼统的扯了一些ChatGPT、文言一心的差异化&#xff0c;感觉还是不够明白直观。特地找了一份资料&#xff0c;通过基础能力、进阶能力、和一些垂直领域的几百个各种问题&#xff0c;来对比分析两者的回答情况&#xff0c;让大家可以有个更接地气的了解。 由于问题太多…

无限脉动:释放音乐和区块链在音乐领域的力量

音乐是一种永恒的通用语言&#xff0c;它将人们聚集在一起&#xff0c;超越了边界&#xff0c;在我们灵魂深处产生共鸣&#xff0c;创造联系。在当今数字时代&#xff0c;随着区块链技术和去中心化网络的出现&#xff0c;音乐世界正在经历一场深刻的变革。 我们在与艺术家合作&…

动态规划 DP (二)

3.二维动态规划 1) 力扣https://leetcode.cn/problems/minimum-path-sum/第一行的的路径只与左边的元素有关&#xff0c;第一列的路径只与上面的元素有关。 除了第一行和第一列&#xff0c;其他元素的路径取决于左边和上面元素的最小值。 只要每次都选择值最小的路径&#…

2021电工杯数学建模B题解题思路(光伏建筑一体化板块指数发展趋势分析及预测)

目录 一、前言 二、问题背景 三、具体问题 四、解题思路 &#xff08;一&#xff09;整体思路 &#xff08;二&#xff09;问题一 &#xff08;三&#xff09;问题二 &#xff08;四&#xff09;问题三 &#xff08;五&#xff09;问题四 &#xff08;六&#xff09;…

2023最新谷粒商城笔记之秒杀服务篇(全文总共13万字,超详细)

秒杀服务 秒杀具有瞬间高并发的特点&#xff0c;针对这一特点&#xff0c;必须要做限流异步缓存(页面静态化)独立部署 限流方式&#xff1a; 前端限流&#xff0c;一些高并发的网站直接在前端页面开始限流&#xff0c;例如&#xff1a;小米的验证码设计Nginx 限流&#xff0c…

ChatGPT从入门到精通,深入认识Prompt

ChatGPT从入门到精通&#xff0c;一站式掌握办公自动化/爬虫/数据分析和可视化图表制作 全面AI时代就在转角 道路已经铺好了 “局外人”or“先行者” 就在此刻 等你决定让ChatGPT帮你高效实现职场办公&#xff01;行动起来吧1、ChatGPT从入门到精通&#xff0c;一站式掌握办公…