微信web开发者工具中的登录流程

2024-05-07
来源:网络整理

使用微信网页开发者工具时,选择左侧菜单“项目”-勾选“开发环境不验证域名、TLS版本和证书”

转到文件夹

开始服务:-

开始: npm

查看具体信息

微信小程序有严格且复杂的登录方案。 为了整个登录过程顺利,我花了好几天的时间进行绘制和测试,终于~~

流程如下:

登录状态的作用

检查登录是否已过期

通过调用微信登录接口获取登录凭据,进而获取敏感信息

微信小程序(前端,以下统称前端)wx.()是每次进入微信小程序时第一个调用的接口。 由于微信小程序的登录是有时间限制的,因此内置了这个函数来检测登录是否过期。

wx.({

:(){

// 登录状态尚未过期,可以进行我们需要的业务。

},

失败: (){

wx.() // 登录状态已过期,需要重新登录

})

如果我们是第一次登录,或者登录状态已经过期,前端调用wx.(),会返回一个用户凭证代码,如{code:''}。

wx.({

:(资源){

.log(res.code); // ''

});

我们需要自己启动一个后端,也就是流程图中的第三方服务器,将上面得到的代码传给第三方服务器

前端代码示例:

wx.({

:(资源){

wx.({

url: ':8080/api/', // 该接口写在后端,用于与微信服务器进行金额交换。

数据: {

code: res.code // 将wx.()返回码传递给第三方服务器

},

:{

'-类型': '/json'

},

:(资源){

// 发送成功

})

})

本接口:8080/api/调用微信服务器接口''获取用户唯一标识和会话密钥

该接口调用微信服务器接口: ,所需参数及返回字段如下:

请求必填字段

:小程序唯一标识

:小程序应用

: 上面多次提到的代码

: 两个都

返回字段

:用户的唯一标识符

:登录会话密钥

: 有效时间

由于我测试的项目后端语言是使用node实现的,因此本文中所有后端代码都是node示例。

后端代码示例:

.get('/', (req, res, 下一个) {

// 获得

。得到({

uri: '#39;,

json:正确,

问:{

: '',

: ,

: ,

: 需要..代码

}, (错误, , 数据) => {

如果(。=== 200){

数据。 //用户唯一标识

数据。 // 会话密钥

数据。 //有效时间

} 别的 {

res.json(错误)

})

})

生成第三方,根据微信小程序官方建议:用于第三方服务器与小程序之间的登录状态验证。 为保证安全,应满足以下要求:

足够长。建议有2^128种组合

避免使用(当前时间)然后rand()方法,而是使用操作系统提供的真随机数机制

设置一定的有效时间

有很多方法可以生成它。 我们暂时跳过这一步,假设=''(当然数字开头的数字不能作为变量名,如代码中那样。),根据代码求和,然后存入内存。 是关键,也是存储。

我使用的方法是把sum写成json格式,然后将json格式转换成,

假设格式为'{:001,:002}',然后将其作为密钥存储在内存中。

会返回给前端,前端需要存储,第三方服务器也需要将{:+}存储在内存中。

内存是怎么存在的?可以npm --save,然后

= (''); = .();

介绍一下,它是内存中的一个数据结构存储系统,我们可以保存

最终封装完我们的第三方之后,我们回到前端。

后端代码示例:

.get('/', (req, res, 下一个) {

// 获得

。得到({

uri: '#39;,

json:正确,

问:{

: '',

: ,

: ,

: 需要..代码

}, (错误, , 数据) => {

如果(。=== 200){

//TODO: 生成唯一的字符串作为键,将总和保存为值,并将超时设置为2小时

让= {

: 数据。,

: 数据。

// 将{.:JSON.()}存储在内存中,并将过期时间设置为微信小程序接口返回给我们的有效时间

.set(., JSON.(), 'EX', 数据.);

} 别的 {

res.json(错误)

})

//返回前端

发送({

: 。

})

})

这时候我们的前端已经接收到了,需要在微信小程序中使用内置函数wx.()来存储。

// 伪代码

wx.({

钥匙:””,

数据:

})

至此,我们获取密钥生成的过程就结束了。 但有什么用呢? `` 用于每次发出请求时进行用户验证。 比如用户想做一些只有用户才能做的操作,没必要每次都询问微信服务器是不是我做的。 在有效时间内,我们要求使用您自己的服务器。 微信服务器已经返回了这个有效时间,即``。

接下来,我们带``来做一些只有我能做的操作,比如获取敏感的个人信息。

获取用户信息,当您只需要获取用户的个人基本信息时,不需要与第三方服务器进行交互。 只需调用以下接口即可:

wx.({

:(资源){

// 返回用户基本信息如下res

})

资源:

: '',

: '',

: '#39;,

: '',

: 2,

: '',

城市: '',

: '',

但当我们需要获取个人敏感信息时,需要将请求参数设置为true。 默认值为。 该字段表示是否带登录信息。

wx.({

:(资源){

: true, // 设置为 true

//返回含有敏感信息的个人信息如下res

})

资源:

: “:好的”,

: "{"":"","":2,"":""}",

: ,

:“xxx”,

:“xxx”,

: “:好的”,

:“”,

:“”,

四:“”,

:{

: '',

: '#39;,

: '',

: 2,

: '',

城市: '',

: '',

上述敏感信息加密算法请参考:【签名验证与用户数据加密】()

前端拿着上述个人敏感信息,向第三方服务器发起请求,目的是解密并获取个人敏感信息。

首先,第三方服务器根据 ,从内存中取出总和。 由于我们使用JSON.()将和存储在内存中,因此在取出时可以使用JSON.()。

根据解密数据。 , , , 四

敏感信息解密算法请参考:用户数据签名验证与解密

解密后的信息如下

“”:“”,

“”:“”,

“”:,

“城市”:“城市”,

“”:“”,

“”:“”,

“”:“”,

“”:“”,

“”:

“”:“”,

“”:

至此,获取敏感信息的步骤就完成了♪(^∇^*)

我遇到的疑惑

为什么微信小程序已经有了登录检测,过期后会弹出弹窗要求用户点击“允许”登录。为什么还需要使用wx.()来检测是否登录已过期再调用wx.()?

因为调用了wx.()来获取登录凭证,所以当登录凭证在有效期内时,不需要去微信服务器询问登录是否过期。

分享