前言:对于web端网站系统来说,实现登录功能一般通过账号密码,或者手机号验证码进行登录,之后后端进行校验,通过之后,发送token(代表登录状态)给前端,以便进行后续的交互。但是在微信小程序中,却不同,可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系,从而实现登录功能。
注意:实现小程序登录功能主要涉及到code和openID的概念:
开发者通过调用wx.login()接口获取登录凭证(code)。通过凭证进而换取用户登录态信息,包括用户在当前小程序的唯一标识(openid)、微信开放平台帐号下的唯一标识(unionid,若当前小程序已绑定到微信开放平台帐号)及本次登录的会话密钥(session_key)等。用户数据的加解密通讯需要依赖会话密钥完成。
小程序的登录流程:
说明:
1、首先调用wx.login()获取临时登录凭证code,并传到开发者服务器。
2、接着服务器调用auth.code2Session()接口,换取用户唯一标识OpenId,用户在微信开放平台帐号下的唯一标识UnionID(若当前小程序已绑定到微信开放平台帐号)和会话密钥 session_key。之后开发者服务器可以根据用户标识来生成自定义登录态,用于后续业务逻辑中前后端交互时识别用户身份。
实现登录第一步—————获取code
小程序通过wx.login()方法获取登录凭证code,在小程序页面中声明一个按钮,点击时触发登录的函数。
toLogin(){
//wx.login()方法获取code
wx.login({
success (res) {
if (res.code) {
console.log(res.code)
}
}
})
}
以上就是获取登录凭证code,并打印到控制台查看
实现登录第二步——————将code发送到开发者服务器
login:function(){
// wx.login()获取code
wx.login({
success:(res)=>{
console.log("code: " + res.code);
//通过wx.request()方法将code发送到开发者服务器
wx.request({
url:'http://127.0.0.1:3000/login',
method:'POST',
data:{
code : res.code
}
})
}
})
}
在开发者服务器中写一个路由与该请求进行匹配,
// '/login'即响应在小程序中的请求http://127.0.0.1:3000/login
app.post('/login',(req,res)=>{
console.log('code: '+req.body.code) // 打印一下code
})
实现登录第四步——————通过微信接口服务校验
接着开发者服务器将appID和appSecret和code发送给微信接口服务去校验,成功后会返回openid(用户唯一标识)和session_key(会话信息记录)
//在这里一定要导入这个,否则无法使用下面的request函数,这里踩过坑
const request=require('request')
// 开发者信息
const wx = {
// appid:' ', // 填写用户自己的appid
// secret:' ' // 填写用户自己的密钥
}
// '/login'即响应在小程序中的请求http://127.0.0.1:3000/login
app.post('/login',(req,res)=>{
console.log('code: '+req.body.code) // 打印一下code
// code,appid,secret都有了就发起请求到微信接口服务校验
var url = 'https://api.weixin.qq.com/sns/jscode2session?appid=' + wx.appid + '&secret=' + wx.secret + '&js_code=' + req.body.code + '&grant_type=authorization_code'
request(url, (err, response, body) => {
// 可以获取到 session_key(会话信息) 、 openid(用户唯一标识)
console.log('session: ' + body)
// 上面的session信息是字符串数据,通过JSON.parse()转成js对象
// var session = JSON.parse(body)
console.log(session);
})
成功之后会返回openid和session_key,openid是用户在这个小程序上唯一的id,不同小程序用户的id都不一样,session_key是用户的会话信息记录。