H5微信公众号授权登录

一、封装获取code的函数、存储token函数、获取token函数

二、点击请求微信公众号授权并跳转

三、重定向跳转会当前链接获取code登录

四、整体流程的描述：

一、封装获取code的函数、存储token函数、获取token函数

// getRequest() 函数用于获取url中查询参数getRequest() {// 获取当前urllet 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; //是否存在codelet 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. 客户端根据响应结果进行相应操作，例如跳转页面、刷新界面等。