admin管理员组文章数量:1531404
技术：vue
实现效果
点击微信登录入口➡打开微信登录二维码➡手机扫码授权➡进入系统相应页面
开发前的准备
在微信开放平台注册开发者帐号，并拥有一个已审核通过的网站应用，并获得相应的 AppID 和AppSecret，申请微信登录且通过审核后，可开始接入流程。
具体实现流程请移步微信官网API
实现方法
1.准备一个回调页面（redirect_uri）； 注意：如果项目设置了路由拦截，请避免此页面被拦截
2.从后端获取appid、state加上回调页面地址拼接成链接
（也可以让后端提供一个接口直接返回拼接好的地址）链接示例：
https://open.weixin.qq/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect，
地址栏里打开此链接就是二维码页面；
（注意：redirect_uri地址要进行encodeURIComponent编码；）
3.用户允许授权后，将会重定向到redirect_uri的网址上，并且带上 code 和state参数，在此页面可以根据使用场景经行后续操作
代码样例（以下代码仅供参考，具体请根据项目需求灵活运用）
//登录页
//点击微信登录，打开二维码授权页面
goWechatLogin() {
let returnUri = encodeURIComponent(`http://******`)
let url = `https://open.weixin.qq/connect/qrconnect?appid=******&redirect_uri=${returnUri}&response_type=code&scope=SCOPE&state=*****#wechat_redirect`
window.location.href = url
},
//回调页
//用户允许授权后，将会重定向到redirect_uri的网址上，并且带上 code 和state参数（redirect_uri?code=CODE&state=STATE）
//把code、state用接口传给后端（ 封装的请求接口的方法：userApi.weixinLogin）
userApi.weixinLogin({
code: this.$route.query.code,
state: this.$route.query.state,
}).then((res) => {
if (res.data.result == 1 && res.data.resCode == "00000") {
//储存用户信息，或者根据返回信息做相应操作，例如需要此用户绑定手机号，若未绑定则进入绑定手机号页面,已绑定则进入系统首页...
}
})
如果微信授权后进入的页面是固定的且不需要进行任何操作，直接指定redirect_uri为系统里某个页面，那么只需要打开拼接好的链接即可。
版权声明：本文标题：vue网站第三方登录-微信登录 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1725776345a1041897.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论