小程序的登录流程
1. 三个角色: 小程序端 微信自己的服务器 公司的服务器 2. openid 3. 登录的过程: 我们的小程序端先调用接口 wx.login(),向微信的服务器发送请求,获取到一个code,这个code在我们的客户端是没有用的。 我们的服务器与微信的服务器进行一次沟通,将code+appid+appsecret这三个东西传递给微信的服务器, 微信的服务器会返回session_key和openid。服务器就拿到了openid,不会传给客户端,而是将openid存到服务器。 服务器端验证通过之后,会向客户端返回一个token,登录状态。客户端会把token保存起来。小程序中有个storage,一般将token保存在storage中。 下次再打开小程序的时候,就可以先从缓存中拿出token来,发送给服务器,验证一下是否过期,不用每次打开都登录一下了。如果过期了再登录,没过期的话就直接使用这个。 以后客户端向服务器发送请求(请求需要在登录的状态下才会返回结果时),会携带token。服务器会根据token查询openid或者session_key和其他数据。然后将数据返回给客户端。 4. 简化后的流程: 调用wx.login获取code 调用wx.request发送code到我们自己的服务器(我们自己的服务器会返回一个登录状态的标识,比如token) 将登录状态的标识token进行存储,以便下次使用 请求需要登录状态的接口时,带上这个token。 5. 官方图解 小程序登录流程官方图 官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html 接口: 登录接口 token是否过期的接口 登录接口: 接口:/login token是否过期的接口: 接口:/auth 一般情况下,登录在app.js中做,不用等到进入某个页面再做。 wx.setStorage与wx.setStorageSync的区别: wx.setStorage是异步的 wx.setStorageSync是同步的 小程序登录的流程代码大体如下:登录流程
openid:每一个微信用户的唯一标识
openid一般不保存在客户端,一般保存在服务器端。
我们自己的服务器会和微信的服务器进行通信。到时候微信的服务器就会返回一个session_key和openid,到时候我们的服务器会把这个openid存到数据库中。
1.1 这个code的作用是发送到我们自己的服务器
1.2 微信小程序端通过调用wx.request()将code发送到我们的服务器
1.3 服务器拿到code和appid(一开始申请到的)和appsecret
1.4 appsecret是怎么获取的:在小程序控制台,和appid在一个地方,可以重置。
3.1 有时候,公司希望不仅能用微信登录,还可以用用户名+密码登录小程序。
3.2 一般用账号+密码登录的时候,会在第一步,先让用户输入用户和密码,服务器验证通过以后,再将账号+密码+code发送给微信的服务器,换取openid;之后将openid+账号+密码存储在数据库的某个表中(t_user)。代码演练
method:post
参数:code (如果想要账号和密码登录的话,传递code+账号+密码)
返回:token
method:post
参数:header,token,将token放在header中传递过去
返回值:
错误码:
1001:没有传入token
1002:传入错误的token
1003:token过期。// 注册小程序的示例const TOKEN = "token"; // 规范写法,写成常量,也可以抽取出来到一个常量文件中。App({
// 全局对象,一旦小程序关闭掉,会被回收
globalData: {
token: "", //token
},
// 小程序初始化完成时,加载完,一般在这里进行登录操作
onLaunch: function(options) {
// 3. 做登录操作
// 3.1 先在缓存中取出token,如果有,就验证;没有再登录。
const token = wx.getStorageSync(TOKEN);
// 3.2 判断token是否有值,并且判断长度>0
if (token && token.length > 0) { // 已经有token,需要验证是否过期
console.log("执行了验证token操作");
// 验证token是否过期
this.checkToken(token);
} else { // 还没有token,所以得先登录
this.login(); // 登录一下
}
},
// 登录的代码
login() {
console.log("执行了登录操作");
wx.login({
success: (res) => {
console.log(res.code); // code只有5分钟的有效期
// 1. 获取code
const code = res.code;
// 2. 将code发送给自己的服务器
wx.request({
url: 'http://123.207.32.32:3000/login', // 调用了别人的接口
method: "post",
data: {
code,
},
success: (res) => {
console.log(res); // 服务器会返回一个token
// token的作用:在首页,关于啥的页面,都携带token才能查看某些内容
// 拿到token,很多地方都要用,所以最好保存到全局中。
// 3. 保存到全局
const token = res.data.token;
this.globalData.token = token; // 为了this有效,要都写成箭头函数的形式
console.log(this.globalData.token);
// 4. token进行本地存储(同步的)
wx.setStorageSync(TOKEN, token);
},
fail: function(error) {
console.log(error);
}
})
}
})
},
// 验证token是否过期
checkToken(token){
wx.request({
url: 'http://123.207.32.32:3000/auth',
method: "post",
header: {
token,
},
success: (res) => {
if(!res.data.errCode){ // token有效
this.globalData.token = token;
}else{ // token无效,得重新登录
this.login();
}
},
fail: (error) => {
console.log(error);
}
})
}})
作者:椰果粒
链接:https://www.jianshu.com/p/afb2451b147e
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。