uniapp app 实现qq登录、微信登录

奥特曼　

于 2023-05-15 20:00:00 发布

阅读量2.4k

点赞数 2

分类专栏： uniapp 文章标签： uni-app

本文链接：https://blog.csdn.net/m0_46846526/article/details/130646788

版权

uniapp 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在uniapp中申请并集成微信和QQ登录功能，包括申请appid、配置manifest.json、前端代码实现以及登录过程中的code获取和后端交互。同时，文章提到了调试阶段的注意事项，如打包基座和处理非官方应用错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、申请

uniapp qq登录流程：开通 | uni-app官网

申请微信登录可前往微信开发平台：微信开放平台

uniapp 微信登录流程： uni-app官网

申请qq登录可前往qq互联：QQ互联官网首页

这些都可以请运维同学帮我们申请，前端最主要的还是拿到qq、微信的appid

之后就可以在 hbuilder中的manifest.json中配置 appid

二、代码

  <view class="dif-login-ways">
		<button class="bottom" type="primary" open-type="getUserInfo" withCredentials="true" lang="zh_CN" @click="wxChatLogin">微信登录</button>
		<button class="bottom" type="primary" open-type="getUserInfo" withCredentials="true" lang="zh_CN" @click="qqLogin">QQ登录</button>
	  </view>

微信登录：前端获取一个code 就好了后端的小伙伴可参考微信开放文档

// 微信登录
		wxChatLogin(){
			uni.login({ 
				"provider": "weixin",
				"onlyAuthorize": true, // 微信登录仅请求授权认证
				success: function(event){
					const {code} = event
					//客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
					console.log(code,event)
					uni.request({
					     url: 'https://www.example.com/loginByWeixin', //仅为示例，并非真实接口地址。
					     data: {
					         code: event.code
				         },
					     success: (res) => {
					         //获得token完成登录
					 		uni.setStorageSync('token',res.token)
					     }
					 });

				},
				fail: function (err) {
			        // 登录授权失败  
			        // err.code是错误码
			    }
			})
		},

qq登录

qqLogin() {
				console.log('点击qq登录');
				let parameters = {
					openid:'',
					access_token:'',
					nickName:'',
					avatarUrl:'',
				}
				uni.login({
					provider: 'qq',
					success: function(loginRes) {
						console.log(loginRes, 'loginRes');
						parameters.openid = loginRes.authResult.openid
						parameters.access_token = loginRes.authResult.access_token
						// 登录成功
						uni.getUserInfo({
							provider: 'qq',
							success: function(info) {
                            	// 获取用户信息成功, info.authResult保存用户信息
								console.log(info, 'info');
								parameters.nickName = info.userInfo.nickName
								parameters.avatarUrl = info.userInfo.avatarUrl
								qqLogin(parameters).then(data => {
		                        // 把后端想要的数据传给他就可以了      
								})
							
							}
						})
					},
					fail: function(err) {
						console.log(err, 'qq授权失败');
						// 登录授权失败  
						// err.code是错误码
					}
				});

			},

几乎可以获取全部参数及个人信息，把信息传给后端，让后端进行更新用户信息，再把token返回即可。