uniapp中调用QQ一键登录实现方法

最新推荐文章于 2025-03-23 20:25:42 发布

原创最新推荐文章于 2025-03-23 20:25:42 发布 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

uniapp 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了在uniapp中实现QQ一键登录的步骤，包括在manifest.json配置appid，创建登录页面等关键操作。

要在uniapp中实现QQ一键登录，主要步骤：

1、manifest.json的模块设置中，启用QQ登录，并填入appid

3、新建登录页

<template>
	<view>
	正在进行QQ第三方登录……
	</view>
</template>

<script>
	export default {
		data() {
			return {
				res: '',
			}
		},
		onLoad: function(options) {
			console.log(options);
			uni.login({
				provider: "qq",
				success: (resp) => {
					var access_token = resp.authResult.access_token;
					uni.getUserInfo({
						provider: 'qq',
						success: function(infoRes) {
							console.log(infoRes)
							var formdata = {
								nickName: infoRes.userInfo.nickname,
								test: 'test',
								unionId: infoRes.userInfo.unionid,
								openId: infoRes.userInfo.openId,

							};
							console.log(formdata);
							uni.request({
								url: 'https://*/login/appqqlogin',
								method: 'post',
								header: {
									'content-type': 'application/x-www-form-urlencoded'
								},
								data: formdata,
								success: (res) => {
									uni.navigateTo({
									         url:'/pages/touserinfo/touserinfo',
									       });
									console.log('post finish');
									console.log(res);
									this.res = res;
								},
								fail: () => {
									console.log('请求失败');
								}
							});


						}
					})
				},
				fail: (err) => {}
			});

		}
	}
</script>

<style>

</style>