微信小程序登录授权
微信小程序登录授权
我们在项目中，登录，授权页面，都必须要传递token值。
一般商品详情页面的商品收藏，加入购物车。购物车页面都需要传递token。
token是什么？
token是前端鉴权的一种方式，token由后端生成， 是有时效性的。
微信小程序如何登录授权，拿到token
第一步：登录流程
前端—>后端—>腾讯服务器
wx.login—>wx.request—>后端—>腾讯服务器
微信小程序登录官方网址
https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html
第二步：具体实现
登录---->检测是否注册—>没有注册先获取用户信息进行注册（写入公司数据库）—>进行登录
将登录弹框封装成一个模板，进行引用
首先封装好请求接口文件
var API_BASE_URL = 'https://api.it120.cc'
var subDomain = 'jbn1995' //专属域名
let request = (url, needSubDomain, method, data) => {
const _url = API_BASE_URL + (needSubDomain ? '/' + subDomain : '') + url
return new Promise((resolve, reject) => {
wx.request({
url: _url,
method: method,
data: data,
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success(request) {
resolve(request.data)
},
fail(error) {
reject(error)
},
complete(aaa) {
// 加载完成
}
})
})
}
/**
* 小程序的promise没有finally方法，自己扩展下
*/
Promise.prototype.finally = function (callback) {
var Promise = this.constructor;
return this.then(
function (value) {
Promise.resolve(callback()).then(
function () {
return value;
}
);
},
function (reason) {
Promise.resolve(callback()).then(
function () {
throw reason;
}
);
}
);
}
具体实现步骤
1.点击封装的登录模板中的“允许”按钮，执行processLogin方法
<button class="jbn_login" bindgetuserinfo="processLogin" open-type="getUserInfo">允许button>
processLogin方法：
const WXAPI = require('apifm-wxapi');
const index = require('../../utils/index.js')
processLogin(e) {
console.log(e.detail.userInfo)
if (!e.detail.userInfo) {
wx.showToast({
title: '已取消',
icon: "none"
})
return
}
// 如果有userinfo ,就调用register注册方法
index.register(this)
},
2.如果有userInfo，就调用register注册方法，通过注册把腾讯信息写入公司数据库
注册需要三个参数
- iv 加密值
- code
- encryptedData 加密数据
async function register(page) {
let _this = this;
wx.login({
success: function (res) {
let code = res.code; // 微信登录接口返回的 code 参数，下面注册接口需要用到
wx.getUserInfo({
success: function (res) {
let iv = res.iv;
let encryptedData = res.encryptedData;
let referrer = '' // 推荐人
let referrer_storge = wx.getStorageSync('referrer');
if (referrer_storge) {
referrer = referrer_storge;
}
// 下面开始调用注册接口
WXAPI.register_complex({
code: code,
encryptedData: encryptedData,
iv: iv,
referrer: referrer
}).then(function (res) {
console.log(res)
_this.login(page);
})
}
})
}
})
}
3.执行登录的login方法，通过登录拿到token
async function login(page) {
const _this = this
wx.login({
success: function (res) {
WXAPI.login_wx(res.code).then(function (res) {
if (res.code == 10000) {
// 去注册
_this.register(page)
return;
}
if (res.code != 0) {
// 登录错误
wx.showModal({
title: '无法登录',
content: res.msg,
showCancel: false
})
return;
}
wx.setStorageSync('token', res.data.token)
wx.setStorageSync('uid', res.data.uid)
if (page) {
page.onShow()
}
})
}
})
}
4.检测登录状态和token是否过期
//检测token是否过期
//只检测登录态（检测微信返回）
async function checkSession(){
return new Promise((resolve, reject) => {
//通过内置方法检测
wx.checkSession({
success() {
return resolve(true)
},
fail() {
return resolve(false)
}
})
})
}
// 总体检测登录状态，包括token和微信登录态 返回 true 或false
//在app.js的onload生命周期通过index.checkHasLogined调用,如果过期
async function checkHasLogined() {
//获取本地存储的token
const token = wx.getStorageSync('token')
//如果没有token，直接返回false
if (!token) {
return false
}
//检测微信登录态
/**
* 调用成功说明当前 session_key 未过期，调用失败说明 session_key 已过期
*/
const loggined = await checkSession()
//如果没有登录态，则移除token,并返回false
if (!loggined) {
wx.removeStorageSync('token')
return false
}
//检测登录token是否有效
const checkTokenRes = await WXAPI.checkToken(token)
//如果登录token无效，移除token并返回false
if (checkTokenRes.code != 0) {
wx.removeStorageSync('token')
return false
}
//如果有token并且有效，并且微信登录态也有效则返回true
return true
}
module.exports = {
login: login,
register: register,
checkSession:checkSession,
checkHasLogined:checkHasLogined
}