微信扫码登录流程与操作

前行蜕变

于 2024-04-17 09:14:14 发布

阅读量871

点赞数 6

文章标签：微信

本文链接：https://blog.csdn.net/qq_51589308/article/details/137727698

版权

关于项目中使用微信扫码登录，前端需要操作的内容相对简单，但是其中的流程个人感觉还有需要好好研究一下的。

微信开放平台

微信开放平台是进行以下步骤的前提，可以说不进入这个网页进行操作是不可能实现微信扫码登录的，这个是需要进行付费的，就直接略过了。

微信公众平台

要想使用扫码登录微信公众平台中有文档说明需要查看一下：

进入页面之后扫码登录：

我在项目中是在网站进行应用的，所以选择了网站应用一栏

具体流程

官网上给出的流程为：

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

下面我将会用自己的语言将这个过程进行描述：

第一步：请求code

前端页面请求地址 https://open.weixin.qq.com，此时如果用户没有进行扫码操作，此时微信会进行一个长轮询（每隔一段时间进行一次接口调用询问是否进行操作），用户一旦点击了确认微信就会返回一个二维码页面，前端是通过iframe嵌入到对应的页面对应的位置；

第二步：返回code

微信会将code返回给后端程序员，code是用户授权的唯一标识；

第三步：请求access_token

后端使用获取的code加上appId和secret向微信发送请求，微信收到之后会判断标识是否正确，会将access_token返回给后端

第四步：获取用户信息

后端使用请求地址加上access_token再次请求后端，后端会将用户信息返回给后端

第五步：前端获取用户信息

前端向后端发送请求，后端会将已经获取到的用户信息重定向到一个页面，通过query参数将用户信息注入给前端

前端代码实现

第一步：引入代码

以vue为例，在index.html中引入如下代码

  <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>

第二步：引入实例

在页面要展示二维码的页面js中使用如下代码：

有些参数可以给默认值，有些需要后端的介入然后从后端返回的数据中进行回显

new WxLogin({
  self_redirect:true,
  id:"login_container", 
  appid: "", 
  scope: "", 
  redirect_uri: "",
  state: "",
  style: "",
  href: ""
 });

参数说明：

self_redirect: true：手机点击确认之后可以在iframe中重定向到redirect_uri的页面， false: 手机点击确认后在top window跳转到redirect_uri；

id：存放二维码的容器；