PC端微信扫码登录及获取手机号全流程实现

SC开发工程师
1,380 阅读3分钟
1751510214802.png

一、整体流程概述

实现PC端微信扫码登录并获取用户手机号需要前后端协同工作，主要流程如下：

  1. ‌PC端生成二维码‌：后端生成包含微信授权URL的二维码，前端展示
  2. ‌用户扫码授权‌：用户使用微信扫描二维码并确认授权
  3. ‌获取授权码‌：微信回调到后端接口，返回授权码(code)
  4. ‌换取访问令牌‌：后端使用授权码换取access_token和openid
  5. ‌获取用户信息‌：使用access_token获取用户基本信息
  6. ‌获取手机号‌：通过特定接口获取用户手机号(需用户二次授权)
  7. ‌完成登录‌：后端验证用户信息，建立会话，返回登录凭证

二、技术实现细节

1. 准备工作

在微信开放平台(open.weixin.qq.com)完成以下配置：

  • 注册开发者账号并通过认证
  • 创建"网站应用"获取AppID和AppSecret
  • 配置授权回调域名(需备案域名)
  • 申请获取用户手机号权限(需额外审核)‌12

2. 后端实现

2.1 生成微信登录二维码

后端需要提供接口生成微信登录二维码，核心步骤：

  1. 生成随机state参数(防CSRF攻击)

  2. 构造微信授权URL：

    textCopy Code
https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect

  3. 使用qrcode库将URL转为二维码图片‌34

2.2 处理微信回调

微信授权后会回调到配置的redirect_uri，并携带code和state参数：

javaCopy Code
// 示例Java代码 - 处理回调
@GetMapping("/wechat/callback")
public String callback(@RequestParam String code, @RequestParam String state) {
    // 验证state防止CSRF
    if(!validateState(state)) {
        return "error";
    }
    
    // 使用code换取access_token
    String tokenUrl = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code="+code+"&grant_type=authorization_code";
    // 发送HTTP请求获取access_token和openid
    // ...
    
    return "redirect:/home";
}

2.3 获取用户手机号

获取手机号需要用户二次授权，后端需提供额外接口：

  1. 前端将微信返回的code(手机号专用)传给后端

  2. 后端调用微信接口获取手机号：

    textCopy Code
POST https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=ACCESS_TOKEN

    请求体包含前端传来的code‌15

3. 前端实现

3.1 展示二维码

前端使用qrcode.js等库展示后端返回的二维码：

htmlCopy Code
<div id="qrcode"></div>
<script src="qrcode.min.js"></script>
<script>
// 从后端获取微信授权URL
fetch('/api/wechat/qrcode')
  .then(res => res.json())
  .then(data => {
    new QRCode(document.getElementById('qrcode'), {
      text: data.url,
      width: 200,
      height: 200
    });
  });
</script>

3.2 处理手机号授权

用户扫码后，前端需要处理手机号授权按钮：

htmlCopy Code
<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
  获取手机号
</button>

<script>
methods: {
  getPhoneNumber(e) {
    if(e.detail.errMsg === 'getPhoneNumber:ok') {
      // 将code发送给后端
      fetch('/api/wechat/phone', {
        method: 'POST',
        body: JSON.stringify({code: e.detail.code}),
        headers: {'Content-Type': 'application/json'}
      })
      .then(res => res.json())
      .then(data => {
        console.log('手机号:', data.phone);
      });
    }
  }
}
</script>

三、安全注意事项

  1. ‌state参数‌：必须使用随机state参数并验证，防止CSRF攻击‌3
  2. ‌Token存储‌：access_token应妥善存储，避免泄露
  3. ‌敏感信息‌：手机号等敏感信息传输需加密
  4. ‌权限控制‌：严格限制获取手机号的接口调用权限‌6
  5. ‌日志记录‌：记录关键操作日志，便于审计‌7

四、常见问题解决

  1. ‌二维码不显示‌：检查微信开放平台配置的回调域名是否正确‌4
  2. ‌获取手机号失败‌：确认已通过微信审核获取手机号的权限‌2
  3. ‌跨域问题‌：确保前后端域名配置正确，必要时配置CORS
  4. ‌Token过期‌：access_token有效期为2小时，需及时刷新‌3

通过以上步骤，可以实现PC端微信扫码登录并获取用户手机号的功能。实际开发中还需根据具体业务需求调整流程和界面交互。

avatar
文章
阅读
粉丝