前端实现微信扫码登录网站 pc端(二维码嵌套页面)

2024-08-21 前端 0

前端实现微信扫码登录网站（PC端二维码嵌套页面）

微信扫码登录是一种便捷的用户认证方式，尤其在PC端应用中非常流行。本文将介绍如何在前端实现微信扫码登录，并在PC端页面中嵌入二维码。

一、前置准备

微信开放平台账号：你需要注册一个微信开放平台账号并创建一个网站应用。
获取AppID和AppSecret：在微信开放平台的应用详情页面获取你的AppID和AppSecret。
配置回调URL：在微信开放平台的应用详情页面配置授权回调域名。

二、流程概述

用户在PC端点击“微信扫码登录”按钮。
前端请求微信授权二维码接口并展示二维码。
用户使用微信扫描二维码并确认登录。
微信返回授权码（code）到回调URL。
服务器使用授权码请求微信的Access Token接口获取用户信息。

三、前端实现步骤

1. 引入必要的库

可以使用纯JavaScript实现二维码的展示，但为了方便，我们可以使用qrcode.js库来生成二维码。

在HTML文件中引入qrcode.js：

<script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js"></script>

2. 创建扫码登录按钮和二维码容器

在你的HTML中，创建一个用于触发微信扫码登录的按钮和一个用于展示二维码的容器：

<button id="wechat-login-btn">微信扫码登录</button><div id="qrcode-container" style="display:none;">  <div id="qrcode"></div></div>

3. 实现扫码登录逻辑

在JavaScript中，添加点击事件监听器来生成二维码并展示：

document.getElementById('wechat-login-btn').addEventListener('click', function() {     // 请求微信二维码接口，假设你的后端接口为 /api/wechat/qrcode     fetch('/api/wechat/qrcode')        .then(response => response.json())        .then(data => {            const qrcodeUrl = data.qrcode_url;             // 从后端获取二维码URL             // 使用 qrcode.js 生成二维码             QRCode.toCanvas(document.getElementById('qrcode'), qrcodeUrl, function (error) {                 if (error) console.error(error);                 console.log('success!');             });             // 显示二维码容器             document.getElementById('qrcode-container').style.display = 'block';         })        .catch(error => console.error('Error:', error)); });

四、后端实现二维码接口

在前端展示二维码之前，我们需要后端生成微信登录的二维码URL。这里假设你使用的是Node.js和Express。

const express = require('express');const axios = require('axios');const app = express();const appID = 'your-app-id';const redirectURI = 'your-redirect-uri'; // 配置的回调URLconst scope = 'snsapi_login';app.get('/api/wechat/qrcode', (req, res) => {  const state = 'random-state';  // 你可以生成一个随机字符串用于防止CSRF攻击  const qrcodeUrl = `https://open.weixin.qq.com/connect/qrconnect?appid=${appID}&redirect_uri=${encodeURIComponent(redirectURI)}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`;  res.json({    qrcode_url: qrcodeUrl  });});app.listen(3000, () => {  console.log('Server is running on port 3000');});

五、微信回调处理

用户扫码并确认登录后，微信会重定向到你配置的回调URL，并带上授权码（code）和状态（state）。你需要在服务器端处理这个回调，使用授权码请求Access Token，并获取用户信息。

app.get('/api/wechat/callback', async (req, res) => {  const { code, state } = req.query;   try {    const tokenResponse = await axios.get(`https://api.weixin.qq.com/sns/oauth2/access_token`, { params: { appid: appID, secret: 'your-app-secret', code: 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: access_token, openid: openid } });    const userInfo = userInfoResponse.data;     // 处理用户信息，进行登录或者注册逻辑     res.json(userInfo);   } catch (error) {     console.error('Error:', error);     res.status(500).send('Authentication failed');   } });