时间:2022-08-12 08:39:01 | 来源:网站运营
时间:2022-08-12 08:39:01 来源:网站运营
Web 网站的用户登录注册方式有用户名密码登录、验证码登录、OAuth 第三方授权登录等。openid
和 unionid
,简单来说分为三步:access_token
的时序图:https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
code
。 https://open.weixin.qq.com/connect/qrconnect?appid=wxb6a3d3490ab4c2cd&redirect_uri=https://zi.pongj.com/oauth/wechat/login&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect
<a href="https://open.weixin.qq.com/connect/qrconnect?appid=wxb6a3d3490ab4c2cd&redirect_uri=https://zi.pongj.com/oauth/wechat/login&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect"> <img title="微信" alt="微信" src="//sf6-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/wechat.e0ff124.svg" class="oauth-btn" /></a>
redirect_url
的页面code
)redirect_uri
的页面时,会在 redirect_uri
地址后添加上临时的 code
,我们在开发 redirect_uri
页面的时候可以判断地址中是否包含 code
来确定用户是否授权。code
加上 AppID 和 AppSecret 来获取 access_token
redirect_uri
的页面中检查到地址中包含了 code
的参数,并且用户已授权,然后我们就可以使用 code
来获取 access_token
。code
之后,接下来网站应用的步骤就是从上图中的 5-11 步骤所示,之前的步骤在上面已经介绍过了,接下来详细的介绍一下 5-11 步骤操作:redirect_uri
页面中添加路经检测逻辑,检查是否带有 code
参数:如果带有 code
参数,表明用户已同意授权;如果未带有 code
参数,则说明用户拒绝或关闭了授权页面,此时需要重定向到登录页面,并提醒用户登录失败。const { code } = this.$route.queryif (!code) { this.$notify.warning('请重新登录') return this.$router.push('/login')}
第 6 步:code
参数,然后就需要获取授权的 access_token
,获取 access_token
需要使用 AppID 和 AppSecret,由于涉及到 AppSecret 的安全性,因此我们将请求发送到后端进行操作。code
参数,以及保存在环境变量或者配置文件中的 AppSecret 来获取 access_token。https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
其中:request
或者 got
等模块向微信开发平台发送 GET
请求。access_token
的返回值。{ "access_token":"ACCESS_TOKEN", "expires_in":7200, "refresh_token":"REFRESH_TOKEN", "openid":"OPENID", "scope":"SCOPE", "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"}
其中,access_token
是调用授权关系接口的调用凭证,由于access_token
有效期(目前为2个小时)较短,当access_token
超时后,可以使用refresh_token
进行刷新,刷新的操作只需要加上 refresh_token
并调用接口即可,详细的操作可以查看官方文档openid
和 unionid
,这两个字段用户对于网站应用是固定不变的,因此我们可以在此处通过 openid
和 unionid
来判断该微信用户是否在我们的网站中已经注册过,如果注册过,直接生成合法的 token
值返回到前端页面即可;如果用户未在网站中注册,那么我们需要先获取到用户的个人信息,然后再生成 token
access_token
之后,并判断用户未在网站应用中注册,我们就需要获取用户信息,来保存用户的授权登录信息。https://api.weixin.qq.com/sns/userinfo?access_token=access_token&openid=openid
其中:access_token
openid
,在上一步中的返回结果中包含了 openid
{ "openid":"OPENID", "nickname":"NICKNAME", "sex":1, "province":"PROVINCE", "city":"CITY", "country":"COUNTRY", "headimgurl": "https://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/0", "privilege":[ "PRIVILEGE1", "PRIVILEGE2" ], "unionid": " o6_bmasdasdsad6_2sgVt7hMZOPfL"}
到这一步,我们已经获取到了用户的个人信息,下面我们就需要将用户的信息保存在我们的数据库中,在下一次用户扫码微信登录的时候,可以直接返回用户的登录 token
,而不需要再从微信平台中获取个人信息了。token
值返回给前端页面,前端页面来标识用户已登录成功,并跳转到网站的首页。if (result.token) { await this.$store.dispatch('user/oauth', result.token) this.$notify.success('登陆成功') setTimeout(() => { this.$router.push('/') }, 3000) return}this.$notify.success('请重新登录')setTimeout(() => { this.$router.push('/login')}, 3000)
关键词:教程