[小黄书小程序]微信授权登录
在上一篇文章中，我们在后台实现了会员管理以及会员注册登录的逻辑。其中登录方式包括：
- 通过手机号码和验证码登录
- 通过微信授权登录
在小黄书小程序上，我们支持第二种登录方式。第一种方式，今后看情况再酌情进行支持。
我们这一章节要做的事情就是在小程序客户端支持上微信授权登录，我们的目标是：
- 在小黄书小程序打开时，通过微信授权进行登录。
- 登录成功后，将访问令牌存放到小程序提供的本地缓存中。
1. 小程序登录流程
在上一章中，我们已经看过了小程序官方给出的登录时序图：
根据上一章的描述，我们的登录时序跟官方的稍微有点不一样。因为我们除了需要通过wx.login返回的code登录凭证获取到用户的openid之外，还需要取得微信用户的头像甚至unionid等信息，所以我们还需要小程序调用wx.getUserInfo的接口来获得微信用户的加密信息encryptedData以及初始解码向量iv，一并传给服务器来进行登录。
所以我们这里主要看下需要用到的两个api的主要功能。
1.1. wx.login
调用接口获取登录凭证（code）进而换取用户登录态信息，包括用户的唯一标识（openid） 及本次登录的 会话密钥（session_key）。用户数据的加解密通讯需要依赖会话密钥完成。
下面是一个调用示例：
//app.js
App({onLaunch: function() {wx.login({success: function(res) {if (res.code) {//发起网络请求wx.request({url: 'https://test.com/onLogin', // 服务器暴露的登录api地址data: {code: res.code}})} else {console.log('获取用户登录态失败！' + res.errMsg)}}});}
})
1.2. wx.getUserInfo
这个接口的主要功能就是获取微信用户的信息。但必须要在调用上面的wx.login接口之后进行调用。返回的结果：
| 参数 | 类型 | 说明 |
|---|---|---|
| userInfo | OBJECT | 用户信息对象，不包含 openid 等敏感信息 |
| rawData | String | 不包括敏感信息的原始数据字符串，用于计算签名。 |
| signature | String | 使用 sha1( rawData + sessionkey ) 得到字符串，用于校验用户信息，参考文档 signature。 |
| encryptedData | String | 包括敏感数据在内的完整用户信息的加密数据，详细见加密数据解密算法 |
| iv | String | 加密算法的初始向量，详细见加密数据解密算法 |
从中可以看到，我们需要传送到服务器端的包含用户完整信息的加密后的encryptedData和解密初始向量iv都在返回结果里面。我们只需要从返回结果中取出这些信息，和wx.login返回的登录凭证code一起发送给服务器进行signin请求，就能进行微信的授权登录过程。
#2. 微信授权登录实现
如上所述，小程序客户端的微信授权登录需要做的事情就是：
- 通过wx.login获取到登录凭证code
- 然后通过wx.getUserInfo获取到微信用户的完整加密数据以及用于解密的初始向量iv
- 将这些数据发给服务器并请求signin接口来进行登录
- 服务器通过code调用code2session的微信服务器接口来获得微信用户的openid和用来解密encryptedData的session_key，然后对encryptedData进行解密并获取到微信用户的完整信息，进行注册或登录操作，并生成服务器的访问凭证返回给客户端
- 小程序客户端在获取到access_token访问凭证后，将其存储在微信小程序的本地缓存中，这样，今后调用需要授权的服务器端请求时，就可以带上这个访问凭证来进行授权调用了
在app.json中实现的在小程序加载期间进行微信授权登录的代码如下:
//app.jsconst config = require('./config/application');App({onLaunch: function () {this.signin(function(userInfo) {console.log('userInfo:',userInfo);})},signin:function(cb) {var that = this//调用登录接口以获取codewx.login({success: function (res) {const code = res.code;if (code) {wx.getUserInfo({withCredentials: true,success: function (res) {that.globalData.userInfo = res.userInfo;typeof cb == "function" && cb(that.globalData.userInfo);// 调用服务器登录接口获取access_tokenwx.request({url: `${config.server.protocol}://${config.server.url}/${config.server.version}/auth/signin`,data: {wxcode: code,encryptedData: res.encryptedData,iv: res.iv},method: 'POST',json: true,success: function (res) {console.log('response:', res);wx.setStorageSync('access_token', res.data);}})}})} else {console.log('wx.login failed：' + res.errMsg);}}})},globalData:{userInfo:null,}
})
整个流程和上面的描述并无二致。其中服务器的相关访问信息我们封装到config/application.js文件里面。参考内容如下，大家可以根据自己的情况进行修改：
module.exports = {server: {protocol: 'http',url: '2a90e26a.ngrok.io',version: 'v1',}
}
顺便提一下，我使用的内网穿透工具是ngrok，所以才有以上的url格式。当然，调试期间我们可以直接访问localhost的3000端口来访问到我们的小黄书服务器。
#3. wafer-client-sdk库
我们上面描述了小程序登录的一个脉络，但是很不完善的。比如我们没有用到时序图上面的checksession来对登录态进行检查等。
事实上，腾讯云已经为我们提供了一个wafer-client-sdk来帮我们处理完整的登录会话管理功能。详情请查看：
https://github.com/tencentyun/wafer-client-sdk
我们只需要做一些修改，就能满足我们的需求。详细代码就不列出来了，相信大家把代码pull下来看下就明白了。同时，index页面有官方提供的页面示例，大家也可以修改下app.json来指向该页面进行调试。
4. 结语
详细实现请查看github中的代码。
- git clone https://github.com/zhubaitian/XiaoHuangShuXiaoChengXu.git
- cd XiaoHuangShuXiaoChengXu/
- git checkout CH05
这一系列文章其实我写了有段时间了，后来忙起来忘了发布了
[小黄书小程序]微信授权登录相关推荐
- [小黄书小程序]导航栏和标题栏界面
我们前面几章已经将小黄书的后台基础框架给搭建好了.后台的小黄书相关的业务逻辑,会在往后根据客户端的业务需求来进行实现. 今天起我们会开始小黄书小程序的实现. 我们先看下小红书应用的主界面. 这一篇文章 ...
- [小黄书小程序]主页面标签栏水平滑动和下拉弹出框
上一章我们实现了小黄书小程序的搜索栏的界面呈现.这一章我们将会参考小红书实现搜索栏下面的标签栏. 该标签栏存在的意义是,用户可以根据选择的标签来快速呈现相关的内容.该标签栏界面主要是两个功能模块. 一 ...
- [小黄书小程序]主页面笔记图片高度自适应及上拉无限加载及下拉更新
上一章我们实现了小黄书小程序标签栏的左右滑动和弹出框UI功能,今天我们会开始实现主页面中笔记的呈现. 主要的功能会囊括以下几个方面: 笔记的两列式布局: 一行只是显示两个笔记.且每个笔记的封面图片的高 ...
- 小程序 - 微信授权登录 微信授权绑定手机号
用户在使用小程序时,经常需要授权登录,授权登录的作用是获取用户的基本信息,如头像.昵称以及openid等,openid可用于微信授权手机号.微信支付. 微信授权登录 .xhtml如下,wxLogin为 ...
- 小程序微信授权登录服务器异常,微信小程序授权登录流程（强制绑定手机号码）...
本文作为多平台用户登录模块设计的扩展设计,即以手机号作为用户的唯一凭证. (图片摘自 2018.10.30) 小程序与服务器是通过自定义登录态来识别用户身份的,以下简称口令(token). 由于微信未 ...
- ThinkPHP3.2.3 实现微信小程序微信授权登录
网上找了很多教程都不好使,最后自己又研究了一番,终于成功了 一.总体设计 小程序登录流程:客户端通过调用wx.login(),获取登录凭证(code),将此code发往服务器,服务器通过调用 auth ...
- 微信小程序微信授权登录的昵称头像授权数量上限，如何删除
前言 在使用微信小程序的过程中,有时会为微信授权登录的应用设置独立昵称和头像,应用中最多只能添加四个,之后会提示:数量已达上限,无法新增.如下图所示: 解决方案: IOS系统, 授权时,将要删除的头像 ...
- 新！uniapp微信小程序微信授权登录
11月后,微信小程序对于微信授权登录做了逻辑上的更改,之前的一键授权获取用户信息的功能已不再适用.已发布审核完成的小程序不受影响,但要想再发布,只能换成新的登陆逻辑了. 首先,要说明的,个人中心页面, ...
- 微信小程序微信授权登录，使用getPhoneNumber()部分手机无法获取动态令牌code（Taro）
今天在测试微信授权登录时,部分微信使用getPhoneNumber()方法无法获取动态令牌code, 查询微信小程序文档提示: 可以使用组件的方式获取兑换用户手机号的动态令牌. 使用方法: 需要将 b ...
最新文章
- MongoDB主从复制介绍（转）
- 什么是神经网络在object detection的应用？cascade classifier，卷积神经网络，迁移学习
- pb 更改dropdwonlistbox绑定数据_Blazor 修仙之旅 组件与数据绑定
- 测试点分析：1048 数字加密 (20分)_16行代码AC
- 音视频编解码的一些源代码
- nuxt vue ssr实现
- 【细节实现题】LeetCode 57. Insert Interval
- 绘图库:Matplotlib
- 理解伪元素:before和:after
- 【啊哈C语言】【习题答案】【第一章】
- 服务器集成显卡性能,主流显卡参数和性能对比
- C# 八种方案打印PDF文档
- 从 0 到 1，开发一个智能问答机器人
- 计算机的删除快捷键,电脑上的删除快捷键是什么？
- 后端/Java/大数据/C++ 校招内推面经
- 数据分析神器Alteryx
- 算法 c语言实现 英文版 pdf,数据结构与算法分析++C语言描述++英文版++..pdf-得力文库...
- 计算机等级成绩科目代码65,北京计算机等级考试成绩评定标准是怎样的
- 值得收藏的机器学习资源
- wps怎么把ppt里的字体一起保存_干货 | 如何快速导出PPT中的文字内容？
热门文章