10-微信小程序登录流程

现在要讲的是小程序特有的一些API,可能会比较绕,不过本质是很简单的,只要按照步骤操作就会守得云开见日来

一.前言

上一篇章讲了如何利用wepy传递数据,如何在组件之间共享数据和事件,如何添加方法,计算属性,数据监听,共享事件,这一篇文章要讲的小程序的用户登陆流程,在原来的小程序中,只要我们点开,就会弹出用户授权选项卡,因为有些获取用户私有数据的API必须要用户授权才能使用

二.准备工作

在开始正式编程之前,我们首先要利用wepy搭建项目的框架,并删除不需要的默认测试内容
1.删除components,mixins,pages文件夹下的内容,并且在pages文件夹下新建index目录,将原有的index.wpy文件移到该目录下,在index.wpy文件中仅保留空的config,components,data,computed,methods,import wepy from "wepy",以及template中的container
2.在app.wpy中仅保留import wepy和import async ,修改config中的pages目录为pages/index/index,删除不必要的生命周期函数onLaunch,sleep,async,getUserInfo,在constructor中的super()后加上;,global Data后面加;.
3.打开项目,使用自己的appId,因为我们在自己的appid中设置了默认的request访问的地址,默认显示index.wepy文件中的内容,开启wepy build --watch,即可以看到自己的页面.

三.登录流程时序

登录流程时序.png

登录流程说明.png

1.由上图可知,首先通过wx.login获取登录code(登录校验码),然后通过wx.request将code发送到开发者服务器,凭借用户的Appid和code从微信服务器获取session_key(本次会话密钥)和openid,在本地服务器根据这两个信息定义用户的登录状态,并且将用户的登录状态返回到界面,这就是一次完整的用户授权过程
2.授权注意点
A.过去老版本的API中可以直接通过wx.authorize({scope: "scope.userInfo"}), 弹出授权界面
腾讯觉得这种授权方式用户体验不好, 现在要求我们自己引导用户授权
B.如何引导用户授权?
添加一个open-type类型为getUserInfo的按钮, 只要用户点击这个按钮就可以弹出授权窗口

控件意味着引导用户授权,不会像以前一样莫名其妙的就弹出一个窗口
需要用户授权的原因是使用一些获取用户隐私的API需要用户授权,并不需要刚进入小程序就提示用户授权,这样做用户体验非常差
3.具体授权步骤
在index.wpy中添加上述的授权按钮,并且添加onGotUserInfo(e){console.log(e.detail);}为了保证按钮的美观,可以添加type属性为"primary",然后回到微信开发工具,就会弹出授权窗口,并且会执行onGotUserInfo方法中的内容,打印e.detail:用户获取用户信息返回对象中所有和key有关的内容.

image.png

用户授权返回的信息.png

通过添加授权按钮以及编写授权方法就可以实现授权,在授权触发的方法中可以通过e.detail得到以上图片中的数据

{errMsg: "getUserInfo:ok", rawData: "{"nickName":"labellyl","gender":2,"language":"zh_C…7vibU8Xs6kGDk7Yn5VaXnBKb2K4iaBvH1NPIrg3vPjg/132"}", signature: "1fb3d3f8be55f801da16264ff90b5f615c97a736", encryptedData: "Z1p4S/ndydpK90wh5Z/Sl8xGGuuBhmG9yPBLjSJlbjeJEE/Nsp…imvwP/r1LxRzL36Bhv3rGCqxONT0ijez56LG6eVKTHOank80=", iv: "wtNuqKHWAyOrw7ka70Aj0Q==", …}

以上引用是我的客户端实际打印的授权数据

三.微信登录的简单流程

1.通过wx.login()获取登录凭证code
2.通过button组件的open-type="getUserInfo", 获取用户信息
3.将获取到的登录凭证和用户信息传递到自己的服务器
4.在自己的服务器上将登录凭证发送到微信的服务器上换取openid和session_key
5.利用用户提交的信息在自己的服务器上注册用户账号(等等...)
6.将注册之后的信息返回给微信小程序
7.将注册信息保存起来以便以后使用

特殊说明:
0.code: 登录凭证
1.openid: 用户唯一标识 OpenID
2.session_key: 本次登录的会话密钥

注册信息使用的场景:
由于注册信息中包含了用户的唯一标识, 所以例如购物车类似的操作, 我们就需要根据用户的唯一标识去获取对应用户

四.wepy项目中使用async,await

1.上面一节讲了如何获取用户的授权信息,在实际微信小程序的登录流程,开发者服务器会通过code2session方法从微信服务器获取本次会话密钥用于数据的加密以及用户的唯一标识appid,这一节将如何通过wepy中的async和await获取用户的授权信息
2.在使用wepy提供的用户登录方法之前,先来了解一下小程序原生的用户登录方法