H5微信公众号授权登录

2023-09-05 14:51| 来源: 网络整理| 查看: 265

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

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

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

四、整体流程的描述：

一、封装获取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. 客户端根据响应结果进行相应操作，例如跳转页面、刷新界面等。

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章