在很多App中，我们都能看到微信授权登录的场景，大多数人只要授权，就可以使用App中的很多功能。微信是目前最受用户欢迎的社交平台之一。相比于其他社交平台，微信授权用户可以更加方便地登录应用程序。本文将详细介绍如何在Uniapp中实现微信授权登录，并提供相应的代码和注释。
前言
在移动应用开发中，提供第三方登录是一种常见的用户认证方式。微信登录作为一种广泛使用的第三方登录方式，在许多应用中都有集成。uni-app 是一个使用 Vue.js 开发所有前端应用的框架，它支持开发者使用同一套代码同时发布到 iOS、Android、Web 以及各种小程序和快应用平台。
在这段代码中，我们将探讨如何在 uni-app 中实现微信授权登录的功能。这个功能允许用户使用他们的微信账号快速登录应用，提高了用户体验并减少了用户注册和登录的门槛。
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文件。代码如下：
<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文件中，添加授权登录的相关代码：
<script> const authorize = () => { WeixinJSBridge.invoke("getBrandWCPayRequest", { appId: "{{appid}}", timeSjtabmp: "{{time}}", nonceStr: "{{noncestr}}", package: "{{package}}", signType: "{{signtype}}", paySign: "{{paySign}}", }, (res) => { if (res.err_msg === "get_brand_wcpay_request:ok") { // 用户授权登录成功，将access token和用户的openid发送到应用程序的后端 window.parent.postMessage({ type: "success", data: { accessToken: "{{access_token}}", openid: "{{openid}}", }, }, "*"); } else { // 用户授权登录失败 window.parent.postMessage({ type: "fail", }, "*"); } }); }; </script>
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方法来获取用户的微信信息。这个方法会弹出一个窗口让用户确认是否授权应用获取他们的微信信息。
desc: 提供一个描述，告诉用户为什么需要这些权限。success: 如果用户同意授权，会调用这个回调函数，并将用户的信息作为参数传递。
- 使用微信登录: 在获取用户信息成功后，调用
uni.login方法进行微信登录。
provider: 设置为 'weixin'，表示使用微信进行登录。success: 登录成功后的回调函数，会返回一个包含用户凭证code的对象。
- 将 code 发送到服务器: 使用
uni.request方法将获取到的code发送到服务器。
url: 服务器端处理微信登录的接口地址。method: 设置为 'POST'，表示使用 POST 方法提交数据。data: 包含code的对象，将被发送到服务器。success: 当请求成功时调用的回调函数。
- 处理登录结果: 在服务器成功处理微信登录后，显示一个提示信息，并在 2 秒后重定向用户到首页。
- 解析
这段代码展示了如何在uni-app中实现微信登录的完整流程。这个过程涉及到用户授权、获取用户信息、使用微信登录以及与服务器端的交互。
- 1.用户体验: 通过提供微信登录，应用能够提供更快捷、更方便的用户登录体验，特别是对于已经安装了微信并且频繁使用微信的用户。
- 安全性: 微信登录是一种相对安全的登录方式，因为它依赖于微信的用户认证机制。应用本身不需要存储用户的用户名和密码，减少了用户信息泄露的风险。
- 用户信息获取: 通过微信登录，应用能够直接获取到用户的微信信息，这可以用来提升用户体验，例如，直接使用用户的微信头像和昵称。
- 服务器端验证: 将微信登录的 code 发送到服务器端进行验证和处理是一种常见的做法。这样可以确保登录过程的安全性，防止恶意攻击。
- 错误处理和用户提示: 在这段代码中，虽然提供了成功的提示，但是对于可能出现的错误情况并没有进行处理。在实际应用中，增加错误处理逻辑是非常重要的，以确保用户在遇到问题时能够得到明确的指导。
代码优化: 这段代码中有一些重复的部分，例如 console.log(lres.code, '查看code--------2'); 和 console.log(res, '测试是否成功？'); 主要用于调试。在实际生产环境中，应该去除不必要的调试信息，保持代码的整洁。
总的来说，这段代码提供了一个微信登录的完整实现示例，展示了如何在uni-app中集成微信登录，以及如何处理登录过程中的各个步骤。通过这种方式，开发者可以在多个平台上提供一致的用户登录体验，提高用户满意度和应用的使用率
