每个人都需要清楚自己想要使用哪种方法。

其实还有一种场景，h5页面通过点击按钮来获取用户信息（实际上是调用微信的网页授权接口）。这种场景可以参考这个视频-------->地址

本文仅详细介绍第一种方法----------【微信开放平台】

第一种方式：【微信开放平台】

如今，使用微信的用户越来越多。 如果网站增加微信登录，可以节省大量用户注册时间，大大缩短注册流程。 会让用户感觉特别方便。 接下来讲一下如何在PC端实现微信扫码登录。

第一步：申请微信开放平台账号

网址：微信开放平台

1、我们首先要做的就是进入微信开放平台申请开放平台账号并获得资格！

（1）支持企业类型（此前仅支持企业注册）

（2）注册后，您将获得微信ID和微信密钥

ps：注册需要营业执照，1-2个工作日审批，认证费300元。

进入页面后，点击注册按钮，开始注册我们的新账户。只需按照要求一步步完成注册即可。

2.申请网站申请名称。

进入开放平台的“管理中心”=>“网站应用”，然后创建网站应用，即可创建自己的网站应用。

也就是说，当你扫描二维码时，会显示当前网站的应用程序名称。 通常会在 7 个工作日内获得批准。

审核通过后，网站申请将在列表中可见。 单击“查看”即可获取总和。

3、设置回调域名，需要域名地址。

地址功能：这个回调域名就是我们扫码后跳转到的页面。 这时候微信给我们的code就会返回到这个页面。 根据这段代码，我们可以获取微信用户的信息并开始登录。设置与详情页相同。

接下来开始在前端实现这个扫码功能。

微信登录功能官方文档

文档中提到了用户扫码的两种方式，也可以说是二维码的两种展示方式。

一是跳转到二维码扫描页面，二是嵌入二维码。 大家可以根据自己的需要来选择。

整个过程大致是这样的：

① 第三方发起微信授权登录请求。 微信用户允许第三方应用授权后，微信会启动应用或重定向到第三方网站，并携带授权临时票码参数；

②通过代码参数加sum等方式发送给后端，后端通过API进行交换；

③后端获取用户的基础数据资源或通过接口调用帮助用户实现基本操作。

下面详细描述该过程：

首先，二维码的显示方式有两种：

嵌入二维码：（以下步骤可参见微信官方文档）

1、首先在页面上进行介绍。 如果网站支持，请将前缀更改为

2、需要微信登录的地方实例化如下JS对象：

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

参数说明：

ps：这个回调地址就是我们之前在配置文件中配置的重定向地址。 是注册资质时填写的域名地址。

在页面中定义一个div来显示二维码。 该 ID 必须传递到创建 QR 码的方法中。 下面的方法接收到的ID就是容器的ID。

这样就可以显示二维码了

跳转至二维码扫描页面

只需请求微信提供的固定地址，并将参数拼接在地址后面即可。

#

参数说明：（详细见官方文档）

ps：这个回调地址就是我们之前在配置文件中配置的重定向地址。 是注册资质时填写的域名地址。

显示上面的两个二维码后，我们就可以获取到code，然后通过微信提供的API兑换给用户，

退货说明

正确返回：

{ "access_token":"ACCESS_TOKEN", //接口调用凭证 "expires_in":7200, //access_token接口调用凭证超时时间，单位（秒） "refresh_token":"REFRESH_TOKEN", //用户刷新access_token "openid":"OPENID", //授权用户唯一标识 "scope":"SCOPE", //用户授权的作用域，使用逗号（,）分隔 "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL" //当且仅当该网站应用已获得该用户的userinfo授权时，才会出现该字段。 }