扫码登录按钮需JavaScript调用第三方SDK（如微信WxLogin、支付宝alipayjsapi）或对接自建轮询/WS接口，纯HTML无法实现；必须配合HTTPS环境、正确配置appid/redirect_uri/state及后端code换token逻辑。
扫码登录按钮需要什么前端基础能力
纯 HTML 无法实现扫码登录，必须配合 JavaScript 和后端服务。按钮本身只是触发器，真正起作用的是调用第三方 SDK（比如微信、支付宝）或自建扫码系统。如果你只写一个 <button> 标签，点下去什么都不会发生。
常见错误是把扫码按钮当成普通表单提交按钮，结果点击后没反应，或者弹出空白窗口——本质是没有初始化 SDK 或没配置回调地址。
- 微信扫码需引入
https://res2.wx.qq.com/connect/qrlogin.js并调用WeixinJSBridge或官方WxLogin构造函数 - 支付宝扫码需加载
https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.min.js，再用my.getAuthCode配合后端换取用户信息 - 自建扫码流程则依赖 WebSocket 或轮询
/api/qrcode/status?uuid=xxx接口判断是否已扫码授权
怎么写一个能触发微信扫码的按钮 HTML + JS
微信官方提供标准嵌入方式，不推荐自己拼接 URL 或伪造 iframe。正确做法是用 WxLogin 初始化并绑定容器元素。
注意：必须在 HTTPS 环境下运行，HTTP 协议下 WxLogin 会静默失败，控制台可能只报 fail to init 这类模糊错误。
立即学习“前端免费学习笔记（深入）”；
- HTML 中预留一个带
id="wx_login_btn"的空容器，不要放文字或图标，SDK 会自动注入样式和二维码 -
scope参数选"snsapi_login"（获取 openid），别误用"snsapi_userinfo"（需要额外授权，扫码流程中断） -
state必须传字符串，用于防止 CSRF，后端校验时要原样比对，不能留空或用固定值如"123" - 回调地址
redirect_uri必须在公众号后台「登录功能」里提前白名单注册，且编码后传入（用encodeURIComponent）
const loginBtn = new WxLogin({
self_redirect: false,
id: "wx_login_btn",
appid: "wx1234567890abcdef",
scope: "snsapi_login",
redirect_uri: encodeURIComponent("https://yourdomain.com/auth/callback"),
state: "xyz" + Date.now()
});
按钮样式和交互细节容易被忽略
默认生成的按钮宽高由 SDK 控制，但容器父级如果设置了 overflow: hidden 或 display: flex 且没设最小尺寸，二维码可能被裁切或挤变形。
用户扫码后跳转到 redirect_uri 页面，这个页面必须能接收 code 和 state 查询参数，并立刻发起后端请求换取 access_token 和 openid。漏掉 state 校验会导致账号劫持风险。
- 按钮容器建议设
width: 200px; height: 200px;，避免 SDK 渲染异常 - 扫码超时默认 5 分钟，SDK 不会主动提示，需监听
onError回调捕获ERROR_INVALID_CODE或ERROR_TIMEOUT - 移动端 Safari 下，部分 iOS 版本对
iframe内嵌扫码页支持不稳定，可加target="_blank"弹窗 fallback - 不要在按钮上直接绑定
onclick手动调window.open()，微信限制非用户主动触发的弹窗
后端必须配合完成的三个关键动作
前端按钮只是半程，后端没接住就等于没登录。核心是用前端传来的 code 换取用户标识，不是简单存个 token 就完事。
典型遗漏点：拿到 access_token 后没调 /sns/userinfo（微信）或 /user/info（支付宝）接口拉取用户昵称头像，导致登录后显示“未知用户”。
- 微信：用
code请求https://api.weixin.qq.com/sns/oauth2/access_token，得到openid和access_token，再用后者换用户信息 - 支付宝：用
authCode调alipay.system.oauth.token接口，返回user_id和auth_token - 自建系统：前端轮询
/qrcode/status?uuid=xxx，后端查数据库该 uuid 是否绑定用户 ID，有则返回成功，无则继续等待
扫码登录的本质是用设备间临时凭证做身份传递，按钮只是入口，真正的验证逻辑全在后端。前端做得再漂亮，后端没配好 redirect_uri 或没校验 state，整个流程就卡死在第一步。
