微信小程序授权登陆

讲解视频观看https://live.csdn.net/v/131706

微信小程序登录授权

我们在项目中，登录，授权页面，都必须要传递token值。 一般商品详情页面的商品收藏，加入购物车。购物车页面都需要传递token。

token是什么？

token是前端鉴权的一种方式，token由后端生成， 是有时效性的。

微信小程序如何登录授权，拿到token

第一步：登录流程 前端—>后端—>腾讯服务器 wx.login—>wx.request—>后端—>小程序(腾讯)服务器 小程序wx.login官方文档https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html

第二步： 登录---->检测是否注册—>没有注册先获取用户信息进行注册（写入公司数据库）—>进行登录 将登录弹框封装成一个模板，进行引用 首先封装好请求接口文件 api.js

module.exports={ "registor":"/user/wxapp/register/complex",//注册 "login":"/user/wxapp/login",//登陆 "userDetail":"/user/detail"//用户详细信息 }

fetch.js

module.exports=(url,method,data)=>{ let p=new Promise((resolve,reject)=>{ wx.request({ url: url, method:method, header:{'Content-Type': 'application/x-www-form-urlencoded'}, data:Object.assign({},data), success(res){ resolve(res) }, fail(err){ reject(err) } }) }) return p; }

http.js

const api = require('./api') const fetch = require('./fetch') const baseUrl="https://api.it120.cc/tianxing";//基础域名 //注册 function registor(data={}){ return fetch(baseUrl+api.registor,'post',data) } //登陆 function login(data){ return fetch(baseUrl+api.login,'post',data) } //用户详细信息 function userDetail(data){ return fetch(baseUrl+api.userDetail,'get',data) } module.exports={ registor, login, userDetail }

具体实现步骤

1.点击封装的登录模板中的“允许”按钮，执行processLogin方法

<view wx:else class="header-box"> <image class="avatar" src="/images/nologin2.png"></image> <van-button plain custom-class="btn" size="small" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="processLogin">立即登录</van-button> </view> <!-- getUserInfo 获取用户信息，可以从bindgetuserinfo回调中获取到用户信息 -->

processLogin方法：

//立即登录 processLogin(e) { console.log(e); if (!e.detail.userInfo) { wx.showToast({ title: '已取消', icon: 'none', }) return; } // 如果有userinfo ,就调用register注册方法 this.registor(); },

2.如果有userInfo，就调用register注册方法，通过注册把腾讯信息写入公司数据库 注册需要三个参数

iv 加密值codeencryptedData 加密数据 //注册 registor(){ let _this = this; //调用接口获取登录凭证（code）唯一标识（openid）及本次登录的会话密钥（session_key） wx.login({ success: function (res) { let code = res.code; // 微信登录接口返回的 code 参数，下面注册接口需要用到 wx.getUserInfo({ //获取用户信息 success: function (res) { let iv = res.iv; //加密算法的初始向量 let encryptedData = res.encryptedData; //完整用户信息的加密数据 // 下面开始调用注册接口 http.registor({ //微信小程序用户快速注册 code: code, encryptedData: encryptedData, iv: iv }).then(function (res) { console.log(res); _this.login(); }) } }) } }) },

3.执行登录的login方法，通过登录拿到token

//登陆 login(page){ const _this = this wx.login({ // 获取登陆凭证 code success: function (res) { console.log(res) //调用登陆接口，传code http.login({code:res.code,type:2}).then(function (res) { console.log(res) res=res.data; if (res.code != 0) { // 登录错误 wx.showModal({ title: '无法登录', content: res.msg, showCancel: false }) return; } console.log(res) wx.setStorageSync('token', res.data.token) wx.setStorageSync('uid', res.data.uid) _this.onShow() }) } }) }, 登陆成功触发onShow() onShow: function () { this.getUserApiInfo(); }, 获取用户详细信息 //获取用户详情信息 getUserApiInfo() { console.log(10000) var that = this; //后去用户详细信息 http.userDetail({token:wx.getStorageSync('token')}).then(function (res) { console.log(res); if (res.data.code == 0) { // let _data = {} // _data.apiUserInfoMap = res.data // that.setData(_data); that.setData({ apiUserInfoMap:res.data.data }) } }) }, 退出登陆 点击退出按钮 <van-cell wx:if="{{apiUserInfoMap}}" title="退出登录" is-link bindtap="loginOut" /> //退出函数 loginOut(){ wx.removeStorageSync('token') wx.removeStorageSync('uid') wx.reLaunch({ url: '/pages/mylogin/mylogin' }) },

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 }

讲解视频观看https://live.csdn.net/v/131706