小程序登录授权及获取用户信息

1.登录

通过wx.login拿到code给后台，接口返回token、openID等参数。有了这些参数我们就可以直接请求那些不需要用户操作便可以读取的接口（比如：列表、详情、视频播放等等）；

①wx.login(OBJECT)

调用接口wx.login() 获取临时登录凭证（code），调用成功后能拿到用户登录凭证（有效期五分钟）。开发者需要在开发者服务器（自己的服务器）后台调用 api，使用 code 换取 openID 和 session_key 等信息。

②wx.checkSession(OBJECT)

校验用户当前session_key是否有效。

wx.login()调用时，用户的session_key会被更新而致使旧session_key失效。

微信不会把session_key的有效期告知开发者。

开发者在session_key失效时，可以通过重新执行登录流程获取有效的session_key。

当开发者在实现自定义登录态时，可以考虑以session_key有效期作为自身登录态有效期，也可以实现自定义的时效性策略。

也就是说，每次打开应用时，检测微信session_key是否过期，如果没过期什么都不用做，如果过期了重新登录获取微信session_key。然后获取开发服务器的session，从而达成正真意义上的登录。

2.授权

当小程序需要用户操作（比如：关注、评论、添加购物车、地理位置、个人中心等等），就需要用户先授权。

①wx.authorize(OBJECT)

提前向用户发起授权请求。调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据，但不会实际调用对应接口。如果用户之前已经同意授权，则不会出现弹窗，直接返回成功。

(1)如果用户已授权，可以直接调用接口；

(2)如果用户未授权，会弹出授权框询问用户：

a.拒绝授权：关闭授权框，用户操作无效（如关注，无法触发关注的http请求，保持原状）；

b.接收授权：将用户信息通过token发送给后台，并主动请求用户操作（如关注，接收授权后触发关注的http请求，提示关注成功）。

scope 为 "scope.userInfo" 时，无法弹出授权窗口。需要用button的方式，文章下面会讲。(小程序后面升级的)

3.用户信息

①wx.getUserInfo(OBJECT)

注意：此接口有调整，使用该接口将不再出现授权弹窗，请使用下面代码来引导用户主动进行授权操作。

l 当用户未授权过，调用该接口将直接报错

l 当用户授权过，可以使用该接口获取用户信息

 

②getPhoneNumber(OBJECT)：获取微信用户绑定的手机号，需先调用login接口。因为需要用户主动触发才能发起获取手机号接口，所以该功能不由 API 来调用，需用 <button> 组件的点击来触发。

注意：目前该接口针对【非个人开发者】，且完成了认证的小程序开放。需谨慎使用，若用户举报较多或被发现在不必要场景下使用，微信有权永久回收该小程序的该接口权限。

4.部分字段解释

openID：用户唯一标识。28位。不需要用户同意就能获取到。

session_key： 会话密钥session_key 是对用户数据进行加密签名的密钥。为了应用自身的数据安全，只在开发服务器和微信服务器中交互，不会发送到前端。

unionID：用户在开放平台的唯一标识符。如果开发者拥有多个移动应用、网站应用、和公众帐号（包括小程序），可通过unionid来区分用户的唯一性。换句话说，同一用户，对同一个微信开放平台下的不同应用，unionid是相同的。29位。需要用户授权或者已经关注过公众号，具体参考UnionID。

 

二、登录授权流程

1.模式概览

整体流程如下图：

 

2.主动登录

由于APP中有些页面默认需要登录的，如[个人中心]页面，需要登录获取到用户信息，才能继续操作。这样的页面就需要在每次进入页面(onShow)时判断是否授权了。

profile页面：

关于登录授权相关的逻辑都可以封装在handleLogin.js中，handleLogin.js：

到此为止，登录就算完成了。不管使用token还是cookie都可以，都能有正常的登录态了，可以执行后续操作。

整个流程是 wx.login => wx.getUserInfo => 开发者服务器登录postLogin。

 

3.调用接口

某些页面默认不需要登录，但某些用户操作事件是需要登录状态的，所以一者可以判断全局存储的登录状态管理的变量，如果为false，那么直接可以弹窗提示需要一键登录。二者如果全局状态为true，则调用接口看接口返回的code是否是未登录状态（此情况一般来说是登录态过期），未登录的话也弹窗提示需要一键登录。

某页面（需登录的用户操作）

handleLogin.js

到此为止，需要登录的用户操作就可以处理了。如果全局登录状态变量为true，先去调用接口，根据返回的信息是否是未登录再处理。

 

4.弹窗提示

由于微信小程序授权的接口wx.getUserInfo和wx.authorize中scope 为 "scope.userInfo" ，新版中调用这两个API是不会主动触发弹出授权窗口的。需要使用如下方式：

上面代码中多处出现的showLoginModal是用于显示一键登录的。如下：

handleLogin.js

关于授权登录，我们做了一个专门的页面处理，此处的button为:

如下图：

到此为止，整个授权和登录流程就算走完了。可以再回过头梳理一下最开始的流程图，应该就能理清整个逻辑了。