一、准备工作
1. 注册微信开放平台账号
首先，你需要注册一个微信开放平台账号，并创建一个网站应用。微信开放平台地址：https://open.weixin.qq.com/
2. 获取AppID和AppSecret
在创建好网站应用后，你会获得一个AppID和AppSecret，这两个值在后续的开发中非常重要。
二、前端实现
1. 创建Vue.js项目
你可以使用Vue CLI创建一个新的Vue.js项目：
npm install -g @vue/cli
vue create wechat-login
cd wechat-login
npm run serve
2. 生成微信登录二维码
在你的Vue.js项目中创建一个登录页面，使用微信提供的QR码接口生成二维码。以下是一个示例组件：
<template><div><h1>微信扫码登录</h1><img :src="qrCodeUrl" alt="微信二维码"></div>
</template><script>
export default {data() {return {appId: 'YOUR_APP_ID',redirectUri: encodeURIComponent('https://your-redirect-uri.com/callback'),state: 'random_string', // 用于防止跨站请求伪造（CSRF）qrCodeUrl: ''};},created() {this.generateQRCode();},methods: {generateQRCode() {this.qrCodeUrl = `https://open.weixin.qq.com/connect/qrconnect?appid=${this.appId}&redirect_uri=${this.redirectUri}&response_type=code&scope=snsapi_login&state=${this.state}#wechat_redirect`;}}
};
</script>
将 YOUR_APP_ID 替换为你在微信开放平台上获得的AppID，将 https://your-redirect-uri.com/callback 替换为你的回调地址，并确保它是URL编码的。
3. 处理微信回调
当用户扫描二维码并授权后，微信会重定向到你提供的回调URL，并带上授权码（code）和状态参数（state）。你需要在服务器端处理这个回调，获取用户的access token和用户信息。
三、后端实现
1. 创建Node.js服务器
你可以使用Express框架创建一个简单的Node.js服务器来处理微信的回调请求。首先，安装Express和Axios：
npm install express axios
然后创建一个 server.js 文件：
const express = require('express');
const axios = require('axios');const app = express();
const port = 3000;const appId = 'YOUR_APP_ID';
const appSecret = 'YOUR_APP_SECRET';
const redirectUri = 'https://your-redirect-uri.com/callback';app.get('/callback', async (req, res) => {const { code, state } = req.query;if (state !== 'random_string') {return res.status(400).send('Invalid state');}try {// 获取 access tokenconst tokenResponse = await axios.get(`https://api.weixin.qq.com/sns/oauth2/access_token`, {params: {appid: appId,secret: appSecret,code,grant_type: 'authorization_code'}});const { access_token, openid } = tokenResponse.data;// 获取用户信息const userInfoResponse = await axios.get(`https://api.weixin.qq.com/sns/userinfo`, {params: {access_token,openid}});const userInfo = userInfoResponse.data;res.json(userInfo);} catch (error) {res.status(500).send('Authentication failed');}
});app.listen(port, () => {console.log(`Server is running at http://localhost:${port}`);
});
将 YOUR_APP_ID 和 YOUR_APP_SECRET 替换为你在微信开放平台上获得的AppID和AppSecret。
2. 启动服务器
在项目根目录下运行以下命令启动服务器：
node server.js
四、前端处理登录结果
在微信扫码登录页面轮询服务器端的登录状态，并处理登录成功后的用户信息。以下是一个简单的示例：
<template><div><h1>微信扫码登录</h1><img :src="qrCodeUrl" alt="微信二维码"></div>
</template><script>
export default {data() {return {appId: 'YOUR_APP_ID',redirectUri: encodeURIComponent('https://your-redirect-uri.com/callback'),state: 'random_string',qrCodeUrl: ''};},created() {this.generateQRCode();this.checkLoginStatus();},methods: {generateQRCode() {this.qrCodeUrl = `https://open.weixin.qq.com/connect/qrconnect?appid=${this.appId}&redirect_uri=${this.redirectUri}&response_type=code&scope=snsapi_login&state=${this.state}#wechat_redirect`;},checkLoginStatus() {// 轮询服务器端的登录状态setInterval(async () => {try {const response = await fetch('/path_to_your_server_endpoint');if (response.ok) {const data = await response.json();// 登录成功，处理用户信息console.log(data);}} catch (error) {console.error('Error checking login status:', error);}}, 5000); // 每5秒检查一次}}
};
</script>
五、安全和防护措施
- HTTPS：确保在生产环境中使用HTTPS保护用户数据安全。
- CSRF：使用随机的
state值防止CSRF攻击。 - 验证：对回调中的
code和state参数进行验证，确保安全。
六、测试
确保微信开放平台应用的设置正确，并且回调URL可以访问。然后打开你的Vue.js页面，扫描生成的二维码进行测试。
