如何实现微信扫码登录功能（Vue）

最新推荐文章于 2024-04-27 13:42:34 发布
最新推荐文章于 2024-04-27 13:42:34 发布
阅读量1.9w 收藏 166
点赞数 20
分类专栏： Vue 文章标签： vue nodejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43737917/article/details/106002566
版权

1、账户申请

1.1 打开微信开放平台： https://open.weixin.qq.com/ 首先进行账号的注册
在这里插入图片描述
1.2 开发者资质认证
在这里插入图片描述
1.3 创建网站应用
在这里插入图片描述
填写应用的相关信息

应用通过审核后，会得到AppID和 AppSecret,后边进行编码中会使用。
在这里插入图片描述

2、登录流程（Vue.js）

  1. 第三方发起微信授权登录请求，微信用户允许授权第三方应用后，微信会拉起应用或重定向到第三方网站，并且带上授权临时票据code参数；
  2. 通过code参数加上AppID和AppSecret等，通过API换取access_token；
  3. 通过access_token进行接口调用，获取用户基本数据资源或帮助用户实现基本操作。

获取access_token时序图：
在这里插入图片描述

步骤：

说明： domain: 指的是域名或者IP地址

1、添加一个div, 用于显示微信登陆二维码

<div id="weixin"></div>

2、添加mounted，引入微信登录二维码 JS

mounted() {
    var obj = new WxLogin({
      id: "weixin",
      appid: "wx3bdb1192c22883f3",
      scope: "snsapi_login",
      // 扫码成功后 跳转的地址
      redirect_uri: "http://domain/weixinlogin"
    });
  },
  head: {
    script: [
      { src: "http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js" }
    ]
  }

  • appid: 应用唯一标识

  • scope：应用授权作用于

  • redirect_uri：回调地址，是微信登陆成功后要跳转到的页面

3、显示二维码

扫描二维码登录后，点击确认登录按钮后，浏览器会自动跳到：

http://domain/weixinlogin?code=02147Yff12Yhgz0ArCef1qabgf147Yf0&state=undefined

这个code是微信发给用户的临时令牌。我们可以根据code再次请求微信第三方登陆接口得到access_token（正式令牌）

3、获取access_token

3.1、API 介绍

通过code获取access_token

1、接口说明

  • HTTP请求方式： GET
  • URL：https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

2、参数说明

参数是否必须说明
appid是应用唯一标识，在微信开放平台提交应用审核通过后获得
secret是应用密钥AppSecret，在微信开放平台提交应用审核通过后获得
code是填写第一步获取的code参数
grant_type是填authorization_code

3、返回说明

{
    "access_token":"ACCESS_TOKEN",
    "expires_in":7200,
    "refresh_token":"REFRESH_TOKEN",
    "openid":"OPENID",
    "scope":"SCOPE"
}
参数说明
access_token接口调用凭证
expires_inaccess_token接口调用凭证超时时间，单位（秒）
refresh_token用户刷新access_token
openid授权用户唯一标识
scope用户授权的作用域，使用逗号（,）分隔

3.2、用Node.js创建服务

也可以用Java，Python 等其他语言

  1. 新建文件 server.js

    var http = require('http');  
var https = require('https');  
var url = require('url');
http.createServer(function(request,response){   
    var params=url.parse(request.url, true).query;
    // 通过审核后，得到的appid, AppSecret
    var appid='************';
    var secret='*******************';
    if(params.operation==='token'){
        https.get(
        `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${appid}&secret=${secret}&code=${params.code}&grant_type=authorization_code`, 
        function (res) {
            res.on('data', function (chunk) {  
              response.writeHead(200,{'Content-Type':'application/json;charset=utf-8' ,"Access-Control-Allow-Origin": "*" });        
              response.end(chunk);
            });
        })
    }   
}).listen(8888);
// 终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/');

  2. 在控制台输入 node server 运行服务

  3. 访问地址

    http://localhost:8888/?code=02147Yff12Yhgz0ArCef1qabgf147Yf0&operation=token

  4. 得到结果

    {
  "access_token": "10_zSHADX2JGMivKFfa4nMbZV3ECzY21UY3qrF5ADyjpr_iiLUifo-nlN0GaRnUEN9T7BagiwSC07awplRFIO1Ghw",
  "expires_in": 7200,
  "refresh_token": "10__zl8gcJz0RXVDKtksbNTQJZ2uK1HiLJZ3I5PcSkA2VB3b6WXi2CR3R_htW6B8kKOmj-91p08SJMfVKkL84vP1w",
  "openid": "oypcC1u9r-mxVsRGSLFqE65lysVI",
  "scope": "snsapi_login",
  "unionid": "o6JuL1gaIwnVsZC5BpRYImTHKTm8"
}

    3.3 前端页面调用node服务

    1、通过 axios 调用node服务，新建文件：@/api/weixin.js

    这里是因为接口统一管理，单独存放在api文件下

    import axios from 'axios'
export function getAccessToken(code) {
 return axios.get(`http://localhost:8888?operation=token&code=${code}`)
}

    2、添加工具 utils/param.js （用于获取浏览器地址栏参数code）

    export function getUrlParam(name) {
　　var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
　　var r = window.location.search.substr(1).match(reg);
　　if(r != null) return unescape(r[2]);
　　return null;
}

    3、创建weixinLogin.vue

    <template>
    <div></div>
</template>
<script>
import { getUrlParam } from '@/utils/param'
import { getAccessToken } from '@/api/weixin'
    
export default {
    mounted(){
      let code=getUrlParam('code')
      if(code!==null){//如果是微信登陆
        //根据code获取access_token
        getAccessToken(code).then( res=>{
          let access_token= res.data.access_token
          let openid= res.data.openid
          console.log('access_token:'+access_token+ 'openid:'+openid)
        })
      }
    }
}
</script>

    4、获取用户头像和昵称

    4.1、API

    1、接口说明

    • HTTP请求方式： GET
    • URL：https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID

    2、参数说明

    参数是否必须说明
    access_token是调用凭证
    openid是普通用户的标识，对当前开发者帐号唯一
    lang否国家地区语言版本，zh_CN 简体，zh_TW 繁体，en 英语，默认为zh-CN

    3、返回说明

    {
    "openid":"OPENID",
    "nickname":"NICKNAME",
    "sex":1,
    "province":"PROVINCE",
    "city":"CITY",
    "country":"COUNTRY",
    "headimgurl": "http://wx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/0",
    "privilege":[
        "PRIVILEGE1",
        "PRIVILEGE2"
    ],
    "unionid": " o6_bmasdasdsad6_2sgVt7hMZOPfL"
}
    参数说明
    openid普通用户的标识，对当前开发者帐号唯一
    nickname普通用户昵称
    sex普通用户性别，1为男性，2为女性
    province普通用户个人资料填写的省份
    city普通用户个人资料填写的城市
    country国家，如中国为CN
    headimgurl用户头像，最后一个数值代表正方形头像大小（有0、46、64、96、132数值可选，0代表640*640正方形头像），用户没有头像时该项为空
    privilege用户特权信息，json数组，如微信沃卡用户为（chinaunicom）
    unionid用户统一标识。针对一个微信开放平台帐号下的应用，同一用户的unionid是唯一的。

    4.2、添加 node 服务

    新增代码

    if(params.operation==='userinfo'){
        https.get(`https://api.weixin.qq.com/sns/userinfo?access_token=${params.access_token}&openid=${params.openid}`, function (res) {
            res.on('data', function (chunk) {  
              // 发送响应数据 "Hello World"
              response.writeHead(200,{'Content-Type':'application/json;charset=utf-8' ,"Access-Control-Allow-Origin": "*" });        
              response.end(chunk);
            });
        })
    }

    完整

    var http = require('http');
var https = require('https');
var url = require('url');
http.createServer(function (request, response) {
    var params = url.parse(request.url, true).query;
    // 通过审核后，得到的appid, AppSecret
    var appid = '************';
    var secret = '*******************';
    if (params.operation === 'token') {
        https.get(`https://api.weixin.qq.com/sns/oauth2/access_token?appid=${appid}&secret=${secret}&code=${params.code}&grant_type=authorization_code`, function (res) {
            res.on('data', function (chunk) {
                response.writeHead(200, { 'Content-Type': 'application/json;charset=utf-8', "Access-Control-Allow-Origin": "*" });
                response.end(chunk);
            });
        })
    }
    if (params.operation === 'userinfo') {
        https.get(`https://api.weixin.qq.com/sns/userinfo?access_token=${params.access_token}&openid=${params.openid}`, function (res) {
            res.on('data', function (chunk) {
                // 发送响应数据 "Hello World"
                response.writeHead(200, { 'Content-Type': 'application/json;charset=utf-8', "Access-Control-Allow-Origin": "*" });
                response.end(chunk);
            });
        })
    }
}).listen(8888);
// 终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/');

    4.3、将用户信息保存到Token中

    ​ 1、安装 js-cookie

    npm install js-cookie --save

    ​ 2、新建auth.js

    import Cookies from 'js-cookie'

const TokenKey = 'User-Token'
const NameKey = 'User-Name'
const AvatarKey = 'User-Avatar'

export function setUser(token, name, avatar) {
    Cookies.set(NameKey, name)
    Cookies.set(AvatarKey, avatar)
    Cookies.set(TokenKey, token)
}

export function getUser() {
    let name = Cookies.get(NameKey)
    let avatar = Cookies.get(AvatarKey)
    let token = Cookies.get(TokenKey)
    let user = { name, avatar, token }
    return user
}

export function removeUser() {
    Cookies.remove(NameKey)
    Cookies.remove(AvatarKey)
    Cookies.remove(TokenKey)
}

    4.4、修改weixin.js

    新增方法，用于根据access_token和openid获取用户信息

    import axios from 'axios'

export function getAccessToken(code) {
 return axios.get(`http://localhost:8888?operation=token&code=${code}`)
}

export function getUserinfo(access_token,openid) {
return axios.get(`http://localhost:8888?operation=userinfo&access_token=${access_token}&openid=${openid}`)
}

    在获取access_token和openid后，再次请求接口，获取昵称和头像，保存到cookie中

    <template>
    <div></div>
</template>
<script>
import { getUrlParam } from '@/utils/param'
import { getAccessToken } from '@/api/weixin'
import { setUser } from '@/utils/auth' 

export default {
    mounted(){
      let code=getUrlParam('code')
      if(code!==null){//如果是微信登陆
        //根据code获取access_token
        getAccessToken(code).then( res=>{
          let access_token= res.data.access_token
          let openid= res.data.openid
          weixin.getUserinfo( access_token, openid ).then( res => {
            //提取用户昵称和头像
            let nickname= res.data.nickname
            let headimgurl= res.data.headimgurl
            // 将用户信息保存到token中
            setUser(access_token,nickname,headimgurl)
            location.href='/'  //跳转到首页
          })
        })
      }
    }
}
</script>

    这样页面就可以用getUser获取当前登录用户的用户名，头像

wBekvam
关注
  • 20
    点赞
  • 踩
  • 166
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
Vue - 实现微信扫码登录功能（项目植入微信扫码登录功能）超详细完整流程详解及详细代码及注释，附带完整功能源码、常见问题解决方案
王佳斌
11-12 7711
vue.js网站微信扫码功能，vue PC端实现微信扫码登录功能，Vue微信Pc端扫码登录，Pc端微信扫码支付，通过前端怎样在vue中进行微信网页授权登录，vue.js项目植入微信登录，vue网页项目怎么做微信扫码登录，VUE项目中的微信扫码登录，VUE中最简单的js调用微信扫一扫功能，vue:如何设计网页的微信扫码登录功能，微信扫码功能官方文档，通过vue方式实现二维码扫码功能，vue调用微信扫码，vue H5 调用微信扫描二维码，Vue前端实现微信扫码登录，vue-wxlogin 微信授权登录组件，网站
vue 微信扫码登录(自定义样式)
10-15
主要介绍了vue 微信扫码登录(自定义样式)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
微信实现网页扫描二维码登录
12-11
微信实现网页扫描二维码登录，分三步走，第一步配置相关信息，第二步 代码编程，第三步 测试，主要是配置需要关注的点有几个，可以详细阅读我的博客，配置正确，一切都ok
vue实现微信扫码登录
最新发布
qq_36437991的博客
04-27 912
vue实现微信扫码登录组件
vue 实现微信扫码登录的方法
花生日记
06-04 5240
已登录
vue项目实现微信扫码登录
weixin_44220888的博客
07-06 3160
创建组件：在Vue项目中创建一个组件，用于展示微信扫码登录的界面和处理登录逻辑。你可以在组件中引入微信登录的JavaScript SDK，并使用Axios发送请求获取登录二维码和登录状态。具体的实现方式和需求可能会有所不同，你可以根据自己的项目需求进行调整。注册微信开放平台账号并创建应用：首先，在微信开放平台上注册一个账号，并创建一个应用，获取到应用的AppID和AppSecret。后端处理登录状态检查请求：在你的后端服务器中，创建一个路由处理来接收检查登录状态的请求，并验证用户的登录状态。
Django与Vue2搭建一个简单的微信扫码登录页面
caip12999203000的博客
11-26 623
Django与Vue2搭建一个简单的微信扫码登录页面
微信公众号扫码实现网站登录-Django+Vue版本-超详细保姆级教程
YUE
08-16 4533
本文实现逻辑与流程：使用微信提供的带参临时二维码返回前端，并在前端开启长轮询请求后端登录情况。用户扫码跳转到微信公众号，如果是新用户，则需关注，关注后微信返回公众号。
vue使用微信扫一扫功能的实现代码
11-20
第一步： 安装weixin-js-sdk 和 jquery 包 npm install weixin-js-sdk jquery 第二部： 配置wx.config （配置都是后端返回来的，菜鸟前端只需要按需传值过去就可） 代码如下 import wx from “weixin-js-sdk”;...
nodejs微信扫码支付功能实现
10-18
本片文章通过代码示例给大家详细讲述了如何用nodejs写出微信扫码支付这个功能，有兴趣的朋友可以参考下。
vue 微信授权登录解决方案
12-08
背景 vue前后端分离开发微信授权 场景 app将商品分享到微信朋友圈或者分享给微信好友，用户点击页面时进行微信授权登陆，获取用户信息。 问题：没有固定的h5应用首页。授权后重定向url带参数并且很长 本人愚钝，开发过程中，尝试过很多方法，踩坑不足以形容我的心情，可以说每一次都是一次跳井的体验啊。 1.一开始是前端请求微信连接，返回code，然后code作为再去请求后台接口获取token，后面看到别人的博客说这个方法不好，最好就是直接请求后台接口，然后后台返回url做跳转，所以就采用了最传统的方法，后台返回url，前台跳转。 async ReturnGetCodeUrl() { l
springboot实现web端微信扫码登录项目（基于微信开放平台）
09-18
springboot实现web端微信扫码登录项目（基于微信开放平台）
Vue+abp微信扫码登录的实现代码示例
11-29
最近系统中要使用微信扫码登录，根据微信官方文档和网络搜索相关文献实现了。分享给需要的人，也作为自己的一个笔记。后端系统是基于ABP的，所以部分代码直接使用了abp的接口，直接拷贝代码编译不通过。 注册微信...
网页授权与APP授权，H5开发使用微信Jssdk拉起网页授权详细步骤（vue2）
yx13186308025的博客
12-11 2685
6.获取到openid和access_token就可以走到最后一步获取用户信息（公众号获取用户信息，只有微信头像，openid和昵称）这一步同样要放到后端进行，前端调用接口形式请求。登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。我这边权限签名，时间戳和随机串是后端更具微信的权限签名算法生成的，微信算法链接如下。注意点：这一步操作需要将请求微信的接口放到后端，前端进行调用，否则会出现跨域现象。根据code做判断，如果url里截取到code就代表登录过，不在拉起弹框授权。
vue3接入微信扫码授权登录流程
m0_62857167的博客
05-23 5201
vue3、微信、登录、微信扫码登录
微信扫码跳转到小程序内部,浏览器扫码跳转到App 内部,如果手机上没有安装App ,跳转到下载页
qq_34297848的博客
10-18 396
第一步:登录微信公众平台,左侧点击开发管理,点击开发设置,滑到最下边,找到扫普通链接二维码打开小程序,配置对应的二维码链接,注意要拿这个链接去生成二维码,这样微信扫码才能跳转到小程序内部,还有那个校验文件,让后台放到对应的文件夹下,之后才能提交成功.就是这个东西,然后下载页跳转 window.location.href = xssd:// , 如果要跳转到指定页面。skuid='+path_param 就是这样。
微信扫码授权登录成功后，重定向用户回到他们最初尝试访问的URL
weixin_46084533的博客
04-11 511
你的需求是在微信扫码授权登录成功后，重定向用户回到他们最初尝试访问的URL，而不是重定向到一个固定的页面。为了实现这一点，你需要在用户登录前，将他们尝试访问的页面URL保存起来，然后在登录成功后，使用这个URL进行重定向。这个解决方案确保了用户在登录后能够回到他们最初尝试访问的页面。装饰器自动处理，但如果你在其他地方手动重定向，就需要确保包括。装饰器将自动重定向到登录页面，并包括当前URL作为。这通常由Django的。修改后，如果用户未登录尝试访问。
vue 微信扫码登录
08-30
Vue微信扫码登录是一种基于Vue框架实现的登录方式。用户可以通过扫描二维码来完成登录操作。代码中的getWxLoginQrCodeUrl方法是用来请求后端接口获取微信登录二维码的URL地址，并将该地址赋值给wxCode变量。在页面上，使用iframe标签将获取到的二维码URL进行展示。同时，还可以看到一些自定义的样式。这个功能可以通过引用中的部分代码来实现。引用对Vue微信扫码登录做了详细的介绍，可以作为参考学习的资料。在实现该功能时，首先需要发送请求获取微信登录二维码的URL地址，然后将该地址通过iframe进行展示。具体的步骤可以参考引用中的描述。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue项目实现微信扫码登录流程梳理](https://blog.csdn.net/cczz66/article/details/125311010)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [vue 微信扫码登录(自定义样式)](https://download.csdn.net/download/weixin_38621104/12929503)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值