微信登录不是一个简单的HTML文件就能实现的，它涉及到后端服务器、微信开放平台配置、以及前后端的交互。
（图片来源网络，侵删）
我可以为您提供一套完整的、可运行的示例代码，它包含了前端HTML、CSS以及必要的JavaScript逻辑，您只需要一个简单的后端（比如用Node.js的Express框架）来配合,就能看到整个流程。
核心原理简介
网页微信登录主要分为两种模式，我们这里实现最常用、最安全的 网页授权登录 流程：
- 用户访问你的网页：用户在浏览器中打开你的网站。
- 重定向到微信：你的网站将用户重定向到微信的授权URL。
- 用户授权：用户在微信页面上点击“同意登录”，授权你的网站获取其基本信息（如昵称、头像）。
- 微信回调：微信服务器将用户重定向回你预先配置的回调地址（
redirect_uri），并在URL中附带一个临时授权码code。 - 后端交换
access_token：你的后端服务器接收到code后，向微信服务器发送请求，用code换取access_token和openid。 - 获取用户信息：使用
access_token和openid向微信服务器请求用户信息（昵称、头像等）。 - 完成登录：你的后端根据这些信息，完成用户登录（创建或查找用户账号，生成你自己的登录态，如Session或JWT）,并返回结果给前端。
第一步：准备工作（在微信开放平台配置）
在下载和运行代码之前,你必须先完成以下配置：
- 注册账号：拥有一个微信开放平台账号。
- 创建网站应用：登录开放平台 -> 管理中心 -> 网站应用 -> 创建网站应用。
- 填写应用信息：
- 应用名称：你的网站名称。
- 应用签名：你的AppID（这个很重要）。
- 网站授权页域名：这是最关键的一步！ 你必须在这里填写你的网站域名，
http://localhost:3000（如果是本地测试）或https://yourdomain.com。微信只允许从这个域名发起登录请求。
- 获取AppID和AppSecret：创建成功后，在应用详情页可以找到你的 AppID 和 AppSecret,后端代码需要用到它们。
第二步：完整代码示例（前端 + 后端）
这里我们使用 Node.js + Express 作为后端，因为它简单易懂,能快速搭建。
（图片来源网络，侵删）
项目结构
/wechat-login-demo
|-- /public
| |-- index.html # 前端页面
|-- server.js # 后端服务器
|-- package.json # 项目配置文件初始化项目并安装依赖
# 创建项目文件夹 mkdir wechat-login-demo cd wechat-login-demo # 初始化npm项目 npm init -y # 安装Express框架和用于处理URL的querystring库 npm install express querystring
创建后端文件 server.js
// server.js
const express = require('express');
const querystring = require('querystring');
const https = require('https'); // Node.js内置的https模块
const app = express();
const port = 3000;
// !!! 请替换成你自己的微信开放平台 AppID 和 AppSecret !!!
const WECHAT_APPID = '你的AppID';
const WECHAT_APPSECRET = '你的AppSecret';
// 静态文件目录，用于存放HTML、CSS等
app.use(express.static('public'));
// 1. 构造微信授权URL并重定向
app.get('/login', (req, res) => {
// 用户访问的地址，必须是你在微信开放平台配置的域名
const redirectUri = `http://localhost:${port}/callback`;
const encodedRedirectUri = encodeURIComponent(redirectUri);
const wechatAuthUrl = `https://open.weixin.qq.com/connect/qrconnect?appid=${WECHAT_APPID}&redirect_uri=${encodedRedirectUri}&response_type=code&scope=snsapi_login&state=wechat_login#wechat_redirect`;
res.redirect(wechatAuthUrl);
});
// 2. 微信回调地址，处理code
app.get('/callback', (req, res) => {
const { code, state } = req.query;
if (!code) {
return res.status(400).send('Error: No code provided by WeChat.');
}
// 3. 使用code换取access_token
const tokenUrl = `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${WECHAT_APPID}&secret=${WECHAT_APPSECRET}&code=${code}&grant_type=authorization_code`;
https.get(tokenUrl, (tokenRes) => {
let data = '';
tokenRes.on('data', chunk => data += chunk);
tokenRes.on('end', () => {
const tokenInfo = JSON.parse(data);
if (tokenInfo.errcode) {
// 处理错误
return res.status(500).send(`WeChat API Error: ${tokenInfo.errmsg}`);
}
const { access_token, openid } = tokenInfo;
// 4. 使用access_token和openid获取用户信息
const userInfoUrl = `https://api.weixin.qq.com/sns/userinfo?access_token=${access_token}&openid=${openid}`;
https.get(userInfoUrl, (userInfoRes) => {
let userInfoData = '';
userInfoRes.on('data', chunk => userInfoData += chunk);
userInfoRes.on('end', () => {
const userInfo = JSON.parse(userInfoData);
if (userInfo.errcode) {
return res.status(500).send(`WeChat API Error: ${userInfo.errmsg}`);
}
// 5. 登录成功！这里可以创建自己的用户会话，然后重定向到网站首页
console.log('用户信息获取成功:', userInfo);
// 在实际应用中，这里应该：
// 1. 根据openid查找或创建用户数据库记录。
// 2. 生成你自己的登录态（如Session或JWT）。
// 3. 将登录态返回给前端（通常通过Cookie）。
// 为了演示，我们简单地将用户信息显示在页面上
// 实际开发中，你应该重定向到你的网站主页
res.send(`
<h1>登录成功！</h1>
<p>欢迎, ${userInfo.nickname}!</p>
<img src="${userInfo.headimgurl}" alt="用户头像" style="width:100px; border-radius:50%;">
<p>OpenID: ${openid}</p>
<a href="/">返回首页</a>
`);
});
});
});
});
});
// 首页
app.get('/', (req, res) => {
res.sendFile(__dirname + '/public/index.html');
});
app.listen(port, () => {
console.log(`Server is running at http://localhost:${port}`);
});
创建前端文件 public/index.html
<!-- public/index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">微信登录示例</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background-color: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
background-color: #ffffff;
padding: 40px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
margin-bottom: 20px;
}
.login-btn {
display: inline-block;
background-color: #07C160; /* 微信绿 */
color: white;
padding: 12px 24px;
border-radius: 4px;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s;
}
.login-btn:hover {
background-color: #06ae56;
}
</style>
</head>
<body>
<div class="container">
<h1>欢迎来到我们的网站</h1>
<p>请使用微信登录以继续</p>
<!-- 点击此链接，触发后端的 /login 路由 -->
<a href="/login" class="login-btn">
微信登录
</a>
</div>
</body>
</html>
第三步：运行和测试
- 替换AppID和AppSecret：打开
server.js文件，将你的AppID和你的AppSecret替换成你在微信开放平台申请的真实信息。 - 确保回调域名配置正确：在微信开放平台，确保网站授权页域名填写的是
http://localhost:3000。 - 启动服务器：在项目根目录（
wechat-login-demo）下，运行命令：node server.js
- 访问网站：打开浏览器，访问
http://localhost:3000。 - 测试流程：
- 点击“微信登录”按钮。
- 浏览器会跳转到微信的二维码登录页面。
- 使用手机微信扫描二维码，并点击“确认登录”。
- 登录成功后，微信会自动将你重定向回
http://localhost:3000/callback。 - 你的后端会处理
code，获取用户信息,并最终在页面上显示用户的昵称和头像。
总结与下载
您可以直接复制上面的代码，按照步骤操作即可，这已经是一个功能完整的“网页微信登录”的演示。
“下载”的含义：这里的“下载”就是您自己动手，将上述代码文件（server.js 和 public/index.html）创建在您的项目中。
重要提示：
- 安全性：
AppSecret必须严格保密，不要泄露给任何人，也不要暴露在前端代码中，上述Node.js后端的使用方式是正确的。 - 生产环境：在生产环境中，你需要更健壮的错误处理、数据库集成、会话管理（如使用
express-session或jsonwebtoken）以及HTTPS支持。 - 其他平台：如果你用的是Java (Spring Boot), Python (Django/Flask), PHP (Laravel) 等后端技术，原理是完全一样的，只是代码实现不同,前端HTML部分几乎可以完全复用。
（图片来源网络，侵删）
