让你彻底明白微信扫码登录原理和使用

让你彻底理解微信扫码登录

在日常生活中我们或许可能会进常使用微信扫码登录，在日常生活中这一操作看似非常简答，但是其实其中的流畅比想象中要复杂，你是否在为怎么将微信扫码登录嵌入到自己的项目中而苦恼，那么跟着我，我将会使用图和代码的形式将其中的流程讲述清楚，让你不再苦恼

注：在做微信扫码登录的时候 我默认各位读者已经拥有了appid（应用唯一标识）和scope（应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login）

要想把微信扫码登录嵌入到自己的项目中其实可以看微信开放文档，但是官方文档里面的讲述，如果你之前没了解过微信扫码登录，将会看起来非常晦涩难懂，尽管里面有图做了详细解释

微信官方文档解释：

要想将微信扫码登录嵌入进自己的项目中根据官方文档中的解释可以分为以下几步：

1，第一步：请求CODE（code是用户扫码授权成功的标识）

第三方使用网站应用授权登录前请注意已获取相应网页授权作用域（scope=snsapi_login），则可以通过在PC端打开以下链接： https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 若提示“该链接无法访问”，请检查参数是否填写错误，如redirect_uri的域名与审核时填写的授权域名不一致或scope不为snsapi_login。需要注意的是其中的链接其实就是返回的一个二维码页面

2，通过code获取access_token

通过code获取access_token

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

3，第三步：通过access_token调用接口

获取access_token后，进行接口调用，有以下前提：

1. access_token有效且未超时；
2. 微信用户已授权给第三方应用账号相应接口作用域（scope）。

当你能拿到access_token后你就可以调用微信的snsapi_userinfo接口获取用户个人信息

微信文档这些解释如果没一点基础的可能就会被绕晕就看不懂了，具体可以查看微信开放文档https://mp.weixin.qq.com/

我的解释：

其实微信文档中这段解释已经能说明大部分的问题，以上看不懂没关系，接下来是我对微信扫码登录的理解和解释，大致可以用一个图来解释微信扫码登录的整个流程

微信扫码登录流程图
​
我将详细解释每一步的流程

1，引入微信提供的授权二维码的核心插件http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js我们将这个插件引入到自己的项目中这是一个生成二维码的插件只需将其引入其中即可（在vue中的index.html中引入）

<!-- 引入微信扫码登录需要核心插件wxlogin.js -->
<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>

2，当用户点击微信扫码登录的时候 我们需要调用chageScene这个点击事件，然后在点击事件中调用reqWxLogin这个接口，还需要携带一个参数：告诉企业服务器用户授权成功后重定向到项目某个页面，这个很重要在最后一步的时候会用上，会返回WxLogin() 所需的参数

const chageScene = async () => {
  //发请求获取微信扫码二维码需要的参数
  //向后端服务器发请求，获取微信扫码登录页面参数
  //还需要携带一个参数：告诉企业服务器用户授权成功后重定向到项目某个页面
  let redirect_URL = encodeURIComponent(window.location.origin + '/wxlogin')
  let result: reqWXLoginResponseData = await reqWxLogin(redirect_URL)
  console.log(result);

  //切换场景为1
  scene.value = 1
  //生成微信扫码登录二维码页面
  //@ts-ignore
  new WxLogin({
    self_redirect: true,//true：手机点击确认登录后可以在 iframe 内跳转到 redirect_uri，
    id: "login_container",//显示二维码容器设置
    appid: result.data.appid,//应用位置标识appid
    scope: result.data.scope,//当前微信三码登录页面已经授权
    redirect_uri: result.data.redirectUri,//填写授权回调域，就是用户授权成功以后，微信服务器向公司后台推送的code地址
    state: result.data.state,  //state就是公司重定向的地址携带用户信息
    style: "black",
    href: ""
  });
}

在上述实例化方法weLogin的那些参数应该有后端提供，前端只需注入其中的参数即可，其中href参数可传可不传，参数传入没有错误时这时在id为login_container的div中会展示一张待用户扫码的二维码

注：其实这里返回的二维码是一个包含二维码的网页 之所以像是一张图片其实是因为上述引入的js插件使用iframe技术将其内嵌到我们的项目中了

3，当第2步操作无误时这时前端就和微信服务器会建立一个长轮询，每隔一段时间微信服务器会“询问” 用户是否扫码授权

这以上三步都是由前端来进行开发，虽然现在二维码出来了但是我们现在还只是完成了40%，我继续往下，

4，当用户扫码授权成功，微信服务器则会返回一个code，（code是用户扫码授权成功的标识）如下图

我们可以看到扫码成功调用的微信的服务器的接口返回了code（code是用户扫码授权成功的标识）拥有这个code后我接下来进行第五步

5，我们的企业内部后端根据appid，secret，code，就可以调用微信接口https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code 这个接口会返回access_token, （这是微信授予企业后端调用用户微信个人信息的凭证）拥有了access_token我们就可以进行第7步了，我们第5步和第6步就合并起来了

7，我们在上述步骤中拿到了access_token，这时我们的企业后端就可以根据access_token调用snsapi_userinfo（/sns/userinfo）来获取该扫码微信用户信息，我们第7步和第8步就合并起来了

9，我们到了这一步意味者用户扫码成功，需要跳转到相对应的页面，当我们企业后端拿到微信用户的信息之后，需要重定向到前端某一个页面，通过query参数将用户信息注入给前端，这时前端需要建立相对应的路由，然后在路由组件中拿对用的用户信息，如 ：token，name

我们会发现后端给我们这个链接很像我们的前端路由链接，这时前端就需要创建相对应的路由，并在路由组件中接收对应的参数

我们在前端路由表(router)中新建一个路由

{
      path: '/wxlogin',
      component: () => import('@/pages/wxlogin/index.vue')
 },

以下wxlogin路由组件我们通过$router.query拿到token和name并持久化存储到本地

<template>
  <div>

  </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import { SET_TOKEN } from '@/util/user';
//创建路由器对象
const $router = useRoute()
console.log($router.query);
SET_TOKEN(JSON.stringify($router.query))
//授权成功,需要隐藏后端返回重定向后的路由
let html: any = document.querySelector('html');
html.style.display = 'none'
</script>

<style scoped></style>

进行到这里用户微信扫码登陆算是成功了，以前看官方文档总感觉像是差点意思，经过我一下午的研究总算明白了微信扫码的整个流程并撰写了这篇博客，想把我所理解的整个流程分享给之前对微信扫码登录迷糊的开发者，如果觉得不错就给我一个一键三连吧^_