vue网站第三方登录-微信登录

技术：vue

实现效果

点击微信登录入口➡打开微信登录二维码➡手机扫码授权➡进入系统相应页面

开发前的准备

在微信开放平台注册开发者帐号，并拥有一个已审核通过的网站应用，并获得相应的 AppID 和AppSecret，申请微信登录且通过审核后，可开始接入流程。

具体实现流程请移步微信官网API

实现方法

1.准备一个回调页面（redirect_uri）； 注意：如果项目设置了路由拦截，请避免此页面被拦截

2.从后端获取appid、state加上回调页面地址拼接成链接
（也可以让后端提供一个接口直接返回拼接好的地址）链接示例：
https://open.weixin.qq.com/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.com/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为系统里某个页面，那么只需要打开拼接好的链接即可。