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

本文介绍了如何在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返回即可。

 三、调试

由于 申请时需要填写 签名、包名,所以 在开发模式下 从hbuilder直接编译到手机里面  进行微信登录时,拿到的code是不能使用的,所以如果需要调试:

一、打包基座 并使用填写时的报名进行打包
二、运行刚才打包好的基座到APP
三、调试即可

如果遇到  “ 该应用非官方正版应用,请到......100044 ” 可能需要去互联找一下类似开发者的功能,添加一下开发账号,由于是客户的账号扫码较麻烦 没有去添加

若无法添加,则可以直接打包APP,也是同样可以使用的,不会出现此错误

 

 

UniApp是一个基于Vue.js的跨平台应用开发框架,它可以让你构建一次代码,发布到多个平台上,包括iOS、Android和Web。如果你想要在UniApp应用中调用微信登录功能,你需要遵循以下步骤: 1. **引入微信SDK**:首先,在你的uni-app项目中安装微信开放平台提供的JS-SDK,通常通过`npm install wechat-js-sdk`命令。 2. **配置权限**:在微信开发者中心(https://open.weixin.qq.com/)注册并创建公众号,然后在“设置”->“基本信息”中找到“JS接口安全域名”,确保你的服务器域名已添加,并获取到js_ticket。 3. **引入并初始化**:在需要使用微信登录的部分,导入js-sdk并调用`wx.config()`函数,传入配置项,如签名url等,确保在HTTPS环境下运行。 ```javascript import Wechat from '@vant/wechat'; Wechat.init({ debug: false, // 开启调试模式 appId: 'your_app_id', // 小程序的AppID timestamp: '', // 需要从服务器获取当前时间戳 nonceStr: '', // 随机字符串,同样来自服务器 signature: '', // 签名,通过jsTicket生成 jsApiList: ['loginByCode'] // 需要使用的API列表,这里只包含微信登录接口 }); ``` 4. **触发登录**:当用户点击登录按钮后,调用`wx.login()`开始授权流程,获取code,然后将这个code发送给你的服务器,服务器再通过code换取access_token。 5. **处理回调结果**:在后台服务端,使用这个access_token换取用户的openid和其他信息,最后将用户信息返回到客户端做进一步操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值