微信网页授权获取 Code 完整教程

# 微信网页授权获取 Code 完整教程

## 前言

在开发微信公众号相关的 H5 页面时，获取用户的 OpenID 和 UnionID 是一个常见的需求。本文将详细介绍如何通过微信网页授权获取临时授权 code，以及完整的实现过程。

## 一、微信网页授权流程

### 1.1 完整流程图

```
用户扫码/点击链接
        ↓
进入 H5 页面
        ↓
点击"微信授权登录"按钮
        ↓
跳转到微信授权页面
        ↓
用户同意授权
        ↓
微信回调到 redirectUri，并带上 code 参数
        ↓
后端/前端使用 code 换取 openID 和 unionID
```

### 1.2 关键概念

| 概念 | 说明 |
|------|------|
| **AppID** | 微信公众号的唯一标识 |
| **redirectUri** | 微信授权后的回调地址 |
| **scope** | 授权作用域，决定能获取多少用户信息 |
| **code** | 临时授权凭证，有效期10分钟，只能使用一次 |
| **openID** | 用户在该公众号下的唯一标识 |
| **unionID** | 用户在同一开放平台下的唯一标识 |

## 二、scope 授权作用域

微信公众号支持两种 scope：

| scope | 说明 | 用户感知 |
|-------|------|----------|
| `snsapi_base` | 静默授权 | 自动跳转，用户无感知 |
| `snsapi_userinfo` | 弹窗授权 | 需要用户点击"同意" |

**注意：** `snsapi_login` 是微信开放平台网页应用的 scope，不适用于公众号！

## 三、核心代码实现

### 3.1 配置文件 (config.js)

```javascript
const CONFIG = {
    // 微信公众号 AppID
    appId: 'wxd47e336a3b9dab83',

    // 微信公众号原始ID
    publicNo: 'gh_a6f62bf26ae3',

    // 微信授权回调地址
    redirectUri: 'https://h5.onefind.club/',

    // 授权作用域
    scope: 'snsapi_userinfo'  // 或 snsapi_base
};
```

### 3.2 生成微信授权 URL (utils.js)

```javascript
function getWeixinAuthUrl(appId, redirectUri, scope, state) {
    const encodedRedirectUri = encodeURIComponent(redirectUri);
    return `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${encodedRedirectUri}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`;
}
```

### 3.3 触发授权 (index.html)

```javascript
function startAuth() {
    // 生成随机 state
    const state = Math.random().toString(36).substr(2);

    // 构建微信授权 URL
    const authUrl = getWeixinAuthUrl(
        CONFIG.appId,
        CONFIG.redirectUri,
        CONFIG.scope,
        state
    );

    // 跳转到微信授权页面
    window.location.href = authUrl;
}
```

### 3.4 接收 code 并显示 (index.html)

```javascript
window.onload = function() {
    // 从 URL 参数中获取 code
    const code = getUrlParam('code');

    if (code) {
        // 显示获取到的 code
        showCodeDisplay(code);
    }
};

function getUrlParam(name) {
    const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
    const r = window.location.search.substr(1).match(reg);
    if (r != null) {
        return decodeURIComponent(r[2]);
    }
    return null;
}
```

## 四、微信公众平台配置

### 4.1 配置位置

**测试号：** https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

**正式公众号：** https://mp.weixin.qq.com/

### 4.2 配置步骤

1. 登录微信公众平台
2. 进入「开发」→「接口权限」→「网页授权」
3. 点击「修改」授权回调域名

### 4.3 填写规则

| 配置项 | 填写内容 | 示例 |
|--------|----------|------|
| 微信公众平台 | 纯域名（不带协议和路径） | `h5.onefind.club` |
| config.js redirectUri | 完整 URL | `https://h5.onefind.club/` |

**重要：** 域名部分必须完全一致！

### 4.4 验证文件

下载验证文件 `MP_verify_xxx.txt`，上传到网站根目录，确保可通过：
```
https://yourdomain.com/MP_verify_xxx.txt
```
访问。

## 五、常见错误及解决方案

### 5.1 redirect_uri 参数错误 (错误码: 10003)

**原因：** 微信公众平台配置的域名与 redirectUri 的域名不一致

**解决方案：**
1. 检查微信公众平台配置的域名
2. 检查 config.js 中的 redirectUri
3. 确保域名部分完全一致

### 5.2 此公众号并没有这些 scope 的权限 (错误码: 10005)

**原因：** 使用了错误的 scope

**解决方案：**
- 将 scope 改为 `snsapi_base` 或 `snsapi_userinfo`
- 检查公众号是否已开通网页授权权限

### 5.3 请在微信中打开

**原因：** 微信网页授权必须在微信内置浏览器中进行

**解决方案：** 用微信扫描二维码打开页面

## 六、调试技巧

### 6.1 使用 vConsole

在微信中无法直接查看控制台，可以添加 vConsole 调试工具：

```html
<head>
    <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
</head>
<body>
    <script>
        if (typeof VConsole !== 'undefined') {
            window.vConsole = new VConsole();
        }
    </script>
</body>
```

### 6.2 在页面上显示 code

```javascript
function showCodeDisplay(code) {
    document.querySelector('.container').innerHTML = `
        <h1>获取到 Code</h1>
        <div class="code-box">${code}</div>
        <button onclick="copyCode('${code}')">复制 Code</button>
    `;
}
```

## 七、完整项目结构

```
meih5test/
├── index.html       # 授权入口页面
├── callback.html    # 微信授权回调页面
├── api-result.html  # 接口响应结果页面
├── config.js        # 配置文件
├── api.js          # API 接口封装
├── utils.js        # 工具函数
└── README.md       # 使用说明
```

## 八、使用 code 调用后端接口

获取到 code 后，可以调用后端接口换取 openID 和 unionID：

```javascript
async function callGetWeiXinAppOpenId(code) {
    const deviceID = localStorage.getItem('deviceID') || 'default-device-id';

    const response = await fetch('https://api.onefind.club/interface-server/api/getWeiXinAppOpenId.json', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: new URLSearchParams({
            applicationID: 'your_applicationID',
            siteID: 'your_siteID',
            publicNo: 'your_publicNo',
            deviceID: deviceID,
            js_code: code
        })
    });

    const result = await response.json();
    console.log('接口响应:', result);
}
```

## 九、注意事项

1. **code 只能使用一次**，且有效期为 10 分钟
2. **必须使用 HTTPS** 协议（微信要求）
3. **域名必须备案**（国内服务器要求）
4. **redirectUri 的域名必须与微信公众平台配置一致**
5. **微信授权必须在微信内置浏览器中进行**

## 十、参考文档

- [微信网页授权文档](https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html)
- [微信公众平台接口权限说明](https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Interface_Privilege_Description.html)

---

**作者：** why
**日期：** 2025-01-27
**版本：** 1.0
微信网页授权获取 Code 完整教程

评论区

微信网页授权获取 Code 完整教程
