uniapp实现微信、QQ一键登录

1. 在manifest.json中找到App模块,勾选OAuth登录和微信登录(QQ登录和微信登录一样

2. 填写微信开放平台的AppID

微信:微信开放平台微信公众平台,给个人、企业和组织提供业务服务与用户管理能力的全新服务平台。icon-default.png?t=N7T8https://open.weixin.qq.com/

QQ:

腾讯开放平台 OPEN.QQ.COMicon-default.png?t=N7T8https://open.qq.com/reg

3. 填写IOS平台通用链接

uni-app官网uni-app,uniCloud,serverlessicon-default.png?t=N7T8https://uniapp.dcloud.net.cn/api/plugins/universal-links.html#%E8%83%8C%E6%99%AF%E4%BB%8B%E7%BB%8D

4. 编写代码
# HTML
<template>
	<view>
		<button type="primary" style="width: 80%;" @click="weixin">微信登录</button>
	</view>
</template>
# JS

<script>
	export default {
		data() {
			return {
			
			}
		},
		methods: {
			weixin() {
				// #ifndef H5
				//验证有无安装微信
				let isWx = plus.runtime.isApplicationExist({
					pname: 'com.tencent.mm',
					action: 'weixin://'
				});
                // 验证有无安装QQ
                // let isQQ = plus.runtime.isApplicationExist({ 
                //    pname: 'com.tencent.mobileqq', 
                //    action: 'mqq://' 
                // })
				if (!isWx) {
					console.log('请先安装微信APP');
                    uni.showModal({
						title: '请先安装微信APP',
						content: 'false',
					})
					return false;
				}
				uni.login({
					"provider": "weixin",
					"onlyAuthorize": true, // 微信登录仅请求授权认证
					success: function(event) {
						const {
							code
						} = event
						uni.showModal({
							title: '登陆获取授权成功',
							content: code,
						})
						//客户端成功获取授权临时票据(code),向业务服务器发起登录请求。
						 uni.request({
						 	url: '*****************', //仅为示例,并非真实接口地址。
						 	data: {
						 		code: event.code
						 	},
						 	success: (res) => {
						 		//获得token完成登录
						 		uni.setStorageSync('token', res.token)
						 	}
						 });
					},
					fail: function(err) {
						// 登录授权失败  
						// err.code是错误码
					}
				})
				// #endif
			},
		}
	}
</script>
5. 通过截图

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
实现微信小程序一键登录,可以使用uni-app提供的uni.login()方法获取用户的code,然后将code发送到服务器端,由服务器端再向微信服务器发起请求获取用户的openid和session_key,最后将openid和session_key返回给前端,前端可以将其存储在本地或者发送到服务器端进行登录验证。 以下是一个简单的示例代码: ```javascript // 在uni-app页面中调用uni.login()方法获取用户的code uni.login({ provider: 'weixin', success: function (res) { if (res.code) { // 将code发送到服务器端进行处理 uni.request({ url: 'http://example.com/login', method: 'POST', data: { code: res.code }, success: function (res) { // 将服务器返回的openid和session_key保存在本地或者发送到服务器端进行登录验证 uni.setStorageSync('openid', res.data.openid); uni.setStorageSync('session_key', res.data.session_key); } }); } else { console.log('登录失败!' + res.errMsg) } } }) ``` 在服务器端,可以使用微信提供的接口进行openid和session_key的获取,示例代码如下: ```php <?php $appid = 'your_appid'; $secret = 'your_secret'; $code = $_POST['code']; $url = 'https://api.weixin.qq.com/sns/jscode2session?appid=' . $appid . '&secret=' . $secret . '&js_code=' . $code . '&grant_type=authorization_code'; $result = file_get_contents($url); $data = json_decode($result, true); // 返回openid和session_key echo json_encode(array( 'openid' => $data['openid'], 'session_key' => $data['session_key'] )); ?> ``` 以上代码仅为示例,实际应用中需要根据具体业务需求进行修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值