nodejs+koa+uniapp实现微信小程序登陆获取用户手机号及openId
nodejs+koa+uniapp实现微信小程序登陆获取用户手机号及openId
前言:
我准备用nodejs+koa+uniapp实现一款餐饮点单小程序,以及nodejs+koa+vue实现后端管理平台,目前用nodejs+koa已经搭建好服务,并使用了链接池以及pm2进程守护来保护服务端接口调用,小程序涉及用户登录+支付+下单+订单管理+信息管理等,后端管理设计登陆+商品添加编辑删除+用户管理等功能,准备在此博客记录我开发过程中遇到的问题以及解决的技术难点,想要学习的关注我一起学习进步吧!
微信小程序登陆获取用户手机号及openId 后端基于nodejs+koa 流程:
- 注册小程序,获得小程序appId以及appSecret(小程序密钥)
- 调用uni.login获取用户的临时code
- 根据getPhoneNumber获取到用户的iv以及encryptedData
- 根据获取到的iv和code和encryptedData请求后段接口换取用户的手机号以及openId
- 后端根据接口传过来的code+iv+encryptedData换取用户的session_key和openid
- 根据换取得到的session_key使用WXBizDataCrypt换取用户的手机号
一.获取用户临时code
先上截图:
此code即为我们获取到的用户临时code,需要注意的是只有几分钟的有效时间
上代码:
1 wx.login({
2 success: (res) => {
3 console.log(res)
4 },
5 fail: (err) => {
6
7 }
8 })
二.根据getPhoneNumber获取到用户的iv以及encryptedData
先上图:
此数据即为我们获取到的用户加密iv以及encryptedData,我们将会用此数据以及code给后端换取手机号以及oppenid
上代码:
1 //html
2 <button open-type="getPhoneNumber" class="btns" @getphonenumber="getPhoneNumber" :disabled="!checked">微信用户一键登录</button>
js代码:
1 async getPhoneNumber(e) {
2 console.log(e)
3 if (e.detail.errMsg !== 'getPhoneNumber:fail user deny') {
4 const obj = {
5 code: this.code,
6 encryptedData: e.detail.encryptedData,
7 iv: e.detail.iv
8 }
9 pageFun.getToken(obj, (res) => {//调用后端换取手机号以及oppenid
10 console.log(res)
11 if(res.data.state==200){
12 uni.showToast({
13 title: res.data.message,
14 duration: 2000,
15 icon: true
16 });23 }
24 })
25 } else {
26 await this.login()
27 }
28 },
三.后端根据接口传过来的code+iv+encryptedData换取用户的session_key和openid
先上图:
此参数即为我们根据code+iv+encryptedData换取得到的session_key以及openid
换取接口为https://api.weixin.qq.com/sns/jscode2session参数我们就拼接到地址后边
上代码:
1 /* 获取小程序session_key */
2 getSessionKey(params) {
3 return new Promise((resolve, reject) => {
4 axios.get('https://api.weixin.qq.com/sns/jscode2session?grant_type=authorization_code&appid=' + params.appid + '&secret=' + params.secret + '&js_code=' + params.code)
5 .then(response => {
6 console.log(response.data)
7 resolve(response.data)
8 })
9 .catch(error => {
10 console.log(error);
11 });
12 })
13
14 }
四.根据换取得到的session_key使用WXBizDataCrypt换取用户的手机号
先上图:
此数据即为我们获取到的用户手机号,至此大功告成。
上代码:
1 /* 小程序获取用户手机号 */
2 router.post('/token', async (ctx, next) => {
3 let params = ctx.request.body;
4 let sessionKey = '';
5 let encryptedData = params.encryptedData;
6 let iv = params.iv
7 /* 获取用户 sessionKey*/
8 let userKey = await utils.getSessionKey({appid:appId,secret:AppSecret,code:params.code});
9 sessionKey = userKey.session_key;
10 let pc = new WXBizDataCrypt(appId, sessionKey)
11
12 let data = pc.decryptData(encryptedData, iv)//此方法即为获取用户手机号的方法,是微信的官方js库
13 console.log(data)
14 data.sessionKey = userKey.session_key;
15 data.openid = userKey.openid;
16 data.iv = iv;
17 data.encryptedData = encryptedData;
18 ctx.body = {
19 state: 200,
20 message: '登陆成功!',
21 data:data
22 };
23 })
五.注意事项
- appid也就是小程序必须是商户或者是企业个人小程序是没有权限获取用户手机号的
WXBizDataCrypt是微信官方的js库里边有多种语言,我用的是nodejs版本下载地址
另外获取微信用户昵称头像的API也更新了,之前已经启用
上代码:
1 uni.getUserProfile({
2 desc: 'Wexin', // 这个参数是必须的
3 success: res => {
4 console.log('213',res)
5 },
6 fail: err => {
7 console.log(err)
8 }
9 })
结束语:
这篇文章就到这里吧,主要是讲了获取用户手机号以及oppenid的所使用到的一些具体方法,但是具体的代码并没有,以及后端nodejs是如何搭建项目链接mysql创建路由接口也是没有讲到的后续我会持续更新项目的进展状态,也会单独的写一篇文章给大家介绍如何部署服务器,如何创建nodejs+koa项目,如果大家感兴趣的话可以关注我,或者是加我wx:18237266724大家一起学习!
nodejs+koa+uniapp实现微信小程序登陆获取用户手机号及openId的更多相关文章
- 微信小程序授权获取用户详细信息openid
小程序获取用户的头像昵称openid之类 第一种使用wx.getUserInfo直接获取微信头像,昵称 wx.getUserInfo({ success: function (res) { that. ...
- 【微信小程序】获取用户地理位置权限,二次请求授权,逆解析获取地址
摘要:微信小程序内获取用户地理位置信息授权,被拒绝后二次获取,获取权限后逆解析得到用户所在省市区等.. 场景:商城类小程序,在首页时需展示附近门店,即用户刚进入小程序时就需要获取到用户位置信息 ste ...
- uniapp的微信小程序,获取授权,获取中文街道地理位置
w问题描述:在微信小程序模拟器上运行获取坐标时 获取不到信息,原因是 没有调起默认地理位置: 解决办法:或者在manifest.json的源码视图中配置:配置appid和地理位置 默认弹起获取地理位置 ...
- 微信小程序后台获取用户的opeid
1.微信小程序后台获取登录用户的openid,首先微信小程序将code传给后台服务器 wx.login({ success: function (res) { var code = res.code ...
- 微信小程序授权 获取用户的openid和session_key【后端使用java语言编写】,我写的是get方式,目的是测试能否获取到微信服务器中的数据,后期我会写上post请求方式。
在这里给大家分享下我的心得,1.写代码前一定要对整个流程有个了解.我就是因为在先不了解整个过程中去ctrl+c+v他人的博客代码,花费很多无用的时间去处理还不知道能不能跑的起来的代码. 2.本人比较喜 ...
- 微信小程序之获取用户位置权限(拒绝后提醒)
微信小程序获取用户当前位置有三个方式: 1. wx.getLocation(多与wx.openLocation一起用) 获取当前的精度.纬度.速度.不需要授权.当type设置为gcj02 返回可用于w ...
- 微信小程序怎么获取用户输入
能够获取用户输入的组件,需要使用组件的属性bindchange将用户的输入内容同步到 AppService. <input id="myInput" bindchange=& ...
- 微信小程序-最新获取用户基本信息方案
如果只是单纯的展示用户信息,那么最简单的方案就是 文档中组件: <open-data type="groupName" open-gid="xxxxxx" ...
- 微信小程序 如何获取用户code
1.首先需要获取code 使用 wx.login({ success: function(res) { console.log(res);//这里的返回值里面便包含code }, fail: func ...
随机推荐
- Python+selenium之弹窗
- bilibili动画下载视频批量改名(python)
bilib应用 在微软商店中下载哔哩哔哩动画,虽然软件UI古老,但是贵在稳定和支持下载 安装以后搜索自己想要的视频,然后缓存下载 下载后进入下载的路径 视频文件重命名 打开自动命令的程序或者py脚本, ...
- 详解Threejs中的光源对象
光源的分类 AmbientLight(环境光),PointLight(点光源),SpotLight(聚光源) 和 DirectionalLight(平行光)是基础光源 HemisphereLight( ...
- Atcoder Grand Contest 030 F - Permutation and Minimum(DP)
洛谷题面传送门 & Atcoder 题面传送门 12 天以前做的题了,到现在才补/yun 做了一晚上+一早上终于 AC 了,写篇题解纪念一下 首先考虑如果全是 \(-1\) 怎么处理.由于我 ...
- Codeforces 796E - Exam Cheating(dp)
Codeforces 题目传送门 & 洛谷题目传送门 当被数据结构搞自闭的 tzc 信心满满地点开一道 *2400 的 dp 题时-- 却发现自己不会做?! 这足以证明蒟蒻 dp 之菜/dk/ ...
- Glib 对 C 函数进行单元测试
1. Glib 单元测试框架 Glib 为单元测试提供了一套完整的测试框架,每个测试运行包括以下几个部分 测试数据结构 测试 setup 与 teardown 函数 测试函数 2. 单元测试数据结构 ...
- NECAT组装ONT long reads
NECAT 可用于ONT数据的纠错,组装,如果想对ONT long reads进行call SV,也可以使用necatsv. githup网址:https://github.com/xiaochuan ...
- 你不知道的iostat
1. 作用 iostat是I/O statistics(输入/输出统计)的缩写,iostat工具将对系统的磁盘操作活动进行监视.它的特点是汇报磁盘活动统计情况,同时也会汇报出CPU使用情况 ...
- Python爬虫3大解析库使用导航
1. Xpath解析库 2. BeautifulSoup解析库 3. PyQuery解析库
- EXCEL如何用公式提取一列中的唯一值和不重复值
说明:思路用的很新奇,也对COUNTIF有了更深一步的了解,但是,对于百行数据运算速度特别低,不适合数据多的使用 当面对一堆数据,我们要提取一列的唯一值的时候,如果单纯用人为一个个判断,显然是不科学的 ...