目录
一、封装获取code的函数、存储token函数、获取token函数
一、封装获取code的函数、存储token函数、获取token函数
// getRequest() 函数用于获取url中查询参数
getRequest() {
// 获取当前url
let url = window.location.search;
// 创建theRequest对象
let theRequest = new Object();
// 如果当前url中包含‘?’
if (url.indexOf("?") != -1) {
// 获取url中‘?’之后的字符串
let str = url.substr(1);
// 将字符串按照‘&’分割
let strs = str.split("&");
// 遍历分割后的字符串数组
for (let i = 0; i < strs.length; i++) {
// 将每个字符串按照‘=’分割,以此获取参数名和参数值
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
// 返回theRequest对象
return theRequest;
}
二、点击请求微信公众号授权并跳转
//请求微信公众号登录
clickVote(data) {
let that = this;
//判断是否存在token 存在token做业务处理 如登录成功可投票等
if (this.getToken() {
that.clickPostVoat(data);
return;
} else {
let code = this.getRequest().code; //是否存在code
let oUrl = '重定向跳转的网址';
if (!code) {
let rUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${constant.WEIXIN_PHONE_APPID}&redirect_uri=${oUrl}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
window.location.href = rUrl
}
}
}
三、重定向跳转会当前链接获取code登录
//react生命周期 componentDidMount
mount() {
this.chatCode =this.getRequest().code;
//判断是否有code 请求登录并传code给后端处理
if (this.chatCode && !this.getToken() {
this.getLoginCode(this.chatCode);
}
}
// 获取code 登录
async getLoginCode(code) {
const res = await request({
method: "POST",
url: api.publicAccountCheckCode,
data: {
wxCode: code,
},
});
if (res.data) {
const { access_token } = res.data;
//存储token到浏览器
this.saveToken(access_token);
stores.Frame.success("登录成功");
}
}
四、整体流程的描述:
1. 用户点击网站上的微信授权登录按钮。
2. 前端代码生成一个随机字符串作为state参数,并将其存储在本地缓存中以供后续使用。
3. 前端代码构建完整的微信授权URL地址(包括appid、redirect_uri和scope等参数)并携带前面生成的state参数。同时,用户被重定向至该URL地址。
4. 微信服务器验证请求是否合法,并展示给用户一个授权页面。如果用户同意,则微信服务器会回调我们之前设置好的redirect_uri,并传递code和state两个参数值回来。(这里需要注意:如果不匹配则说明有人恶意篡改了你发起授权登陆过程)
5. 在前端代码中解析返回结果并提取出唯一的Code值。然后通过Ajax或fetch API发送HTTP POST 请求, 将 Code 参数添加到 body 中提交给服务端.
6. 服务端接收到Code值后, 向微信服务器发送HTTP GET 请求获取Access_Token 和 OpenId 等信息.
7. 服务端将从微信服务器获取到 Access_Token 和 OpenId 等信息保存在数据库或者缓存中.
8. 返回成功状态码及必要数据给客户端
9. 客户端根据响应结果进行相应操作,例如跳转页面、刷新界面等。