## 获取用户信息
简略的用户信息是开放的,可以直接得到而无需用户授权(使用open-data组件);
详细的用户信息需要用户授权才能获取 **(但明文内容不包含 openId 和 unionId 这些敏感数据)**;
想要得到微信用户的 `openid/unionId` 来与我们系统做 **OAuth第三方登录认证服务** 则需要后端服务器的支持(数据签名校验、数据解密、提供OAuth服务)。
* * * * *
### 用户信息获取流程解析
这里要获取的是用户的完整信息,包含openid的信息,其目的在于获取微信提供的用户身份标识,为我们的系统建立小程序内的用户体系(OAuth)。
1. 通过 wx.login 登录流程获取会话密钥 session_key,会话密钥是对用户数据进行加密签名的密钥。(**临时用户数据密匙**)
2. 引导用户授权后,调用 wx.getUserInfo() 得到加密信息
3. 通过前两步得到的信息,就可以在服务端解密出用户的身份标识,从而完成OAuth操作
>[tip] 为了防止被数据篡改(对,微信客户端也可能被劫持,只要是客户端就不能被信任,只要是外来数据都不能信任,服务器只信自己),微信会对明文数据进行签名,我们要在服务端对数据包进行签名校验,确保数据的完整性与合法性。
>
> 另外,为了数据不被篡改,开发者不能把session_key存放在服务器以外的环境,不能泄露,只能像私有密匙一样存放在服务器,不能对外透明传输。
* * * * *
### 涉及接口
1. [wx.getSetting()](https://developers.weixin.qq.com/miniprogram/dev/api/setting.html#wxgetsettingobject):获取用户的当前设置,如用户授权情况
2. [wx.getUserInfo()](https://developers.weixin.qq.com/miniprogram/dev/api/open.html#wxgetuserinfoobject):用户授权后获取用户信息,但明文内容不包含 openid 等敏感信息
3. [button.open-type.getUserInfo](https://developers.weixin.qq.com/miniprogram/dev/component/button.html):按钮组件,未授权时,让用户主动点击它弹出授权询问框。
5. [wx.login()](https://developers.weixin.qq.com/miniprogram/dev/api/api-login.html):调用接口wx.login() 获取 临时登录凭证 `code` ,然后在服务器上利用它来换取 用户会话key `session_key`
6. [wx.checkSession](https://developers.weixin.qq.com/miniprogram/dev/api/signature.html#wxchecksessionobject)(校验用户当前session_key是否有效。)
~~~
会话密钥session_key有效性
开发者如果遇到因为session_key不正确而校验签名失败或解密失败,请关注下面几个与session_key有关的注意事项。
wx.login()调用时,用户的session_key会被更新而致使旧session_key失效。开发者应该在明确需要重新登录时才调用wx.login(),及时通过登录凭证校验接口更新服务器存储的session_key。
微信不会把session_key的有效期告知开发者。我们会根据用户使用小程序的行为对session_key进行续期。用户越频繁使用小程序,session_key有效期越长。
开发者在session_key失效时,可以通过重新执行登录流程获取有效的session_key。使用接口wx.checkSession()可以校验session_key是否有效,从而避免小程序反复执行登录流程。
**当开发者在实现自定义登录态时,可以考虑以session_key有效期作为自身登录态有效期,也可以实现自定义的时效性策略。**
~~~
* * * * *
### 细节
通过 `wx.getSetting` 获取环境信息,查看当前环境是否授权过(`res.authSetting['scope.userInfo']`)。
首次授权要 使用 button 组件,让用户点击按钮才能弹出授权询问框,直接 `wx.getUserInfo()` 无法弹出授权询问框,将直接报错。
点击button组件,弹出授权询问框,用户同意授权后回调的detail数据与 `wx.getUserInfo()` 返回的一致 ,不过要注意,用户拒绝授权也是会触发 `bindGetUserInfo` 方法的,所以要做判断:
```
bindGetUserInfo: function(e) {
console.log('index > getUserInfo() ', e)
if (e.detail.errMsg == 'getUserInfo:ok') {
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
} else {
console.log('用户拒绝授权!');
}
}
```
不过可以使用 open-data 组件 展示用户基本信息。但只有比较简略的信息,没有 `openid` ,要想获得 `openid` 来与我们系统做auth登录就需要用户授权了。
* * * * *
### 扩展
[小程序与小游戏获取用户信息接口调整,请开发者注意升级。 | 微信公众平台 开发者社区](https://developers.weixin.qq.com/blogdetail?action=get_post_info&lang=zh_CN&token=759743736&docid=0000a26e1aca6012e896a517556c01&devtools=1&idescene=3)(代码无法再调出授权询问框了)
[表单组件 · 小程序](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)
[用户信息 · 小程序](https://developers.weixin.qq.com/miniprogram/dev/api/open.html)
[开放接口 · 小程序](https://developers.weixin.qq.com/miniprogram/dev/api/api-login.html)
[wx.checkSession · 小程序](https://developers.weixin.qq.com/miniprogram/dev/api/signature.html#wxchecksessionobject)(数据签名校验 / 数据解密算法)
> 接口如果涉及敏感数据(如wx.getUserInfo当中的 openId 和unionId ),接口的明文内容将不包含这些敏感数据。开发者如需要获取敏感数据,需要对接口返回的 **加密数据( encryptedData )** 进行对称解密。
[健壮高效的小程序登录方案](https://mp.weixin.qq.com/s/Ee592wEYBIW6reiCIa4sXg)
> 加入免并发逻辑:若登录流程正在进行,则不重复触发登录流程,而是加入当前流程的监听队列,待登录结束时再一并处理。这样,任一时刻最多只有一个登录流程正在进行。
* * * * *
last update:2018-8-13 15:06:53
- 开始
- 微信小程序
- 获取用户信息
- 记录
- HTML
- HTML5
- 文档根节点
- 你真的了解script标签吗?
- 文档结构
- 已经落后的技术
- form表单
- html实体
- CSS
- css优先级 & 设计模式
- 如何编写高效的 CSS 选择符
- 笔记
- 小计
- flex布局
- 细节体验
- Flex
- Grid
- tailwindcss
- JavaScript
- javascript物语
- js函数定义
- js中的数组对象
- js的json解析
- js中数组的操作
- js事件冒泡
- js中的判断
- js语句声明会提前
- cookie操作
- 关于javascript你要知道的
- 关于innerHTML的试验
- js引擎与GUI引擎是互斥的
- 如何安全的修改对象
- 当渲染引擎遇上强迫症
- 不要使用连相等
- 修改数组-对象
- 算法-函数
- 事件探析
- 事件循环
- js事件循环中的上下文和作用域的经典问题
- Promise
- 最佳实践
- 页面遮罩加载效果
- 网站静态文件之思考
- 图片加载问题
- 路由及转场解决方案
- web app
- 写一个页面路由转场的管理工具
- 谈编程
- 技术/思想的斗争
- 前端技术选型分析
- 我想放点html模板代码
- 开发自适应网页
- 后台前端项目的开发
- 网站PC版和移动版的模板方案
- 前后端分离
- 淘宝前后端分离
- 前后端分离的思考与实践(一)
- 前后端分离的思考与实践(二)
- 前后端分离的思考与实践(三)
- 前后端分离的思考与实践(四)
- 前后端分离的思考与实践(五)
- 前后端分离的思考与实践(六)
- 动画
- 开发小技巧
- Axios
- 屏幕适配
- 理论基础
- 思考
- flexible.js原理
- 实验
- rem的坑,为什么要设置成百分比,为什么又是62.5%
- 为什么以一个标准适配的,其它宽度也能同等适配
- 自适应、响应式、弹性布局、屏幕适配
- 适配:都用百分比?
- 番外篇
- 给你看看0.5px长什么样?
- 用事实证明viewport scale缩放不会改变rem元素的大小
- 为什么PC端页面缩放不会影响rem元素
- 究竟以哪个为设备独立像素
- PC到移动端初试
- 深入理解px
- 响应式之栅格系统
- 深入理解px(二)
- 一篇搞定移动端适配
- flex版栅格布局
- 其他
- 浏览器加载初探
- 警惕你的开发工具
- JS模块化
- webpack
- 打包原理
- 异步加载
- gulp
- 命名规范
- 接口开发
- sea.js学习
- require.js学习
- react学习
- react笔记
- vue学习
- vue3
- 工具、技巧
- 临时笔记
- 怎么维护好开源项目
- 待办
- 对前端MVV*C框架的思考
- jquery问题
- 临时
- 好文
- 节流防抖