小程序登录流程

目录

1 登录流程时序图

2 wx.login(Object object)

2.1 使用案例

3 auth.code2Session

4 RuquestTask wx.request(Object object)

4.1 使用案例

5 小程序登录 

---

1 登录流程时序图

 

 

从登录时序图来看，我们需要通过wx.login()来获取code，然后把获取到的code以及小程序的appid、appSecret一起作为条件来调用微信接口获取用户的openid（要有想获取用户信息的权限），关于权限的申请在另一篇文章有描述，这里就不展开讲了。

下面我们来聊一聊wx.login()和用来发送http请求的wx.request()

 

2 wx.login(Object object)

可以用来获取登录凭证（code），通过凭证进而换取用户登录态信息，包括用户的唯一标识（openid）及本次登录的会话密钥（session_key）等。

 

参数

属性	类型	默认值	必填	说明
timeout	number		否	超时时间，单位ms
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

 

object.success（Object res） 回调函数

Object res

属性	类型	说明
code	string	用户登录凭证（有效期五分钟）

 

2.1 使用案例

调用wx.login()获取code

wx.login({
  success(res) {
    if (res.code) {
      consolse.log(res.code)
    } else {
      console.log('登录失败！' + res.errMsg)
    }
  }
})

 

3 auth.code2Session

登录凭证校验，通过 wx.login()接口获得临时登录凭证 code 后传到开发者服务器调用此接口完成登录流程

 

接口地址

GET https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

请求参数

属性	类型	默认值	必填	说明
appid	string		是	小程序 appId
secret	string		是	小程序 appSecret
js_code	string		是	登录时获取的 code
grant_type	string		是	授权类型，此处只需填写 authorization_code

 

返回值（ JSON 数据包）

属性	类型	说明
openid	string	用户唯一标识
session_key	string	会话密钥
unionid	string	用户在开放平台的唯一标识符，在满足 UnionID 下发条件的情况下会返回，详见 UnionID 机制说明。
errcode	number	错误码
errmsg	string	错误信息

errcode 的合法值

值	说明
-1	系统繁忙，此时请开发者稍候再试
0	请求成功
40029	code 无效
45011	频率限制，每个用户每分钟100次

 

4 RuquestTask wx.request(Object object)

发起 HTTPS 网络请求

参数

属性	类型	默认值	必填	说明
url	string		是	开发者服务器接口地址
data	string/object/ArrayBuffer		否	请求的参数
header	Object		否	设置请求的 header，header 中不能设置 Referer。 content-type 默认为 application/json
method	string	GET	否	HTTP 请求方法
dataType	string	json	否	返回的数据格式
responseType	string	text	否	响应的数据类型
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

object.method 的合法值

值	说明
OPTIONS	HTTP 请求 OPTIONS
GET	HTTP 请求 GET
HEAD	HTTP 请求 HEAD
POST	HTTP 请求 POST
PUT	HTTP 请求 PUT
DELETE	HTTP 请求 DELETE
TRACE	HTTP 请求 TRACE
CONNECT	HTTP 请求 CONNECT

object.success 回调函数

参数 Object res

属性	类型	说明
data	string/Object/Arraybuffer	开发者服务器返回的数据
statusCode	number	开发者服务器返回的 HTTP 状态码
header	Object	开发者服务器返回的 HTTP Response Header

data 参数说明

最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String 。

 

4.1 使用案例

以POST方式请求post.php，并携带数据name=Trevor和age=23

wx.request({
  url: 'post.php', // 请求的地址
  data: {
    name: 'Trevor',
    age: 23
  },
  method:'POST'    // 以POST方式请求
  },
  success(res) {
    console.log(res.data)
  }
})

到此我们把小程序登录的基础知识有了一个大概的认识，下面步入正题。

 

5 小程序登录 

    wx.login({
      success:function(res){
        const code=res.code
        const appid ="小程序的AppID";
        const secret ="小程序的AppSecret"
        const url = "https://api.weixin.qq.com/sns/jscode2session?appid=" + appid + "&secret=" + secret+"&js_code="+code+"&grant_type=authorization_code"
        wx.request({
          url: url, // 接口地址
          success(res) {
            const data=res.data
            console.log(data.openid);   // 输出openid，之后就可以编写自己的业务逻辑了
          }
        })
      }
    })