uniapp在小程序登录,获取用户信息,获取手机号等流程

uniapp小程序的授权描述
1、微信小程序通过uni.login()方法可以获取到微信提供的code
2、通过登录获取的code码可以以获取用户唯一标识openid以及会话密钥sessionkey用于解密获取手机的加密信息
3、通过微信提供的获取微信手机号的方法getphonenumber拿到encryptedData iv两个字段的内容
4、通过微信提供的解密方法:可以拿到最终的手机号
5、获取用户的头像,昵称等直接调用uni.getUserProfile()方法即可

1.使用微信小程序获取code

<view @click="hqCode">登录</view>
hqCode(){ // 获取登录凭证
				uni.login({
				    provider: 'weixin',
				    success: res => {
						console.log(res)
					}
				});
			}

正常返回内容如下:
在这里插入图片描述
2、通过登录获取的code码可以以获取用户唯一标识openid以及会话密钥sessionkey用于解密获取手机的加密信息

<view class="" @click="hqJMXX">获取密钥sessionkey</view>
hqJMXX(){ // 获取密钥 === 需要登录才可以获取密钥
				uni.request({
				    url: 'https://api.weixin.qq.com/sns/jscode2session',// 请求微信服务器
				    method:'GET',
				    data: {
						appid: '这里是你的小程序aphid',        //你的小程序的APPID
						secret: '这里是你小程序生成的密钥',    //你的小程序秘钥secret,  
						js_code: '第一步登录拿到的code',    //wx.login 登录成功后的code
						grant_type:'authorization_code' //此处为固定值
				    },
				    success: (res) => {
				        console.log('获取信息',res); 
				    }
				});
			},

下面是正确返回值
在这里插入图片描述
错误信息如下原因:传递参数不正确
在这里插入图片描述
如何查看自己appid与小程序密钥:
登录网址:https://mp.weixin.qq.com/wxamp/devprofile/get_profile?token=197451409&lang=zh_CN
在这里插入图片描述
3、通过微信提供的获取微信手机号的方法getphonenumber拿到encryptedData iv两个字段的内容
前情提要: 在使用uniapp开发小程序时,获取用户手机号码需要提交商家信息。这是因为获取用户手机号码需要使用微信开放平台的接口,而微信开放平台要求开发者必须先进行认证,提交商家信息后才能使用该接口。商家信息包括企业名称、营业执照、联系人信息等。只有通过认证的开发者才能使用微信开放平台的接口,包括获取用户手机号码的接口。

<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取电话</button>
getPhoneNumber(res){ // 获取手机号
				console.log(res)
				this.phone_code = res.detail.code // 获得的手机code
				this.phone_encryptedData = res.detail.encryptedData //用于解密
				this.phone_iv = res.detail.iv // 用于解密
				
			},

返回值如下:
在这里插入图片描述
4.通过微信提供的解密方法:可以拿到最终的手机号
下载引入的文件链接地址:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/signature.html

在这里插入图片描述

<view @click="jiemi">点击解密</view> 
import WXBizDataCrypt from "@/static/wx/WXBizDataCrypt.js" // 需要引入
jiemi(){ // 解密需要appid 会话密钥;然后需要手机号的加密字段
				let pc = new WXBizDataCrypt('这里是appid',this.session_key);
				let data = pc.decryptData(this.phone_encryptedData , this.phone_iv);  
				console.log(data)       //data就是最终解密的用户信息  
				this.phone = data.phoneNumber // 手机号
			}

下面是返回值:
在这里插入图片描述
5、获取用户的头像,昵称等

<view class="" @click="get_user">获取用户信息</view>

get_user(){ // 获取用户信息
				uni.getUserProfile({
					desc: '用户登录',
					success: res => {
						console.log(res)// 用户的信息
						this.user_img = res.userInfo.avatarUrl //微信头像
						this.user_name = res.userInfo.nickName // 微信昵称
					}
				})
			},

下面是获取用户得返回值:
在这里插入图片描述
为什么获取的信息是加密的这一点我也不是很清楚,如果有高手还请指点一二

  • 19
    点赞
  • 106
    收藏
    觉得还不错? 一键收藏
  • 7
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值