**
近期在项目中实现了微信扫码登录与图形校验码功能，许久未更新技术笔记，本文先聚焦微信登录的实现方案与关键注意事项。关于图形验证码，笔者采用了开源插件rc-slider-captcha，其实现原理与自定义开发方案将在后续文章单独探讨。
微信扫码登录实现方案
微信扫码登录的前端实现需围绕二维码生成、授权回调、用户信息获取三个核心环节展开。先梳理完整流程框架，再深入代码实现细节。
整体流程解析
微信扫码登录的完整链路涉及前端与微信开放平台、后端服务的多方交互，核心流程如下：
**
前端需重点关注的关键节点：
- 基于应用标识生成登录二维码
- 监听用户扫码动作与授权状态
- 处理授权成功后的重定向与信息解析
前端实现步骤
1. 微信登录 SDK 引入
微信登录依赖官方提供的wxLogin.js SDK，推荐使用动态引入方式避免全局污染。这里借助ahooks的useExternal钩子实现资源的按需加载，该方法能保证资源唯一性并支持加载状态监听：
import { useExternal } from 'ahooks';
const WeChatLogin: React.FC = () => {
// 动态引入微信登录SDK
const status = useExternal(
'http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js',
{
js: { async: true } // 异步加载提升页面性能
}
);
return <div id="wxLoginContainer" />;
};
export default WeChatLogin;
2. 二维码渲染逻辑
需在 SDK 加载完成后初始化登录组件，关键配置参数说明如下：
import { useEffect } from 'react';
// 省略组件定义...
useEffect(() => {
// 等待SDK加载完成
if (status === 'ready') {
const { origin } = window.location;
// 初始化微信登录组件
new WxLogin({
id: 'wxLoginContainer', // 二维码渲染容器ID
appid: 'wx1234567890abcdef', // 微信开放平台申请的应用ID
scope: 'snsapi_login', // 固定值，网页登录必填
redirect_uri: encodeURIComponent(
`https://api.example.com/auth/wechat?callback=${origin}/%23/login/callback`
)
});
}
}, [status]);
关键参数配置说明
- redirect_uri 处理：必须通过encodeURIComponent编码，避免特殊字符导致跳转异常。其中callback参数指定授权成功后的前端回调地址，用于接收用户信息。
- 路由模式适配：若前端使用 hash 路由（如/#/path），需将#替换为其 URL 编码%23。直接使用#会被解析为 URL 片段标识符，导致回调地址截断。
- 安全校验：生产环境需确保redirect_uri与微信开放平台配置的授权域名一致，否则会出现 "redirect_uri 参数错误" 提示。
常见问题与解决方案
- 二维码不显示：检查容器 ID 是否存在、SDK 是否加载成功，可通过console.log(status)确认加载状态。
- 回调地址无效：验证redirect_uri编码是否正确，hash 路由下务必替换#为%23。
- 跨域问题：微信 SDK 会在当前域名下渲染二维码，无需担心跨域，后端接口需配置 CORS 允许前端域名访问。
欢迎持续关注技术实现细节。
