uniapp第三方微信登录获取的数据

admin 2026年02月04日 08:40 102 0

uniapp实现微信登录时，先通过uni.login获取临时code，将code发送至后端服务器，调用微信接口换取openid和session_key；若需用户信息，再调用uni.getUserInfo获取授权后的昵称、头像等敏感数据，需注意用户授权确认及数据安全处理，确保登录流程合规且获取必要用户标识。

Uniapp实现微信第三方登录：获取用户数据全流程解析

在移动应用开发领域，第三方登录已成为提升用户体验、降低注册门槛的关键功能，微信作为中国领先的社交平台，其庞大的用户基础和成熟的登录接口使其成为开发者的首选，Uniapp作为一款优秀的跨端开发框架，凭借"一套代码，多端运行"的特性，能够将同一套代码编译到小程序、H5、App等多个平台，极大提高了开发效率，本文将深入探讨如何通过Uniapp实现微信第三方登录，详细解析获取用户数据的完整流程、数据类型处理以及安全注意事项。

微信登录的核心逻辑与数据流程

微信登录的本质是通过微信授权机制获取用户的唯一标识及基本信息，实现快速、安全的用户认证,其核心流程如下：

用户触发登录：在应用界面中点击"微信登录"按钮,用户明确表示同意使用微信账号进行登录认证；
调用微信授权：通过Uniapp提供的uni.loginAPI调用微信登录接口，获取临时凭证（code），此code具有时效性,通常为5分钟；
换取openid与session_key：将code发送至开发者服务器，通过微信官方接口https://api.weixin.qq.com/sns/jscode2session换取用户的唯一标识（openid）和会话密钥（session_key）；
获取用户信息（可选）：若需要昵称、头像等敏感信息，需用户主动授权后获取加密数据,再通过session_key进行解密；
完成登录：将openid与用户信息绑定，生成应用内唯一的登录态,实现跨平台用户身份统一。

准备工作：配置微信开放平台与微信公众平台

在实现微信登录前,需完成以下关键配置：

注册微信开放平台账号

访问微信开放平台，注册并完成开发者认证（个人或企业认证），企业认证虽然流程较复杂，但功能更全面,推荐选择。

创建移动应用

在开放平台"管理中心"创建移动应用,填写以下关键信息：

应用名称：建议与实际应用名称一致
包名（Android）：如com.example.app
Bundle ID（iOS）：如com.example.app
应用签名：Android需通过微信官方签名工具生成，iOS使用证书的hash值

提交审核通过后，获取AppID（如wx1234567890）,此AppID将用于后续配置。

配置微信公众平台（针对H5端）

若涉及H5端登录，需在微信公众平台（公众号或服务号）的"设置与开发 > 基本配置"中配置JS接口安全域名，确保H5页面能正常调用微信JS-SDK，建议提前将域名添加到白名单,避免上线后出现权限问题。

Uniapp项目配置

在manifest.json中配置微信相关信息：

{
  "mp-weixin": {
    "appid": "wx1234567890" // 微信小程序AppID
  },
  "app-plus": {
    "distribute": {
      "android": {
        "appid": "wx1234567890", // 微信开放平台AppID
        "signing": {
          "password": "your_keystore_password",
          "alias": "your_key_alias",
          "keystore": "your_keystore_path"
        }
      },
      "ios": {
        "appid": "wx1234567890", // 微信开放平台AppID
        "signing": {
          "certificate": "your_certificate.p12",
          "mobileProvision": "your_provision.mobileprovision"
        }
      }
    }
  }
}

注意事项：

小程序端和App端的AppID可能不同
应用签名必须与开放平台创建应用时填写的签名完全一致
配置完成后需重新编译项目才能生效

Uniapp实现微信登录：代码步骤

触发微信登录

通过uni.login方法调用微信登录接口，获取code：

async handleWechatLogin() {
  try {
    const res = await uni.login({
      provider: 'weixin', // 指定微信登录
      scopes: 'auth_user' // 可选，指定授权范围
    });
    if (res.code) {
      console.log('微信登录code:', res.code);
      // 将code发送至后端，换取openid与session_key
      await this.exchangeCodeForToken(res.code);
    } else {
      uni.showToast({
        title: '微信登录失败: ' + res.errMsg,
        icon: 'none'
      });
    }
  } catch (err) {
    console.error('微信登录调用失败:', err);
    uni.showToast({
      title: '登录失败，请重试',
      icon: 'none'
    });
  }
}

后端换取openid与session_key

前端获取code后，需将其发送至开发者服务器，通过微信官方接口换取openid和session_key：

微信接口地址：

https://api.weixin.qq.com/sns/jscode2session

请求参数：

appid：微信开放平台AppID
secret：AppSecret（需妥善保管,切勿泄露）
js_code：前端传来的code
grant_type：固定为authorization_code

后端处理逻辑（Node.js示例）：

const axios = require('axios');
const crypto = require('crypto');
async function exchangeCodeForToken(code) {
  try {
    const response = await axios.get('https://api.weixin.qq.com/sns/jscode2session', {
      params: {
        appid: process.env.WECHAT_APPID,
        secret: process.env.WECHAT_SECRET,
        js_code: code,
        grant_type: 'authorization_code'
      }
    });
    const { openid, session_key } = response.data;
    // 查询数据库是否存在该openid
    let user = await User.findOne({ where: { wechat_openid: openid } });
    if (!user) {
      // 创建新用户
      user = await User.create({
        wechat_openid: openid,
        session_key: session_key
      });
    } else {
      // 更新session_key
      user.session_key = session_key;
      await user.save();
    }
    // 生成JWT token
    const token = generateJWTToken(user.id);
    return {
      token,
      user: {
        id: user.id,
        wechat_openid: openid
      }
    };
  } catch (error) {
    console.error('换取token失败:', error);
    throw new Error('登录失败，请重试');
  }
}

获取用户信息（昵称、头像等）

若需要获取用户昵称、头像等基本信息，需调用uni.getUserInfo,并处理用户授权：

（1）用户授权（关键步骤）

微信用户信息获取需用户主动授权，需先通过uni.authorize获取授权：

async requestUserInfoPermission() {
  try {
    // 检查是否已授权
    const setting = await uni.getSetting();
    if (setting.authSetting['scope.userInfo']) {
      // 已授权，直接获取用户信息
      await this.getUserInfo();
    } else {
      // 未授权，请求授权
      await uni.authorize({
        scope: 'scope.userInfo'
      });
      // 授权成功后获取用户信息
      await this.getUserInfo();
    }
  } catch (err) {
    console.error('用户授权失败:', err);
    // 引导用户手动授权
    this.showAuthGuide();
  }
}
showAuthGuide() {
  uni.showModal({ '授权提示',
    content: '需要获取您的微信信息以完善个人资料，是否授权？',
    success: (res) => {
      if (res.confirm) {
        // 用户点击确定，跳转至微信授权页面
        uni.openSetting({
          success: (settingRes) => {
            if (settingRes.authSetting['scope.userInfo']) {
              this.getUserInfo();
            }
          }
        });
      }
    }
  });
}

（2）获取加密用户

标签： #微信登录 #用户数据