梳理微信小程序登录时序图：授权与 Oauth2.0

最近开发微信小程序，做登录功能时遇到下图。

看太懂，有几处疑惑地方：

下面就是寻找答案的过程。

豪车模型

邻居模型

在上面两个模型中。豪车的主钥匙赋予泊车钥匙部分权限，而你赋予你的邻居所有的权限。比较之下，我们更希望使用豪车模型赋予部分权限，而不是邻居模型，万一他偷偷配了把钥匙呢？这种授权存在不安全性，在网络开发中也是如此。

登录时可以选择社交账号登录，这里以 QQ 为例。这里涉及三方：当前要登录的用户，以下简称 用户 ，其它两方是： ， QQ 服务器 。因为 用户

之前注册过 QQ， 请求 QQ 服务器 授权用户的 QQ 基本信息，这样用户就不用在上再进行注册了。

下面来探讨下 QQ 服务器 如何授权当前 用户 的 QQ 基本信息。

这种方法比较简单， 用户 告诉它的 QQ 账号密码，拿着账号密码去请求 QQ 服务器获取用户基本信息。

优点 ： *** 作简单。

缺点 ：用户将 qq 账号密码给了，获得了该用户在 QQ 上的所有特权，不仅可以查看基本信息，还可以查看 QQ 空间，查看 QQ 邮箱等，而用户的本意是只让获取 QQ 基本信息这一项特权。

下面是在 小胡子哥的个人博客 里看到的，将整个授权过程讲解的生动形象，我就不做二次加工，直接截取部分内容如下。

开发微信小程序第一步要在 微信公众平台 上注册一个账号，注册完成后在 设置 >开发设置 里可以看到 AppID 和 AppSecret，这相当于上面提到的 Client Id 和 Client Secret。

微信登录用户 在 微信 中打开 小程序 ， 小程序 中运行了 wx.login 接口，此时 小程序 拿着 appid 去请求 微信服务器 给 小程序 授权，让它可以调用一些微信接口，比如获取微信登录用户的基本信息。因为是 微信登录用户 进行 *** 作的，所以微信那端默认是同意授权的。（appid 哪里来？在新建小程序项目时输入，每个 appid 和小程序都是一一对应的）

上面也提到，这个 code 可能会泄露，所以需要 code + appid + appsecret 去再次拜访微信服务器获取令牌 session_key 和用户标识 openid。

这里有个疑问？为什么获取 code 在小程序上做，而获取 session_key 在第三方服务器上 *** 作？这是因为获取 code 需要使用 appid 去跳转微信服务器授权页面，再使用当前 微信登录用户 默认同意此次授权，如果坐在第三方服务器上，appid 我们是知道的，但是当前 微信登录用户 是不知道，只要手机上的微信知道。

那为什么请求 session_key 在第三方服务器上 *** 作？这是因为前面也说过 code 只能表明微信服务器统一此次授权，但是 code 可能会泄露，还需要第二张门票 appsecret 告诉微信服务器 “就是我，不是别人” 来请求获取 session_key 的。可见 appsecret 对于安全的重要性，放在第三方服务器方便管理。

关于 openid 和 session_key 说明？session_key 就是返回的绿卡，此后每次访问微信服务器资源都要带上它，这样微信服务器才知道此次请求是有授权的，我可以把资源给你。openid 是同意授权的那个人，这里是 微信登录用户 的标识 ID。也就是为什么 code 要在小程序中获取中我们不知道的那个 微信登录用户 ID。

到此，上图中涉及 Oauth2.0 的部分已经结束，下面的那些都是普通的 session 维持会话机制，这里就不再赘述。

由于作者文笔有限，文章如有遗漏或表达有误，请不吝赐教。如果仍对微信授权或 Oauth2.0 有疑问的，欢迎留言讨论。

笔者由于工作需要，曾经参加过一个微信小程序同 SAP 系统集成的项目，因此从零开始学习了微信小程序的开发知识。这里通过系列文章把自己所学分享出来，希望对相关学习者有所帮助。

本教程前面三篇文章：

通过本系列前面三篇文章的介绍，大家对微信小程序的视图和控制器，微信调试器的用法，以及如何消费微信平台提供的 Public API，已经有了一个最基本的认识了。在这个基础上，本文让我们进一步学习微信小程序的页面跳转路由设计。

这个系列教程的前六篇文章我们都在单个的视图上 *** 作。现在让我们创建第二个视图，然后实现从第一个视图到第二个视图的跳转。

首先开发第二个视图：

做过 Angular 开发的朋友们对上面的视图设计一定不会陌生。这个视图的数据源由模型 logs 提供，是一个列表结果，列表每个元素的数据源是模型 logs 里的一条记录，用 log 代表。

为了让 log 看起来显示更整齐，在 log 内容之前，显示每条 log 的索引。因为 log 的索引从 0 开始，所以用 {{index + 1}} 在索引前加一，这样显示的索引更符合普通人的阅读习惯。

这个视图的控制器：

控制器 logs.js 的实现：

在控制器里调用 Page 构造函数，给当前控制器指定名为 logs 的数据模型。

这个数据模型的值填充，通过微信框架提供的 API wx.getStorageSync 来获取。

wx.getStorageSync 的含义在微信小程序 官网 上有定义：从本地缓存中同步获取指定 key 对应的内容。

第二个视图的 UI 和控制器都开发完毕，剩下的事情就是在第一个视图里定义一个触发点，让它能触发到第二个视图的跳转。

我在第一个视图上通过属性 bindtap 绑定了一个点击函数 bindViewTap :

bindViewTap 在第一个控制器 index.js 里的实现：

跳转还是通过微信小程序提供的 API wx.navigateTo :

保留当前页面，跳转到应用内的某个页面，使用 wx.navigateBack 可以返回到原页面。

学习了微信小程序页面路由跳转之后，我们来进行一个实际的需求开发。

效果：我在手机上打开微信小程序，自动显示出我当前所在的地理位置：

具体步骤：

ReservationService.getGeocode 的实现：

看下面一个使用高德地图 API 将经纬度转换成文字描述的地址的例子，使用 postman 发送请求：

API 响应：

假设我用 vue 开发了一个 web 应用,需要在手机微信里访问并调试, 可以按照本文介绍的步骤,使用微信开发者工具来调试。

假设我的 web 应用的访问入口是如下公众号菜单的"预约"按钮:

那么为了能够在微信开发者工具里调试,需要首先进入该公众号的后台,在 web 开发者工具里,将开发者本人的微信号添加进去:

点击"绑定开发者账号":

输入待绑定的微信账号:

点击绑定,该微信号会收到一条消息,询问是否绑定:

点击同意 *** 作完成绑定。

接下来, 把要调试的 web 应用的 url 放到微信开发者工具地址栏里，回车之后，微信开发者工具就会d出一个询问窗口，点击 Allow 之后，就可以在微信开发者工具提供的类似 Chrome 开发者工具调试器一样的界面里进行单步调试了。

这个粘贴到地址栏的 url 很有讲究。

https://open.weixin.qq.com/connect/oauth2/authorize?appid=yyyy&redirect_uri=https%3a%2f%2fwww.xxx.com%2fsmart&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect

其中 appid= 后面的值，是从微信公众号控制台里拷贝出来的 appid ：

redirect_uri, 即为我们开发的 web 应用，部署到服务器之后生成的 url，需要经过 url encode 处理：

https://www.xxx.com/smart

这个 url 准备好之后，将其粘贴到微信开发者工具地址栏里，回车，即可看到一个对话窗口，要求获得我们公开信息的许可：

点击 Allow 之后，就可以像使用 Chrome 开发者工具的调试器一样，在微信开发者工具里进行单步调试了：

本文首先介绍了微信小程序多页面内的路由跳转设计，接着通过获得手机当前经纬度并转换成地址的需求实现，进一步深入了解了微信小程序如何消费微信平台提供 Public API 的方法。

本教程前面三篇文章：

---