uniapp如何实现企业微信扫码登录

在uniapp中如何实现企业微信的扫码登录功能？需要调用企业微信的哪些API？有没有具体的代码示例或步骤说明？另外，扫码登录成功后如何获取用户信息并保持登录状态？

2 回复

使用uniapp实现企业微信扫码登录，主要步骤：

  1. 引入企业微信JS-SDK
  2. 调用wx.agentConfig注入应用权限
  3. 使用wx.qy.login获取code
  4. 将code发送到后端，换取用户信息

注意：需要配置可信域名，并在企业微信后台设置应用权限。


在 UniApp 中实现企业微信扫码登录，主要依赖企业微信提供的 OAuth2.0 授权流程。以下是实现步骤和示例代码：

实现步骤

  1. 注册企业微信应用：在企业微信后台创建应用，获取 AgentId 和 Secret，并配置授权回调域名（如你的 H5 域名）。
  2. 生成扫码链接：构建企业微信 OAuth2.0 授权 URL，用户访问该 URL 会显示企业微信扫码页面。
  3. 处理回调：用户扫码授权后，企业微信会重定向到回调地址并携带 code 参数。
  4. 获取用户信息：使用 code 调用企业微信 API 换取用户信息（如 UserId）。

示例代码（H5 环境）

在 UniApp 的 H5 页面中，可以通过 window.location 跳转和获取参数：

// 1. 生成扫码链接并跳转
function goToWeworkAuth() {
  const corpId = '你的企业ID'; // 企业微信 CorpID
  const agentId = '你的应用AgentId';
  const redirectUri = encodeURIComponent('https://你的域名.com/auth-callback'); // 授权回调地址
  const authUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${corpId}&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_base&state=STATE&agentid=${agentId}#wechat_redirect`;
  
  window.location.href = authUrl; // 跳转到企业微信扫码页
}

// 2. 在回调页面（如 auth-callback 页面）获取 code
onLoad() {
  const urlParams = new URLSearchParams(window.location.search);
  const code = urlParams.get('code');
  
  if (code) {
    // 使用 code 换取用户信息
    this.getUserInfo(code);
  }
}

// 3. 调用后端接口或直接请求企业微信 API（注意：Secret 需在后端处理）
async getUserInfo(code) {
  // 建议将请求发送到你的后端服务器，由后端使用 Secret 换取用户信息
  const res = await uni.request({
    url: '你的后端API地址',
    method: 'POST',
    data: { code }
  });
  
  // 后端返回用户信息后，处理登录逻辑
  if (res.data.success) {
    uni.setStorageSync('userInfo', res.data.userInfo);
    uni.showToast({ title: '登录成功' });
  }
}

注意事项

  • 安全提示：Secret 必须在后端处理，避免前端暴露。
  • 跨平台适配：在 App 端可能需要使用 WebView 或插件（如 uni-app 官方企业微信插件）。
  • 回调域名：确保回调域名在企业微信应用配置中正确设置。

简要流程

用户点击登录 → 跳转企业微信扫码页 → 扫码授权 → 回调解析 code → 获取用户信息 → 完成登录。

如果需要更详细的配置或处理 App 端，建议参考企业微信官方文档或使用 UniApp 插件市场相关工具。

回到顶部