uniapp-微信授权登录

锅盖哒3123

已于 2023-10-30 20:30:26 修改

阅读量764

点赞数 1

文章标签：前端 javascript 开发语言

于 2023-10-26 20:46:46 首次发布

本文链接：https://blog.csdn.net/A12536365214/article/details/134064367

版权

🙂博主：锅盖哒
🙂文章核心：uniapp-微信授权登录

对于制作这个demo的时候是可以使用的，如果不能使用勿喷，如有问题评论区讨论，谢谢大家！

前言

在移动应用开发中，提供第三方登录是一种常见的用户认证方式。微信登录作为一种广泛使用的第三方登录方式，在许多应用中都有集成。uni-app 是一个使用 Vue.js 开发所有前端应用的框架，它支持开发者使用同一套代码同时发布到 iOS、Android、Web 以及各种小程序和快应用平台。

在这段代码中，我们将探讨如何在 uni-app 中实现微信授权登录的功能。这个功能允许用户使用他们的微信账号快速登录应用，提高了用户体验并减少了用户注册和登录的门槛。

完整代码以及注释、使用方法

wxlogin() {
				this.tanchu_sheng = false;
				//先获取用户的信息
				uni.getUserInfo({
					desc: '登录的数据',
					success(ures) {
						console.log(ures, '返回的用户信息');
						//这个地方的用户信息无论登录成功失败都可以拿到，只是拿到用户的信息
						//在成功的回调中去使用微信登录
						uni.login({
							provider: 'weixin', //使用微信登录
							success(lres) {
								console.log(lres, '获取到的code--------1');
								//我们要根据上面获取的code码去作为请求参数发送给后端
								let params = {
									code: lres.code
								};
								console.log(lres.code, '查看code--------2');

								// 1
								uni.request({
									url: '接口', //这里用自己的地址获取
									method: 'POST',
									data: {
										code: lres.code
									},
									success: (res) => {
										console.log(res, '测试是否成功？');
										// 提示

										uni.showToast({
											title: `登陆成功`,
											icon: 'none',
											duration: 2000,
											success: () => {
												// console.log('轻提示显示成功');
												setTimeout(function() {
													uni.reLaunch({
														url: '/pages/index/index',
													});
												}, 2000);

											},
											fail: (error) => {
												// console.error('轻提示显示失败', error);
											}
										});
									}
								});
								// 2
							}
						});
					}
				});
			},

用法

这段代码定义了一个 wxlogin 方法，该方法执行微信登录的整个流程。下面是这个方法的详细步骤和用法：

关闭弹窗: this.tanchu_sheng = false; 这行代码的作用是关闭一个弹窗（可能是一个授权提示或者其他用户交互界面）。这是为了确保在开始微信登录流程之前，页面上不会有其他干扰用户的元素。
获取用户信息: 使用 uni.getUserInfo 方法来获取用户的微信信息。这个方法会弹出一个窗口让用户确认是否授权应用获取他们的微信信息。
- desc: 提供一个描述，告诉用户为什么需要这些权限。
- success: 如果用户同意授权，会调用这个回调函数，并将用户的信息作为参数传递。
使用微信登录: 在获取用户信息成功后，调用 uni.login 方法进行微信登录。
- provider: 设置为 'weixin'，表示使用微信进行登录。
- success: 登录成功后的回调函数，会返回一个包含用户凭证 code 的对象。
将 code 发送到服务器: 使用 uni.request 方法将获取到的 code 发送到服务器。
- url: 服务器端处理微信登录的接口地址。
- method: 设置为 'POST'，表示使用 POST 方法提交数据。
- data: 包含 code 的对象，将被发送到服务器。
- success: 当请求成功时调用的回调函数。
处理登录结果: 在服务器成功处理微信登录后，显示一个提示信息，并在 2 秒后重定向用户到首页。

解析

这段代码展示了如何在 uni-app 中实现微信登录的完整流程。这个过程涉及到用户授权、获取用户信息、使用微信登录以及与服务器端的交互。

用户体验: 通过提供微信登录，应用能够提供更快捷、更方便的用户登录体验，特别是对于已经安装了微信并且频繁使用微信的用户。
安全性: 微信登录是一种相对安全的登录方式，因为它依赖于微信的用户认证机制。应用本身不需要存储用户的用户名和密码，减少了用户信息泄露的风险。
用户信息获取: 通过微信登录，应用能够直接获取到用户的微信信息，这可以用来提升用户体验，例如，直接使用用户的微信头像和昵称。
服务器端验证: 将微信登录的 code 发送到服务器端进行验证和处理是一种常见的做法。这样可以确保登录过程的安全性，防止恶意攻击。
错误处理和用户提示: 在这段代码中，虽然提供了成功的提示，但是对于可能出现的错误情况并没有进行处理。在实际应用中，增加错误处理逻辑是非常重要的，以确保用户在遇到问题时能够得到明确的指导。
代码优化: 这段代码中有一些重复的部分，例如 console.log(lres.code, '查看code--------2'); 和 console.log(res, '测试是否成功？'); 主要用于调试。在实际生产环境中，应该去除不必要的调试信息，保持代码的整洁。