H5 网页中通过微信登录获取用户信息

1. 准备工作
注册微信开放平台账号

• 访问 微信开放平台 创建应用，获取 AppID 和 AppSecret。

配置授权域名

• 在开放平台后台设置 授权回调域（如 www.yourdomain.com），需与网页域名一致。

2.前端引导用户授权
用户点击登录按钮后，前端跳转至微信授权页面，需构造以下 URL：

// 构造授权链接
const appid = '你的AppID';
const redirect_uri = encodeURIComponent('https://www.yourdomain.com/callback'); // 回调地址
const scope = 'snsapi_userinfo'; // 授权作用域（获取用户信息需用 snsapi_userinfo）
const state = '自定义状态参数'; // 可选，用于防CSRF

const authUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`;

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

3. 后端处理回调（获取 code）
微信授权成功后，会重定向到 redirect_uri 并附带 code 和 state：

https://www.yourdomain.com/callback?code=CODE&state=STATE

后端需校验 state 参数，确保请求合法性，并提取 code。

4. 使用 code 换取 access_token
通过 code 调用微信接口，获取 access_token 和 openid：

GET https://api.weixin.qq.com/sns/oauth2/access_token?
  appid=APPID&
  secret=SECRET&
  code=CODE&
  grant_type=authorization_code

响应示例：

{
  "access_token": "ACCESS_TOKEN",
  "expires_in": 7200,
  "refresh_token": "REFRESH_TOKEN",
  "openid": "OPENID",
  "scope": "snsapi_userinfo"
}

5. 获取用户信息
使用 access_token 和 openid 调用微信接口，获取用户详细信息：

GET https://api.weixin.qq.com/sns/userinfo?
  access_token=ACCESS_TOKEN&
  openid=OPENID&
  lang=zh_CN

响应示例：

{
  "openid": "OPENID",
  "nickname": "微信用户",
  "sex": 1,
  "province": "广东",
  "city": "深圳",
  "country": "中国",
  "headimgurl": "http://thirdwx.qlogo.cn/xxx",
  "privilege": []
}

6. 安全注意事项

• 保护 AppSecret：切勿在前端暴露 AppSecret，所有敏感操作（如换取 access_token）应由后端完成。
• 校验 state 参数：防止 CSRF 攻击。
• 缓存 access_token：避免频繁请求微信接口，但需注意有效期（通常 2 小时）。

代码示例（Node.js 后端）

const axios = require('axios');

// 步骤 4：用 code 换取 access_token
async function getAccessToken(code) {
  const url = `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${appid}&secret=${appsecret}&code=${code}&grant_type=authorization_code`;
  const response = await axios.get(url);
  return response.data;
}

// 步骤 5：获取用户信息
async function getUserInfo(accessToken, openid) {
  const url = `https://api.weixin.qq.com/sns/userinfo?access_token=${accessToken}&openid=${openid}&lang=zh_CN`;
  const response = await axios.get(url);
  return response.data;
}

// 处理回调接口
app.get('/callback', async (req, res) => {
  const { code, state } = req.query;
  if (state !== '预期值') throw new Error('Invalid state');

  const { access_token, openid } = await getAccessToken(code);
  const userInfo = await getUserInfo(access_token, openid);
  
  res.json(userInfo);
});

常见问题

• 授权域名错误：确保回调域名与开放平台配置一致，且不含 http:// 或路径。
• scope 权限不足：若需获取用户详细信息，必须使用 snsapi_userinfo。
• code 一次性：每个 code 只能使用一次，且有效期 5 分钟。
• 通过以上步骤，即可在 H5 网页中安全获取微信用户信息。