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

最新推荐文章于 2024-08-16 17:32:59 发布
最新推荐文章于 2024-08-16 17:32:59 发布
阅读量140 收藏
点赞数
文章标签： 前端 chrome vue.js
原文链接：https://blog.csdn.net/weixin_43434858/article/details/133770315
版权 
            <div id="content_views" class="htmledit_views">
                <h3><a name="t0"></a>前端实现微信扫码登录网站（PC端二维码嵌套页面）</h3>

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

一、前置准备
  1. 微信开放平台账号：你需要注册一个微信开放平台账号并创建一个网站应用。
  2. 获取AppID和AppSecret：在微信开放平台的应用详情页面获取你的AppID和AppSecret。
  3. 配置回调URL：在微信开放平台的应用详情页面配置授权回调域名。
二、流程概述
  1. 用户在PC端点击“微信扫码登录”按钮。
  2. 前端请求微信授权二维码接口并展示二维码。
  3. 用户使用微信扫描二维码并确认登录。
  4. 微信返回授权码（code）到回调URL。
  5. 服务器使用授权码请求微信的Access Token接口获取用户信息。
三、前端实现步骤
1. 引入必要的库

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

在HTML文件中引入qrcode.js：


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


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

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


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <button id="wechat-login-btn">微信扫码登录
     
     </button>
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <div id="qrcode-container" style="display:none;">
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     <div id="qrcode">
     
     </div>
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </div>
3. 实现扫码登录逻辑

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


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     document.
     
     getElementById(
     
     'wechat-login-btn').
     
     addEventListener(
     
     'click', 
     
     function(
     
     ) { 
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     // 请求微信二维码接口，假设你的后端接口为 /api/wechat/qrcode 
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     fetch(
     
     '/api/wechat/qrcode')
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
             .
     
     then(
     
     response => response.
     
     json())
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
             .
     
     then(
     
     data => {
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
                
     
     const qrcodeUrl = data.
     
     qrcode_url; 
    
    
    
   
   
  7. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
                
     
     // 从后端获取二维码URL 
    
    
    
   
   
  8. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
                
     
     // 使用 qrcode.js 生成二维码 
    
    
    
   
   
  9. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
                
     
     QRCode.
     
     toCanvas(
     
     document.
     
     getElementById(
     
     'qrcode'), qrcodeUrl, 
     
     function (
     
     error) { 
    
    
    
   
   
  10. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
                    
     
     if (error) 
     
     console.
     
     error(error); 
    
    
    
   
   
  11. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
                    
     
     console.
     
     log(
     
     'success!'); 
    
    
    
   
   
  12. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
                 }); 
    
    
    
   
   
  13. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
                
     
     // 显示二维码容器 
    
    
    
   
   
  14. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
                
     
     document.
     
     getElementById(
     
     'qrcode-container').
     
     style.
     
     display = 
     
     'block'; 
    
    
    
   
   
  15. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
             })
    
    
    
   
   
  16. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
             .
     
     catch(
     
     error => 
     
     console.
     
     error(
     
     'Error:', error)); 
    
    
    
   
   
  17. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     });
四、后端实现二维码接口

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


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     const express = 
     
     require(
     
     'express');
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     const axios = 
     
     require(
     
     'axios');
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     const app = 
     
     express();
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     const appID = 
     
     'your-app-id';
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     const redirectURI = 
     
     'your-redirect-uri'; 
     
     // 配置的回调URL
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     const scope = 
     
     'snsapi_login';
    
    
    
   
   
  7. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
     
    
    
    
   
   
  8. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     app.
     
     get(
     
     '/api/wechat/qrcode', 
     
     (req, res) => {
    
    
    
   
   
  9. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     const state = 
     
     'random-state';
    
    
    
   
   
  10. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     // 你可以生成一个随机字符串用于防止CSRF攻击
    
    
    
   
   
  11. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     const qrcodeUrl = 
     
     `https://open.weixin.qq.com/connect/qrconnect?appid=${appID}&redirect_uri=${encodeURIComponent(redirectURI)}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`;
    
    
    
   
   
  12. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       res.
     
     json({
    
    
    
   
   
  13. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     qrcode_url: qrcodeUrl
    
    
    
   
   
  14. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       });
    
    
    
   
   
  15. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     });
    
    
    
   
   
  16. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
     
    
    
    
   
   
  17. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     app.
     
     listen(
     
     3000, 
     
     () => {
    
    
    
   
   
  18. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     console.
     
     log(
     
     'Server is running on port 3000');
    
    
    
   
   
  19. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     });
五、微信回调处理

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


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     app.
     
     get(
     
     '/api/wechat/callback', 
     
     async (req, res) => {
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     const { code, state } = req.
     
     query; 
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     try {
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     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' } }); 
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     const { access_token, openid } = tokenResponse.
     
     data; 
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     const userInfoResponse = 
     
     await axios.
     
     get(
     
     `https://api.weixin.qq.com/sns/userinfo`, { 
     
     params: { 
     
     access_token: access_token, 
     
     openid: openid } });
    
    
    
   
   
  7. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     const userInfo = userInfoResponse.
     
     data; 
    
    
    
   
   
  8. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     // 处理用户信息，进行登录或者注册逻辑 
    
    
    
   
   
  9. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         res.
     
     json(userInfo); 
    
    
    
   
   
  10. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       } 
     
     catch (error) { 
    
    
    
   
   
  11. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     console.
     
     error(
     
     'Error:', error); 
    
    
    
   
   
  12. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         res.
     
     status(
     
     500).
     
     send(
     
     'Authentication failed'); 
    
    
    
   
   
  13. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       } 
    
    
    
   
   
  14. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     });
六、总结

通过以上步骤，我们实现了一个简单的微信扫码登录流程。在实际应用中，你还需要处理更多的细节和安全问题，比如防止CSRF攻击、处理Token的过期和刷新等。

希望本文能帮助你理解并实现微信扫码登录。如果你有任何问题或建议，欢迎留言讨论！

暖阳浅笑-嘿
关注
PC端实现微信扫码登入功能
dawnStart的博客
02-08 8015
<div> <button onclick="wxLogin()" class="layui-btn layui-btn-normal layui-btn-fluid" style="box-shadow: 0 1px 6px #1E9FFF;border-radius: 4px;"> <img src="${path}/img/wx.png" style="width: 18px;"> 使用微信登录 </button> </div> 微信注册
微信PC端网页扫码登陆
weixin_39452804的博客
10-18 1410
<html页面> redirect_uri不可用本地地址做测试，只能用服务器地址 //二维码显示 $(document).ready(function() { var obj = new WxLogin({ self_redirect:true, id:"login_container",//div的id appid: "wx2...
场景：二维码扫码登录设计
最新发布
qq_44902553的博客
08-16 162
二维码扫码登录需要做的事情是去做登录认证，主要有两个：第一，告诉系统我是谁，可以通过账号，手机号，邮箱，用户名等唯一标识的形式；二维码本质上就是一个字符串string，可以自己拿一张二维码放到解析器中，最后会返回一个url，而这个url本质是就是字符串，关键部分就是QRcode部分的字符。6．【服务端】解析验证，绑定用户信息，返回【移动端】用于二次确认的临时token. 【Pc端】展示的二维码进入"待确认"状态。9．【服务端】校验，如果通过，就修改二维码状态，返回Pc端登录的token.
pc端实现微信扫码登录
Hero_rong的博客
11-27 447
self_redirect:false 这个属性如果默认写了true，那么成功回调的页面就一直会显示在二维码的地方，只会重定向iframe里面的内容
PC端实现微信扫码登录的技术指南
每天都要努力学习哦~~
07-21 1万+
通过按照上述步骤，你可以在PC端实现微信扫码登录功能。首先，注册并获取微信开放平台的AppID和AppSecret。然后，在HTML页面中引入微信扫码登录组件，并创建扫码登录按钮。最后，在回调URL的后端代码中处理回调并获取用户授权信息，以实现身份验证或其他相关操作。实现微信扫码登录可以提供更方便的登录体验，并为用户和网站管理员带来许多便利。希望本文对你有所帮助！
实现PC端微信扫码登录,无需关注微信公众号
weixin_65409651的博客
05-22 823
PC端微信扫码登录,无需关注微信公众号即可登录.无需开放平台,无需甚至不需要掏每年审核费用..
PC网站实现微信扫码登录功能（二）
热门推荐
qq_35771266的博客
08-19 3万+
上篇我们介绍了怎么申请账号以及最后拿到appId和appSecret,如果有不清楚的可以看一下 PC网站实现微信扫码登录功能（一） 下面我就来说一下怎样在PC端怎么实现扫码登录功能。 一、进入官方文档网站 https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html 其实官网对过程描述的已经非常细致了。并且提供了两种扫码方式。一种是跳转二维码扫描页面，另一种是内嵌式二维码。大家可以
vue项目PC端页面内嵌微信扫码登录
weixin_45654455的博客
10-19 1338
这里需要注意的是获取token是根据回调地址中的参数code然后传给后端进行获取的。这里的回调地址必须是当前项目的页面，这样才能得到code参数，而且回调地址必须是外网可以访问且要和微信配置中的回调地址一致，所以联调测试时需要部署到线上进行测试。因为一些参数是直接调接口得到的所以这个data就是接口返回的数据。二维码出来后就要获取token根据token获取用户信息了。然后传给后端接口，的到后端返回的用户信息即可。根据需求需要内嵌一个微信扫码登录获取用户信息。只需要监听路由判断路由中是否有code。
网站微信扫码登录回调不跳转问题
Mangojjx的博客
06-14 9780
最近项目需要开发新功能，微信扫码登录，先上代码： 步骤1：在页面中先引入如下JS文件（支持https）： http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js 步骤2：在需要使用微信登录的地方实例以下JS对象：（我是在点击事件触发） var obj = new WxLogin({ self_redirect:true,//是...
企业微信自建应用授权登录（内嵌式扫码登录）
yzhbyssgdbd123的博客
05-21 1万+
企业微信提供了OAuth的扫码登录授权方式，可以让企业的网站在浏览器内打开时，引导成员使用企业微信扫码登录授权，从而获取成员的身份信息，免去登录的环节。（注：此授权方式需要用户扫码，不同于“网页授权登录”；仅企业内可以使用此种授权方式，第三方服务商不支持使用。） WEB网页------设置授权回调域，这里的回调域，只是一个域名，对应自己的项目访问域名。可以使用花生壳或者ngrok，授权登录不...
微信小程序支付PHP后台源码实现，微信NATIVE扫码支付PHP后台源码实现，
昌南的博客
07-30 941
网上有不少的微信小程序支付后台源码，可惜大部分都存在毛病并且注释非常少，对新手不太友好；因此决定把我的源码分享出来，给新手做一个参考。 顺便把微信NATIVE扫码支付的源码也写进来了。 第一步。发送支付请求到微信服务器，获取预支付id，并传给前端 <?php //由此才可以正常使用db类 require_once( '../../include/db.class.php' ); //这里是微信小程序的支付参数生成页面 //引进简单的安全输入过滤 require_once '../safy_input
微信扫码登录（公众号）
青椒炒蛋的博客
03-05 2004
扫码登录后，应用或网站可以获取用户在微信上的一些基本信息，例如头像、昵称等，这些信息可以用于个性化用户体验，同时也可以鼓励用户在应用或网站上进行社交分享，增加用户粘性。通过微信扫码登录，用户可能更愿意信任与微信关联的应用或网站，从而提高用户对服务的信任感。
网站应用微信扫码登录
veerpower的博客
07-02 988
在很多企业网站中一般会提供多种登录方式，而微信扫码登录属于常见的一种，在网页端实现微信登录的方式有很多，例如“公众号方式扫码登录”、“微信开放平台扫码登录”；前者是需要关注公众号才能完成登录操作，对于有的用户来说其实并不想做关注这种操作，所以后者是一种更加纯粹的登录方式，只需要用户扫码授权即可，不需要关注任何东西。这里我们就详细讲解一下网站应用中，利用微信开放平台功能提供的微信扫码登录。
PC端扫描小程序二维码登录
weixin_40444253的博客
01-02 1434
PC端扫描小程序二维码登录
SpringBoot网站集成第三方微信扫码登录，已实测通过
qq_19007169的博客
03-26 2078
微信实现扫码登录 一：具体流程： 1、先登录你的 [微信开放平台](https://open.weixin.qq.com) 2、创建网站应用 3、设置你的AppSecret和授权回调域（==不用加http/https==） 4、开始编码实现 二：实现效果 三：注意事项： 1、先登录你的 微信开放平台 2、创建网站应用   如果没有网站应用，需要先申请一个网站应用（需要填写公司的具体信息），填写无误，一切顺利的话，然后大概1个小时左右就会通过审核。 3、设置...
vue3在微信登录时使用嵌入的方式显示二维码-微信开放平台
努力
07-14 347
官方文档有两种方法。
实现扫码登录的前端技术解析
Sun_blog
09-21 1180
通过以上步骤，我们成功地使用JavaScript实现了扫码登录功能，并且代码占比也控制在了50%以内。这种登录方式简化了用户登录的流程，提高了用户体验。在实际应用中，我们可以根据需求进行扩展和优化，例如添加错误处理、增加登录超时机制等。随着移动互联网的发展，扫码登录已经成为了一种常见的登录方式。用户只需使用手机App扫描二维码即可快速登录，避免了输入账号密码的繁琐过程。在本文中，我们将通过使用JavaScript，实现一个简单的扫码登录功能。在这个示例中，我们假设已经生成了一个名为。
网站实现微信扫码登录(利用微信开放平台实现)
qq_66313178的博客
05-11 1911
二 手机授权后带这个code码和state 请求到你的回调域接口 这个接口就可以拿接收到的code和你网站应用上的appid,appSecret 请求这个用户的唯一的openid 拿着这个openid就可以存数据库。点击允许后会带着code及你设置的state 调用回调域接口进行处理 如果是我的代码就会调用到这个接口【审核通过后，列表就会可以查看到这个网站应用，点击查看可以获取到appId 和appSecret了。第三步：用网站应用里的appId 调用微信二维码 下面是代码（控制器方法）
集成微信扫描登录，实现第三方的登录功能
qq_40834643的博客
02-06 2464
使用微信扫描登录功能，要去官网申请开发者资质，要通过申请才能获取到appid、appsecret，申请完后要设置回调链接（用于设置扫码登录确认后）。具体开发文档可参考官方开发文档网址第三方发起微信授权登录请求，微信用户允许授权第三方应用后，微信会拉起应用或重定向到第三方网站，并且带上授权临时票据code参数；通过code参数加上AppID和AppSecret等，通过API换取access_token；通过access_token进行接口调用，获取用户基本数据资源或帮助用户实现基本操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值