微信公众号网页获取用户授权取得openid,和使用openid进行协助登录逻辑(Vue样例) |
您所在的位置:网站首页 › 公众号网页代码 › 微信公众号网页获取用户授权取得openid,和使用openid进行协助登录逻辑(Vue样例) |
目录 一、官方给的获取openid步骤 第一步:用户同意授权,获取code 第二步:通过code换取网页授权access_token 第三步:刷新access_token(如果需要) 第四步:拉取用户信息(需scope为 snsapi_userinfo) 二、前端需要做的事 三、使用openid协助登录逻辑 四、获取openid部分的vue代码样例
微信官方文档——微信网页开发 /网页授权 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html 一、官方给的获取openid步骤 第一步:用户同意授权,获取code在确保微信公众账号拥有授权作用域(scope参数)的权限的前提下(服务号获得高级接口后,默认拥有scope参数中的snsapi_base和snsapi_userinfo),引导关注者打开如下页面: https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 值得注意的是scope参数有两种,按需选择: 1.snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid) 2.snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且, 即使在未关注的情况下,只要用户授权,也能获取其信息 ) 用户同意授权后,页面将跳转至 redirect_uri/?code=CODE&state=STATE。 这里通过code换取的是一个特殊的网页授权access_token,与基础支持中的access_token(该access_token用于调用其他接口)不同。公众号可通过下述接口来获取网页授权access_token。如果网页授权的作用域为snsapi_base,则本步骤中获取到网页授权access_token的同时,也获取到了openid,snsapi_base式的网页授权流程即到此为止。 尤其注意:由于公众号的secret和获取到的access_token安全级别都非常高,必须只保存在服务器,不允许传给客户端。后续刷新access_token、通过access_token获取用户信息等步骤,也必须从服务器发起。 所以这部分会由后端负责完成,如果使用snsapi_base只需要获取openId的话,流程其实到这里就结束了。 第三步:刷新access_token(如果需要)由于access_token拥有较短的有效期,当access_token超时后,可以使用refresh_token进行刷新,refresh_token有效期为30天,当refresh_token失效之后,需要用户重新授权。 第四步:拉取用户信息(需scope为 snsapi_userinfo)如果网页授权作用域为snsapi_userinfo,则此时开发者可以通过access_token和openid拉取用户信息了。 二、前端需要做的事简单地说,前端只需要引导关注者打开如下页面:https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect ,获取到返回的code,传给后端,后端再将他获取到的openid返回给我们即可。 三、使用openid协助登录逻辑我这里的业务需求是,客户本身有一套自己的登录系统,要跳转到他们的页面上。但是假如已经在微信上打开登过呢,就不再跳转他们的登录页,可以直接登录进去了。 所以大概逻辑就是 1.前端获取code,传给后端换取openid 2.调用后端的登录接口传openId尝试登录,如果没有绑定过账户会登录失败跳转到第三方登录页面,绑定过的话直接登录成功,存下token。 3.跳转到第三方登录,成功的话会返回一个第三方的code(非微信code)给我,与openid一同再传回给后端进行绑定。 4.再次调用那个需要openid的登录接口,成功之后存下token。 四、获取openid部分的vue代码样例 export default { data() { return { appid: process.env.VUE_APP_WECHAT_APP_ID, showLoginPic: true, openId:null, }; }, mounted() { let openId = storageDB.getItem("openId"); var that = this; if (!openId) { this.getCode(); } else { this.openId = openId; } }, methods: { //静默授权 getCode() { this.code = ""; let local = window.location.href; let scope = "snsapi_base"; //静默授权 用户无感知 this.code = this.getUrlCode().code; if (this.code == null || this.code === "") { window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.appid}&redirect_uri=${encodeURIComponent( local )}&response_type=code&scope=${scope}#wechat_redirect`; } else { this.getOpenId(this.code); } }, getUrlCode() { let fullUrl = window.location.href; let theRequest = new Object(); if (fullUrl.indexOf("?") != -1) { var temp = fullUrl.split("?"); let str = temp[1]; let strs = str.split("&"); for (var i = 0; i < strs.length; i++) { theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1]; } } return theRequest; }, getOpenId(code) { let that = this; this.$api.loginController.getWechatOpenId(code).then(res => { if (res.status == 1000) { that.openId = res.data.openId; storageDB.setItem("openId", that.openId); } else { Toast(res.message); } }); }, }, };
|
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |