PC端 微信登陆 + qq登录

目录

1. 微信登录

2. QQ登录

---

1. 微信登录

官方文档地址：网页授权 | 微信开放文档

点击微信登录触发事件后，会跳转到微信授权页面，授权成功后页面自动跳转到回调地址页面，需在微信公众平台配置地址

		//   微信登录
		wxLogin() {
			let url = 'https://open.weixin.qq.com/connect/qrconnect?appid=自己的appid&redirect_uri=http://回调地址（微信公众平台配好）&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect'
			window.location.href = url
		},

授权成功后回调页面的地址上会携带code，在回调页面上进行操作，截取code作为参数调用后台接口

		// 获取code登录
		getLogin() {
			// 判断是否登录过
			let userdata = {}
			if (localStorage.getItem('userdata')) {
				userdata = JSON.parse(localStorage.getItem('userdata'))
			}
			if (userdata.id) {
				return false
			}
			let code = this.getUrlCode().code; //是否存在code
			// 微信登录
			if (code) {
				// 拿到code 调用后台接口进行操作
			}
		},

2. QQ登录

官方文档地址：放置“QQ登录”按钮_OAuth2.0 — QQ互联WIKI

 

在这里添加脚本

<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" charset="utf-8"></script>

QQ登录事件触发调起qq登录页面，授权登录成功会自动跳到回调地址, 需要在QQ互联上配好地址

		/*qq登录按钮点击*/
		qqdl() {
			this.$nextTick(() => {
				QC.Login.showPopup({
					appId: "123456",
					redirectURI: "http:回调地址", //登录成功后会自动跳往该地址
				});
			});
		},

授权成功后回调页面的地址上会携带accessToken，在回调页面上截取后跟后台交互完成登录

	// qq登录
			let accessToken = ''
			console.log('href--accessToken', accessToken);
			if (location.href.split('access_token=')[1]) {
				accessToken = location.href.split('access_token=')[1].split('&')[0]
			}
			if (accessToken) {
				拿到accessToken后作为参数给后台接口请求登录
			}