苍穹外卖-day06 微信登录 导入小程序代码 微信登录流程 需求分析和设计

3. 微信登录

3.1 导入小程序代码

开发微信小程序，本质上是属于前端的开发，我们的重点其实还是后端代码开发。所以，小程序的代码已经提供好了，直接导入到微信开发者工具当中，直接来使用就可以了。

1). 找到资料

 2). 导入代码

AppID：使用自己的AppID

3). 查看项目结构

主体的文件:app.js app.json app.wxss

项目的页面比较多，主要存放在pages目录。

4). 修改配置

因为小程序要请求后端服务，需要修改为自己后端服务的ip地址和端口号(默认不需要修改)

common-->vendor.js-->搜索(ctrl+f)-->baseUri

 

3.2 微信登录流程

微信登录：小程序登录 | 微信开放文档

流程图：

步骤分析：

1. 小程序端，调用wx.login()获取code，就是授权码。

2. 小程序端，调用wx.request()发送请求并携带code，请求开发者服务器(自己编写的后端服务)。

3. 开发者服务端，通过HttpClient向微信接口服务发送请求，并携带appId+appsecret+code三个参数。

4. 开发者服务端，接收微信接口服务返回的数据，session_key+opendId等。opendId是微信用户的唯一标识。

5. 开发者服务端，自定义登录态，生成令牌(token)和openid等数据返回给小程序端，方便后绪请求身份校验。

6. 小程序端，收到自定义登录态，存储storage。

7. 小程序端，后绪通过wx.request()发起业务请求时，携带token。

8. 开发者服务端，收到请求后，通过携带的token，解析当前登录用户的id。

9. 开发者服务端，身份校验通过后，继续相关的业务逻辑处理，最终返回业务数据。

接下来，我们使用Postman进行测试。

说明：

1. 调用 wx.login() 获取 临时登录凭证code ，并回传到开发者服务器。

2. 调用 auth.code2Session 接口，换取 用户唯一标识 OpenID 、 用户在微信开放平台帐号下的唯一标识UnionID（若当前小程序已绑定到微信开放平台帐号） 和 会话密钥 session_key。

之后开发者服务器可以根据用户标识来生成自定义登录态，用于后续业务逻辑中前后端交互时识别用户身份。

实现步骤：

1). 获取授权码

点击确定按钮，获取授权码，每个授权码只能使用一次，每次测试，需重新获取。'

2). 明确请求接口

请求方式、请求路径、请求参数

3). 发送请求

获取session_key和openid

若出现code been used错误提示，说明授权码已被使用过，请重新获取

3.3 需求分析和设计

3.3.1 产品原型

用户进入到小程序的时候，微信授权登录之后才能点餐。需要获取当前微信用户的相关信息，比如昵称、头像等，这样才能够进入到小程序进行下单操作。是基于微信登录来实现小程序的登录功能，没有采用传统账户密码登录的方式。若第一次使用小程序来点餐，就是一个新用户，需要把这个新的用户保存到数据库当中完成自动注册。

登录功能原型图：

业务规则：

• 基于微信登录实现小程序的登录功能

• 如果是新用户需要自动完成注册

3.3.2 接口设计

通过微信登录的流程，如果要完成微信登录的话，最终就要获得微信用户的openid。在小程序端获取授权码后，向后端服务发送请求，并携带授权码，这样后端服务在收到授权码后，就可以去请求微信接口服务。最终，后端向小程序返回openid和token等数据。

基于上述的登录流程，就可以设计出该接口的请求参数和返回数据。

说明：请求路径/user/user/login,第一个user代表用户端，第二个user代表用户模块。

3.3.3 表设计

当用户第一次使用小程序时，会完成自动注册，把用户信息存储到user表中。

字段名	数据类型	说明	备注
id	bigint	主键	自增
openid	varchar(45)	微信用户的唯一标识
name	varchar(32)	用户姓名
phone	varchar(11)	手机号
sex	varchar(2)	性别
id_number	varchar(18)	身份证号
avatar	varchar(500)	微信用户头像路径
create_time	datetime	注册时间

说明：手机号字段比较特殊，个人身份注册的小程序没有权限获取到微信用户的手机号。如果是以企业的资质 注册的小程序就能够拿到微信用户的手机号。