微信小程序登录授权
在项目中,登录,授权页面,都必须要传递token值。
一般商品详情页面的商品收藏,加入购物车。购物车页面都需要传递token。
token是什么?
Token是服务端生成的一串字符串,以作客户端进行请求的一个令牌,当第一次登录后,服务器生成一个Token便将此Token返回给客户端,以后客户端只需带上这个Token前来请求数据即可,无需再次带上用户名和密码。
验证是否授权
小程序的API接口中有些接口是需要用户授权才可以调用的,以调用获取用户信息(性别、昵称、头像、地区等)的API为例:
目前接口调整为,如果没有授权不会出现授权弹窗而是直接进入fail回调,
而授权弹窗也只能通过<button open-type="getUserInfo"/>去触发,
调用wx.authorize()不会出现授权弹窗。
总之授权功能需要用户手动去触发。
一、检查是否授权过
小程序端通过调用wx.getSetting()接口可以在成功的回调里获取到所有已经授权过的信息。
wx.getSetting({
success (res) {
// res.authSetting = {
// "scope.userInfo": true,
// "scope.userLocation": true
// ...
// }
if(!res.authSetting['scope.userInfo']){
// 没有授权做引导处理
}
}
})
这里需要小程序端进行判断,如果已经授权过就可以直接调用相应的接口,如果没有授权,需要提示去授权或者直接跳转到授权页。
二、授权
用户通过点击弹出授权弹窗,如果同意授权则可以从bindgetuserinfo回调中获取到用户信息。
三、设置界面
现调整为只能通过点击按钮跳转至设置界面
当然也可以[右上角] - [关于] - [右上角] - [设置]打开设置界面,设置界面只会出现已经授权过的的权限信息。在这里可以自由设置权限。
登录
一、调用wx.login()
小程序端通过调用wx.login()API,调用成功的话会在成功的回调里获取一个有时效的登录凭证code。
然后调用自家的服务器接口,把获取到的code传递给服务端。
wx.login({
success (res) {
if (res.code) {
//发起网络请求
wx.request({
url: 'https://test.com/onLogin',
data: {
code: res.code
}
})
} else {
console.log('登录失败!' + res.errMsg)
}
}
})
二、从微信端获取用户信息
服务端在拿到code之后,会调用微信端的接口,这时需要把code、appid、secret、grant_type传递给微信端,换取用户的信息。
调用成功的话,微信端会返回openid、session_key等信息,如果满足unionid条件也会同时返回。
至此,登录过程完成。
三、检测登录状态
因为wx.login接口具有时效性,实际项目中我们肯定不需要每次都直接调用登录接口,而是先检测之前的登录状态是否过期,如果没有过期则无需再次登录
wx.checkSession({
success () {
//session_key 未过期,并且在本生命周期一直有效
},
fail () {
// session_key 已经失效,需要重新执行登录流程
wx.login() //重新登录
}
})
附上一张流程图: