【uni-app】uniapp微信小程序授权登录（详细总结）

❤ 写在前面

如果觉得对你有帮助的话，点个小❤❤ 吧，你的支持是对我最大的鼓励~
欢迎关注我的公众号【有更多的前端教程】 或者来看 我的个人网站

---

---

❤ 前言

小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识，快速建立小程序内的用户体系。

---

❤ 授权步骤

❤ 第一步

获取code和微信的用户信息
2021年4月28日24时前发布的小程序(旧版本）

<button class='bottom' type='primary' open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="wxGetUserInfo">授权微信</button>

wxGetUserInfo() {
	uni.getUserInfo({
		provider: 'weixin',
		success: infoRes => {
			this.userInfo=infoRes.userInfo; //用户信息，微信头像，昵称等等
			uni.login({
				success(res){
					console.log(res.code)  //获取到的code
				}
			})			
		},
		fail(res) {
			uni.showToast({
				title:'登录授权失败',
				icon:'none',
			})
		}
	});
}

2021年4月28日24时后发布的小程序新版本 可用

<button class='bottom' type='primary' open-type="getUserInfo" withCredentials="true" lang="zh_CN" @click="getUserInfo">授权微信</button>

getUserInfo() {
	uni.getUserProfile({
		lang: 'zh_CN',
		desc: '登录',
		success: infoRes => {
			this.userInfo=infoRes.userInfo; //用户信息，微信头像，昵称等等
			uni.login({
				success(res){
					console.log(res.code)  //获取到的code
				}
			})			
		},
		fail(res) {
			uni.showToast({
				title:'登录授权失败',
				icon:'none',
			})
		}
	});
}

❤ 第二步

使用获取到的code通过webAPI接口获取openid
这个需要通过API接口获取
友情提醒：前端不要放任何关于APPID，APPSECRET的数据，不然审核过不了

将code传给接口，接口使用APPID，APPSECRET，code去访问下面地址
就可以返回openid 和 sessionKey了，sessionKey在获取手机号时，需要用到
url: 'https://api.weixin.qq.com/sns/jscode2session?appid=自己的APPID&secret=自己的SECRET&js_code=' + code + '&grant_type=authorization_code',

❤ 第三步

获取手机号

<button open-type="getPhoneNumber" type='primary' class='bottom' @getphonenumber="getPhoneNumber">绑定手机号</button> 

getPhoneNumber(e) {
	//encryptedData 和 iv 是用来获取手机号的
	var encryptedData =e.detail.encryptedData;
	var iv = e.detail.iv;
	//获取手机号有两种方法，1.前端使用js完成；2.使用接口完成（语言不限可自行百度），这边我说一种，使用js获取
	//WXBizDataCrypt是js文件，路径记得用对，下面有js文件源码
	var WXBizDataCrypt = require('@/common/WXBizDataCrypt'); //路径要对应，你新建的WXBizDataCrypt.js文件路径
	const accountInfo = uni.getAccountInfoSync(); //获取小程序appid
	let appid = accountInfo.miniProgram.appId
	var pc = new WXBizDataCrypt(appid , this.sessionKey);
	var data = pc.decryptData(encryptedData , iv);
	//data.purePhoneNumber就是要获取的手机号啦
},

单独新建一个js文件，命名为：WXBizDataCrypt.js

//WXBizDataCrypt.js
var crypto = require('crypto')

function WXBizDataCrypt(appId, sessionKey) {
  this.appId = appId
  this.sessionKey = sessionKey
}

WXBizDataCrypt.prototype.decryptData = function (encryptedData, iv) {
  // base64 decode
  var sessionKey = new Buffer(this.sessionKey, 'base64')
  encryptedData = new Buffer(encryptedData, 'base64')
  iv = new Buffer(iv, 'base64')

  try {
     // 解密
    var decipher = crypto.createDecipheriv('aes-128-cbc', sessionKey, iv)
    // 设置自动 padding 为 true，删除填充补位
    decipher.setAutoPadding(true)
    var decoded = decipher.update(encryptedData, 'binary', 'utf8')
    decoded += decipher.final('utf8')
    
    decoded = JSON.parse(decoded)

  } catch (err) {
    throw new Error('Illegal Buffer')
  }

  if (decoded.watermark.appid !== this.appId) {
    throw new Error('Illegal Buffer')
  }

  return decoded
}

module.exports = WXBizDataCrypt

---

❤ 总结

微信小程序授权登录步骤：

• 获取code及用户信息
• 获取openid
• 获取手机号

Thanks♪(･ω･)ﾉ，到此就结束了，有什么问题都可以问！
欢迎评论 / 私信我~