当前位置：首页 > news >正文

PC端实现微信扫码登录

news 2025/5/1 11:40:22

一、准备工作

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>