vue pc端微信扫码登录

最新推荐文章于 2024-07-20 18:09:58 发布

小青年一枚

最新推荐文章于 2024-07-20 18:09:58 发布

阅读量780

点赞数 5

分类专栏： vue 文章标签： vue.js 微信前端

本文链接：https://blog.csdn.net/qq_32195805/article/details/137598909

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

前几天写了一遍关于钉钉扫码登录的文章，今天来补充下微信扫码登录的内容。首先看微信官方文档，能看出微信扫码可以分为两种方式。
第一种是点击后跳转到二维码页面进行扫码，第二种是内嵌的方式，这两种都是获取到code传给后端，后端根据code获取openid，同时返给前端token，然后再调用登录的接口。
在这里插入图片描述
这里具体的细节我就不写了，有不明白的同学可以去看下微信文档

<div id="login_wechat" style="margin: 0 auto; width: 250px; height: 250px;"></div>

mounted(){
//扫码授权后获取到code
    if(window.location.href.indexOf('code') >= 0)
    {
        console.log(1111)
        //如果url中包含code,则保存到store中
        let code = window.location.href.split("?")[1];
        code = code.substring(5, code.indexOf('&'));
        if(code != null && "" != code && code != undefined)
        {
            console.log("开始执行微信登录")
            //向后端传递code ,发起请求
            axios.get(`https://xxxxx.net/auth/validate/getWeChat?code=${code}`).then((r) =>
            {
                if(r.data.status === 200)
                {
                    const params = {
                        grant_type: 'open_id',
                        scope: 'admin',
                        openId: r.data.data.openId
                    }
                    //调用登录接口
                    mobileLogin(params).then(res =>
                    {
                        if(res.status === 500)
                        {
                            this.$message.error(res.data.msg)
                        }
                        else if(res.status === 200)
                        {
                            this.$store.dispatch('user/login', params).then(() =>
                            {
                                this.$router.push(
                                {
                                    path: 'index'
                                })
                            })
                        }
                    })
                }
            })
        }
    }
}

这里是内嵌方式生成二维码的

methods: {

	wxSdk() {
				this.$nextTick(() => {
					const obj = new WxLogin({
						self_redirect: false, //允许在iframe内跳转
						id: "login_wechat",
						appid: "wxb962357ad4",
						scope: "snsapi_login", //应用授权作用域，网页应用目前仅填写snsapi_login即可
						redirect_uri: encodeURIComponent("http://xxxxxx/srp/cvd-admin/#/login"), //回调域名 注意的是在微信开放后台配置回调域名
						state: Math.random(), //用于保持请求和回调的状态，授权请求后原样带回给第三方
						style: "black",
			     href: 'data:text/css;base64,LmltcG93ZXJCb3h7CgkJd2lkdGg6IDI1MHB4OwoJCWhlaWdodDogMjUwcHggCgl9CgkuaW1wb3dlckJveCAudGl0bGV7CgkJZGlzcGxheTogbm9uZTsKCX0KCS5pbXBvd2VyQm94IC5xcmNvZGV7CgkJd2lkdGg6IDEwMCU7CgkJaGVpZ2h0OiAxMDAlOwoJCW1hcmdpbjogMDsKCQlib3JkZXI6IG5vbmU7Cgl9CgkuaW1wb3dlckJveCAucGFuZWxDb250ZW50ewoJCXBvc2l0aW9uOiByZWxhdGl2ZTsKCX0KCS5pbXBvd2VyQm94IC5pbmZvewoJCXBvc2l0aW9uOiBhYnNvbHV0ZTsKCQl0b3A6IDA7CgkJd2lkdGg6IDEwMCU7CgkJaGVpZ2h0OiAxMDAlOwoJCWRpc3BsYXk6IGZsZXg7CgkJYWxpZ24tY29udGVudDogY2VudGVyOwoJCWp1c3RpZnktY29udGVudDogY2VudGVyOwoJCWFsaWduLWl0ZW1zOiBjZW50ZXI7Cgl9CgkuaW1wb3dlckJveCAuc3RhdHVzIHB7CgkJZm9udC1zaXplOiAxMnB4OwoJCWNvbG9yOiAjNjY2OwoJCWxldHRlci1zcGFjaW5nOiAycHg7Cgl9CgkuaW1wb3dlckJveCAuc3RhdHVzX2Jyb3dzZXIgewoJCWRpc3BsYXk6IG5vbmU7Cgl9CgkuaW1wb3dlckJveCAuc3RhdHVzX3N1Y2MgewoJCWRpc3BsYXk6IGZsZXg7CgkJZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKCQlhbGlnbi1jb250ZW50OiBjZW50ZXI7CgkJanVzdGlmeS1jb250ZW50OiBjZW50ZXI7CgkJYWxpZ24taXRlbXM6IGNlbnRlcjsKCQlwYWRkaW5nOiAwOwoJCXRleHQtYWxpZ246IGNlbnRlcjsKCQliYWNrZ3JvdW5kOiByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuOCk7CgkJd2lkdGg6IDEwMCU7CgkJaGVpZ2h0OiAxMDAlOwoJfQ=='
					})
				});
			},
}

这种是在浏览器新标签打开的二维码页面

wxSdk() {
	if (!this.code) {
		不存在，配置相关微信登录参数（主要是授权页面地址，appID，回调地址）
		  window.location.href = `https://open.weixin.qq.com/connect/qrconnect?appid=wxb962357a&redirect_uri=${encodeURIComponent("http://xxxxxxx/srp/cvd-admin/#/login")}&response_type=code&scope=snsapi_login&state=Math.random()#wechat_redirect`
		}
},