网站用户登录注册方式包括用户名密码登录、验证码登录、第三方授权登录等。

常用的第三方登录有QQ、微信、微博、知乎等，一般用户常用微信扫码授权登录方式。 今天我们就来介绍一下网站连接微信登录的方法。

申请申请

网站应用中接入微信登录，是基于.0协议标准构建的微信.0授权登录系统。

在授权登录和访问.0之前，您需要在微信开放平台注册一个开发者帐号，拥有经过批准的网站申请，并获取相应的和。 申请微信登录并审核通过后，才能开始访问微信。 登录过程。

在管理中心-网站申请-创建网站申请中填写网站基本信息，填写第2步中的网站内容和运营商信息，提交微信开放平台审核。

网站申请通过审核后，将为网站申请生成一笔款项，用于后续的访问过程。

访问微信

微信开放平台的网站申请文档详细说明了如何接入微信登录进行申请。 下面我们将以实际应用的形式详细介绍如何接入微信登录。 我的网站已经接入微信登录，想看看效果。 检查员可以移动到这里。

登录微信需要获取用户的身份证号。 简而言之，分为三步：

调用开放接口获取授权。 获取并使用授权码获取用户信息并获得授权。

获取授权的过程是让微信用户使用手机等移动设备扫描网站提供的标准二维码链接，然后用户授权应用程序使用用户在微信中的个人信息。

下图是微信开放平台提供的采集时序图：

下面简单说明一下图中的步骤：

请求登录第三方应用程序

即用户从浏览器中搜索网站关键词，或者输入网站地址进入我们的网站应用程序。

请求.0授权登录

这一步我们只需要在网站的登录页面添加微信授权登录的超链接即可。 链接地址中添加微信开放平台中的网站应用以及授权成功后重定向的网站地址。

链接形式：

https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

在：

我的网站申请中的链接地址如下：

https://open.weixin.qq.com/connect/qrconnect?appid=wxb6a3d3490ab4c2cd&redirect_uri=https://zi.pongj.com/oauth/wechat/login&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect

然后在登录页面的链接地址上添加超链接：

请求用户确认

登录页面添加微信登录超链接。 用户点击微信登录按钮后，就进入了微信域。 页面上会出现网站申请的基本信息和授权二维码，要求用户扫码进行授权。

从页面中可以看到，地址栏中的地址信息包含了我们配置的地址信息，页面上的二维码在二维码下方显示了我们网站应用的名称。

此时，用户扫描二维码后，二维码会同时显示用户的授权状态：

同时，在微信客户端中，我们还看到了应用名称和logo的基本信息：

用户确认

用户在手机上“同意”授权后，网站应用中的微信登录页面就会跳转到我们在链接地址中配置的页面。

使用授权临时票（code）拉起第三方应用或重定向到第三方

用户同意授权后，微信登录页面重定向到该页面时，会在地址后添加临时代码。 我们在开发页面时，可以判断该地址是否包含判断用户是否授权的代码。

比如我的网站回调页面就会变成：

///？代码=代码&=

通过添加代码和求和即可得到

我们在页面上查看该地址中包含code参数，并且用户已经授权，那么我们就可以使用code来获取。

需要注意的是，由于是应用程序中的私有数据，所以这里获取的数据需要在服务器上调用。 不要在浏览器端调用，造成泄露。

获取用户信息

以下是我作为开发者根据微信开放平台的时序图添加的网站应用的前后端数据交互流程：

获得用户授权后，即获得代码后，接下来的网站申请步骤如上图步骤5-11所示。 前面的步骤上面已经介绍过了。 接下来，5-11 个步骤：

第5步：

在网站应用的页面中添加路径检测逻辑，检查是否包含code参数：如果包含code参数，则表示用户已同意授权； 如果不包含code参数，则表示用户拒绝或关闭了授权页面。 这时需要重定向到登录页面并提醒用户登录失败。

这是我的 Nuxt.js 项目中的验证代码块：

const { code } = this.$route.query if (!code) { this.$notify.warning('请重新登录') return this.$router.push('/login') }

第6步：

获取code参数后，需要获取授权。 您需要使用并获取它。 出于安全考虑，我们将请求发送到后端进行操作。

第7步：

通过传递给后端的代码参数获取并保存在环境变量或配置文件中。

获取到的请求地址格式如下：

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

在：

使用Node.js中的 或 get 等模块向微信开发平台发送GET请求。

步骤8：

请求发送成功后，微信开放平台会返回一个返回值，其中包含。

返回结果：

{ "access_token":"ACCESS_TOKEN", "expires_in":7200, "refresh_token":"REFRESH_TOKEN", "openid":"OPENID", "scope":"SCOPE", "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL" }

其中，是调用授权关系接口的调用证书。 由于有效期（目前为2小时）较短，超时后可以刷新。 刷新操作只需要添加并调用接口即可。 详细操作可以查看官方文档

可以看到返回的结果包含了用户的总和。 这两个字段用户对于网站应用来说是固定的，所以我们可以通过这里的和来判断微信用户是否已经在我们的网站上注册过。 如果注册了，只是生成合法值并返回前端页面； 如果用户没有在网站注册，那么我们需要先获取用户的个人信息，然后生成

第9步：

获取到后并判断用户没有在网站应用中注册，我们需要获取用户信息来保存用户的授权登录信息。

要获取用户信息，需要调用以下API接口：

https://api.weixin.qq.com/sns/userinfo?access_token=access_token&openid=openid

在：

第10步：

微信开放平台请求验证通过后，将返回用户的基本个人信息，包括昵称、头像、性别等。

返回结果：

{ "openid":"OPENID", "nickname":"NICKNAME", "sex":1, "province":"PROVINCE", "city":"CITY", "country":"COUNTRY", "headimgurl": "https://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/0", "privilege":[ "PRIVILEGE1", "PRIVILEGE2" ], "unionid": " o6_bmasdasdsad6_2sgVt7hMZOPfL" }

至此，我们已经获取了用户的个人信息。 现在我们需要将用户的信息保存在数据库中。 下次用户扫描二维码登录微信时，我们可以直接返回用户的登录信息，而无需再次登录。 个人信息是从微信平台获取的。

如果网站应用还要求用户补充其他个人信息，那么我们可以在这一步先存储用户的微信信息，然后将请求重定向到补充信息页面，提示用户补充其他信息。

由于我的网站需要使用用户的电子邮件地址和手机号码信息进行通知，因此我在回调地址中添加了补充信息页面。 想看看效果的同学可以尝试一下。

第11步：

用户的登录授权信息已经在数据库中生成，系统生成合法值并返回到前端页面。 前端页面标识用户登录成功并跳转至网站首页。

if (result.token) { await this.$store.dispatch('user/oauth', result.token) this.$notify.success('登陆成功') setTimeout(() => { this.$router.push('/') }, 3000) return } this.$notify.success('请重新登录') setTimeout(() => { this.$router.push('/login') }, 3000)