【融职培训】Web前端学习 第11章 微信开发2 微信登录

一、概述

在web开发中，我们经常会让网站接入微信登录功能，这样用户免于注册账号，网站开发人员也可以更为方便地获取到用户信息。

微信登录可以分为两种情况，一种是网站的扫码登录，另一种是在微信浏览器中直接登录，本节我们就讲解如何在自己的网站上接入微信登录功能。

一、网站扫码登录置流程

开发文档

具体的开发流程官方文档已经给出了详细的说明，但是文档更关注的是严谨和全面，本节的内容更倾向于简单易懂。下面介绍一下扫码登录的开发流程。

首先我们要有一个注册并认证的微信开放平台账号（认证要300元人民币）。注册和认证成功之后，如下图所示进入【网站应用】。首次进入之后下方是空白，需要点击【创建网站应用】。然后根据提示加入自己的网站，下图为加入完成后的效果。

点击【查看】可以看到详细内容，【接口信息】需要申请，申请通过之后才可以开通。

开通之后，就可以调用开放平台的接口实现微信登录功能了。

二、调用接口实现扫码登录。

网站微信扫码登录流程

1. 网站跳转到以下链接：注意连接中的两个参数
   • appid：微信开发平台提供的appid
   • redirect_url：用户扫码登陆后跳转的地址

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

1. 在上面地址的页面，用户会看到一个二维码，用户扫码后会跳转到redirect_url指定的地址。
2. 在redirect_url对应的页面渲染之前，我们已经拿到了微信服务器发来的code参数。如果需要获取用户信息，则要利用code、appid、secret三个参数来获取access_token和用户的openid。接口如下所示：

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

1. 获取到access_token之后，在根据access_tokn和openid获取用户信息，接口如下

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

至此，我们的服务器就成功获取到了微信用户的信息，然后，如果用户是第一次登陆，可以将用户信息记录在数据库中，如果非第一次登陆，则可以通过openid获取用户在自己网站的信息。

三、微信浏览器登录

上面已经介绍了网站的扫码登录，主要针对的是PC端的用户。本节我们讲解微信内的授权登录，也就是说，如果用户使用的是微信浏览器，那么用户不用使用扫码功能，只要点击一个授权登录的按钮，就能实现微信登录了，对用户来说操作简单了很多。

在【公众号】设置中，添加自己网站的【业务域名】【JS接口安全域名】【网页授权域名】。

四、接口调用实现微信登录

在微信浏览器内登录与扫码登录的唯一区别就是第一步不同，扫码登录需要用户跳转到一个微信服务器提供的有二维码的页面以便获取code参数，而微信浏览器登录，可以直接让用户访问下面的地址，便可以获取到code参数。

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_base&state=123#wechat_redirect

这里同样需要提供appid和redirect_url两个值。其余的操作，与扫码登录获取用户信息相同。

五、总结

简化的微信扫码登录流程：

1. 用户访问网站
2. 用户跳转至微信登录链接
3. 通过链接跳转，获取用户的code参数
4. 通过code参数获取access_token和openid
5. 通过access_token和openid获取用户信息
6. 完成微信扫码登录