uniapp-实现微信授权登录

首先，在微信开放平台上注册一个应用程序，并获得相应的App ID和App Secret。我们需要这些信息来获取access token和用户的openid。
将微信开放平台提供的SDK下载到本地。
使用微信提供的SDK，将微信授权登录的页面嵌入到Uniapp的页面中。
在授权登录页面上添加相应的按钮，以触发授权登录的过程。
在Uniapp中编写相应的代码来获取access token和用户的openid。
根据用户的openid，与应用程序的后端进行通信，以获取用户的详细信息。
将用户的详细信息展示在应用程序中。

2：逻辑

下载并解压微信开放平台提供的SDK，将微信授权登录的文件夹放置在Uniapp的static文件夹下，重命名为wxlogin。
在授权页面的vue文件中，使用iframe标签加载wxlogin文件夹下的login.html文件。代码如下：


<template>
  <view>
    <iframe :src="url" :style="iframeStyle">iframe>
  view>
template>
<script>
export default {
  data() {
    return {
      iframeStyle: {
        width: "100%",
        height: "100%",
        border: "none",
      },
      url: "static/wxlogin/login.html",
    };
  },
};
script>

3.在login.html文件中，添加授权登录的相关代码：

4.在授权登录页面上添加相应的按钮以触发授权登录的过程。代码如下：


<template>
  <view>
    <iframe :src="url" :style="iframeStyle">iframe>
    <button @click="authorize">微信一键登录button>
  view>
template>
<script>
export default {
  data() {
    return {
      iframeStyle: {
        width: "100%",
        height: "100%",
        border: "none",
      },
      url: "static/wxlogin/login.html",
    };
  },
  methods: {
    authorize() {
      // 通过postMessage向iframe发送授权登录的指令
      const iframe = document.getElementsByTagName("iframe")[0];
      iframe.contentWindow.postMessage({
        type: "authorize",
      }, "*");
    },
  },
};
script>

5.在Uniapp的公用函数中编写获取access token和用户的openid的代码。


function getAccessToken(code) {
  const url =
    `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${config.appid}&secret=${config.secret}&code=${code}&grant_type=authorization_code`;
  return new Promise((resolve, reject) => {
    uni.request({
      url,
      success(res) {
        if (res.data.access_token) {
          resolve(res.data);
        } else {
          reject(res);
        }
      },
      fail(err) {
        reject(err);
      },
    });
  });
}
 
function getUserInfo(accessToken, openid) {
  const url =
    `https://api.weixin.qq.com/sns/userinfo?access_token=${accessToken}&openid=${openid}&lang=zh_CN`;
  return new Promise((resolve, reject) => {
    uni.request({
      url,
      success(res) {
        if (res.data.errcode) {
          reject(res);
        } else {
          resolve(res.data);
        }
      },
      fail(err) {
        reject(err);
      },
    });
  });
}

6.在授权页面的vue文件中编写获取access token和用户的openid的代码，获取用户的详细信息。

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


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 方法来获取用户的微信信息。这个方法会弹出一个窗口让用户确认是否授权应用获取他们的微信信息。
1. desc: 提供一个描述，告诉用户为什么需要这些权限。
2. success: 如果用户同意授权，会调用这个回调函数，并将用户的信息作为参数传递。
使用微信登录: 在获取用户信息成功后，调用 uni.login 方法进行微信登录。
1. provider: 设置为 'weixin'，表示使用微信进行登录。
2. success: 登录成功后的回调函数，会返回一个包含用户凭证 code 的对象。
将 code 发送到服务器: 使用 uni.request 方法将获取到的 code 发送到服务器。
1. url: 服务器端处理微信登录的接口地址。
2. method: 设置为 'POST'，表示使用 POST 方法提交数据。
3. data: 包含 code 的对象，将被发送到服务器。
4. success: 当请求成功时调用的回调函数。
处理登录结果: 在服务器成功处理微信登录后，显示一个提示信息，并在 2 秒后重定向用户到首页。
解析
这段代码展示了如何在 uni-app 中实现微信登录的完整流程。这个过程涉及到用户授权、获取用户信息、使用微信登录以及与服务器端的交互。

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

代码优化: 这段代码中有一些重复的部分，例如 console.log(lres.code, '查看code--------2'); 和 console.log(res, '测试是否成功？'); 主要用于调试。在实际生产环境中，应该去除不必要的调试信息，保持代码的整洁。

总的来说，这段代码提供了一个微信登录的完整实现示例，展示了如何在 uni-app 中集成微信登录，以及如何处理登录过程中的各个步骤。通过这种方式，开发者可以在多个平台上提供一致的用户登录体验，提高用户满意度和应用的使用率

相关阅读:
利用Github Action实现Tornadofx/JavaFx打包
 K8S-CNI
Java 第二阶段提升编程能力【IO流】
non-trivial designated initializers not supported
函数传址，但无法改变xy数据问题
 传统游戏难产育碧瞄向Web3
hyperf redis-cluster连接
 【linux驱动开发】-驱动入门之LED
SpringMVC异常处理
 【Ansys 2024 R1 】助力扩展AI支持的多物理场优势，重构用户体验
原文地址：https://blog.csdn.net/m0_72196169/article/details/134339980

uniapp-实现微信授权登录

前言

1：步骤

首先，在微信开放平台上注册一个应用程序，并获得相应的App ID和App Secret。我们需要这些信息来获取access token和用户的openid。

将微信开放平台提供的SDK下载到本地。

使用微信提供的SDK，将微信授权登录的页面嵌入到Uniapp的页面中。

在授权登录页面上添加相应的按钮，以触发授权登录的过程。

在Uniapp中编写相应的代码来获取access token和用户的openid。

根据用户的openid，与应用程序的后端进行通信，以获取用户的详细信息。

将用户的详细信息展示在应用程序中。

2：逻辑

下载并解压微信开放平台提供的SDK，将微信授权登录的文件夹放置在Uniapp的static文件夹下，重命名为wxlogin。

在授权页面的vue文件中，使用iframe标签加载wxlogin文件夹下的login.html文件。代码如下：

3.在login.html文件中，添加授权登录的相关代码：

4.在授权登录页面上添加相应的按钮以触发授权登录的过程。代码如下：

5.在Uniapp的公用函数中编写获取access token和用户的openid的代码。

6.在授权页面的vue文件中编写获取access token和用户的openid的代码，获取用户的详细信息。

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

用法

关闭弹窗: `this.tanchu_sheng = false;` 这行代码的作用是关闭一个弹窗（可能是一个授权提示或者其他用户交互界面）。这是为了确保在开始微信登录流程之前，页面上不会有其他干扰用户的元素。

获取用户信息: 使用 `uni.getUserInfo` 方法来获取用户的微信信息。这个方法会弹出一个窗口让用户确认是否授权应用获取他们的微信信息。

`desc`: 提供一个描述，告诉用户为什么需要这些权限。

`success`: 如果用户同意授权，会调用这个回调函数，并将用户的信息作为参数传递。

`provider`: 设置为 'weixin'，表示使用微信进行登录。

`success`: 登录成功后的回调函数，会返回一个包含用户凭证 `code` 的对象。

将 code 发送到服务器: 使用 `uni.request` 方法将获取到的 `code` 发送到服务器。

`url`: 服务器端处理微信登录的接口地址。

`method`: 设置为 'POST'，表示使用 POST 方法提交数据。

`data`: 包含 `code` 的对象，将被发送到服务器。

`success`: 当请求成功时调用的回调函数。

处理登录结果: 在服务器成功处理微信登录后，显示一个提示信息，并在 2 秒后重定向用户到首页。

解析

1.用户体验: 通过提供微信登录，应用能够提供更快捷、更方便的用户登录体验，特别是对于已经安装了微信并且频繁使用微信的用户。

安全性: 微信登录是一种相对安全的登录方式，因为它依赖于微信的用户认证机制。应用本身不需要存储用户的用户名和密码，减少了用户信息泄露的风险。

用户信息获取: 通过微信登录，应用能够直接获取到用户的微信信息，这可以用来提升用户体验，例如，直接使用用户的微信头像和昵称。

服务器端验证: 将微信登录的 code 发送到服务器端进行验证和处理是一种常见的做法。这样可以确保登录过程的安全性，防止恶意攻击。

错误处理和用户提示: 在这段代码中，虽然提供了成功的提示，但是对于可能出现的错误情况并没有进行处理。在实际应用中，增加错误处理逻辑是非常重要的，以确保用户在遇到问题时能够得到明确的指导。

代码优化: 这段代码中有一些重复的部分，例如 console.log(lres.code, '查看code--------2'); 和 console.log(res, '测试是否成功？'); 主要用于调试。在实际生产环境中，应该去除不必要的调试信息，保持代码的整洁。