概述

在uniapp开发微信小程序的过程中，需要在微信端登录，获取用户的信息（头像，昵称内容，手机号），为了方便用户，直接通过微信授权的方式进行登录获取，免去了app中需要注册然后登录输入密码获取验证码等一些列的繁琐步骤。

uniapp小程序的授权描述

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

注意：本步骤不设计相关业务的逻辑描述，只是获取微信的用户信息，具体的业务逻辑和前后端的操作以自己本身业务为准。

授权的详细说明及使用

下面详细的说一下每个步骤的内容有哪些，需要哪些信息，返回哪些信息

1、微信小程序通过uni.login()方法可以获取到微信提供的code

uni.login()是调用接口获取登录凭证code
uiniapp-api登录文档：https://uniapp.dcloud.io/api/plugins/login.html#login

<view @click="login">登录</view>

login(){ // 获取登录凭证uni.login({provider: 'weixin',success: res => {console.log(res)this.login_code = res.code // 获得的code}});}

下面是返回的内容

2、通过登录获取的code码可以以获取用户唯一标识openid以及会话密钥sessionkey用于解密获取手机的加密信息

【登录凭证校验】请求微信服务器文档地址：https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/login/auth.code2Session.html#%E8%AF%B7%E6%B1%82%E5%9C%B0%E5%9D%80

注意：该步骤向腾讯发送请求需要以下参数

appid:小程序appid获取要在微信公众平台登录你的小程序，然后在开发管理-开发设置里面获取
secret:secret为AppSecret(小程序密钥) ，在小程序 - 开发者管理 - 开发设置中生成获取
js_code:在第一步调用接口获取的登录凭证code
grant_type:默认填写authorization_code即可

请求成功获得的数据（用于解密等作用）

openid：得到用户唯一标识
session_key：得到会话密钥

<view class="" @click="get_miyao">获取密钥sessionkey</view>

get_miyao(){ // 获取密钥 === 需要登录才可以获取密钥uni.request({url: 'https://api.weixin.qq.com/sns/jscode2session',// 请求微信服务器method:'GET',data: {appid: '这里是你的小程序aphid',        //你的小程序的APPIDsecret: '这里是你小程序生成的密钥',    //你的小程序秘钥secret,  js_code: '第一步登录拿到的code',    //wx.login 登录成功后的codegrant_type:'authorization_code'},success: (res) => {console.log('获取信息',res);  // 换取成功后 暂存这些数据 留作后续操作this.openid=res.data.openid    //openid 用户唯一标识this.session_key=res.data.session_key    //session_key  会话密钥}});},

下面是返回的内容

3、通过微信提供的获取微信手机号的方法getphonenumber拿到encryptedData iv两个字段的内容

使用button来获取手机号官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/button.html
获取手机号方法官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html

如下：通过调用获得的数据

code：手机的code动态令牌。可通过动态令牌换取用户手机号。
encryptedData：第四步需要解密的字段 === 可获得手机号
iv：第四步需要解密的字段 === 可获得手机号

<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取电话</button>

getPhoneNumber(res){ // 获取手机号console.log(res)this.phone_code = res.detail.code // 获得的手机codethis.phone_encryptedData = res.detail.encryptedData //用于解密this.phone_iv = res.detail.iv // 用于解密},

下面是返回的内容

4、通过微信提供的解密方法：可以拿到最终的手机号

下载引入的文件链接地址
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/signature.html

解密需要的内容

appID：小程序的appid
session_key：第二步返回的会话密钥
encryptedData：第三步返回的内容
iv：第三步返回的内容

<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、获取用户的头像，昵称等直接调用uni.getUserProfile()方法即可

官方调整说明：https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801?highLine=login
官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserProfile.html#%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81

<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 // 微信昵称}})},

以下是返回的内容

uniapp在小程序中登录，获取用户信息，获取手机号逻辑记录相关推荐

1. 微信小程序授权登录以及用户信息相关接口调整导致授权框不弹出问题解决办法

   4月8号升级了小程序业务后提交了版本并上线.突然一个同事说体验版的点击"登录"按钮无效.当时觉得应该不会呀,这几天一直用手机调试,每天也在不停的登录授权,弹框一直有的呀.然后为了验 ...

2. 微信小程序同一个登录按钮上触发获取微信用户信息和电话号码

   微信小程序同一个登录按钮上触发获取微信用户信息和电话号码 因为微信小程序获取用户信息getuserinfo方法和获取电话号码open-type="getPhoneNumber" @ ...

3. uniapp微信小程序授权登录和获取微信绑定的手机号码

   uniapp微信小程序授权登录和获取微信绑定的手机号码 弹出授权的弹框 <view class="weixinOk" @tap="getUserProfile&qu ...

4. 小程序中神秘的用户数据

   前面 上一篇文章手把手教会你小程序登录鉴权介绍了小程序如何进行登录鉴权,那么一般小程序的用户标识可以使用上文所述微信提供的jscode2session接口来换取,小程序还提供了一个getUserInf ...

5. 支付宝小程序获取用户信息及手机号

   支付宝小程序获取用户信息及手机号 众所周知,微信小程序是可以通过微信本身授权后再登录,平台可以拿到微信用的的账号相关信息,然后保存到数据库中,那么同理在支付宝小程序开发过程中,登录功能的设计也可以如此 ...

6. uniapp中微信小程序获取用户信息与手机号

   <!-- #ifdef MP-WEIXIN --><view><button open-type="getUserInfo" @getuserinfo ...

7. 小程序登录及用户信息和手机号的获取

   登录流程 小程序通过 wx.login 获取 code(用户登录凭证,有效期五分钟,使用一次后实效) 服务端拿到 code,调用 code2Session,获取用户的 openid (用户在当前应用的 ...

8. uniapp微信小程序授权登录并获取手机号

   新版:前端要授权两次,一次获取用户信息授权码code,另外一次获取用户手机授权码code,全部传给后端.后端通过用户信息授权码获取openid,通过手机授权码获取手机号码.老版:前端传给后端授权码co ...

9. （详细版）java实现小程序获取微信登录，用户信息，手机号，头像

   ps:springboot结合mybatisPlus.mysql实现,简单易懂,一件粘贴使用,详细往下看↓ 步骤: 1.注册微信开发平台账号,并创建小程序,获取小程序的AppID和AppSecret. ...

最新文章

1. Builder (建造者) — 【面向对象设计模式学习】
2. 输入法项目-用delphi生成GBK 中文编码 GBK 扩充汉字编码表(3) GBK/3: $8140 —$A0FE(部分)...
3. Spring Webflux: Kotlin DSL [片断]
4. Linux sendmail 服务器
5. C++易于实现的有趣项目【附上完整教程】
6. dwr配置文件dwr.xml详解
7. css word-wrap_CSS中分词“ break-all”和“ break-word”的值之间的差异
8. android5.1使用SerialManagerService
9. Java运算符和类型转换
10. 获取China大陆IP段的范围
11. 读《电商产品经理宝典》——重点摘录总结
12. Nordic nrf 蓝牙 ble 透传应用
13. 如何通过织云 Lite 愉快地玩转 TSW
14. linux 清屏函数
15. 《前端》eval函数
16. 如何使用网线连接树莓派和电脑
17. 高德地图 搜索定位以及自由滑动地图展示周边位置信息
18. 创新案例分享 | 建立医院绩效考核平台，促进医院提质增效
19. Linux下Oracle开机自启动
20. spring、springboot项目测试类遇到的问题

热门文章

1. Android学习资源大全
2. 2020上半年百度Android岗（初级到高级）面试真题全收录
3. 时间计算题100道_高考物理答题小技巧（选择题、实验题、计算题）
4. 查看计算机连接过的WiFi密码（三种方法）
5. Razor中Html.DropDownListFor用法
6. js数组再倒数第二个添加元素_【JS】JS数组添加元素的三种方法
7. 英雄联盟服务器现在要维护多久,英雄联盟今日维护时间是多久 lol2020最新维护公告内容是什么...
8. 浅显易懂 SQLite3 笔记（07）— 数据库视图简介及操作
9. 高通进入不同模式的命令
10. Office异常卡顿可以通过禁用硬件图形加速解决