扫码登录

扫码登录

引言

前阵子一直在弄登录方面的功能，给登录功能加了Cookie/Session、用AOP做权限拦截、又给加了验证码。一直想弄个扫码的，可是没有机会，因为微信官方给出的条件是企业资质。公司这次要弄个微信扫码的功能，也很荣幸，这个功能分配给了我，目前为止，功能已经完成了的，借此总结下。

1、准备工作

在此引用官方文档给出的一段话

 

pic-1596534926172.png

 

一直以为这个AppID和AppSecret（这两个数值，后面会用到）是指公众号的，后面才知道是两回事。
就是仅仅这一步就已经拦住了很多 个人想要独立完成一个微信登录的功能了。

2、开发

跳过第一步，因为现在是帮公司弄扫码登录功能，所以我自己并不需要完成第一步的准备工作。
要完成有关微信的功能，那自然是去看微信所提供的开发文档微信登录官方文档

在这里，我比较精简的总结下文档说的微信扫码登录步骤：

1：在需要扫码登录的页面引入微信提供的js
2：通过第一步微信提供的js，创建WxLogin对象，生成登录二维码
3：扫码之后会获得微信服务器提供的code参数，携带此参数去访问第二步的WxLogin对象的redirect_uri属性所对应地址
4：通过第三步获得的code参数和之前提过的AppID和AppSecret调用微信提供的接口：
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
来获得access_token参数还有扫码者的openid
5：通过第4步获取得到的access_token、openid就可以调用获取用户信息的接口了
https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID
然后对得到的用户信息进行入库等一些一系列相关登录操作。

开发实例：

1、引入js

 

pic-1596534926173.png

 

2、创建WxLogin对象

 

pic-1596534926174.png

 

有了这两步之后，就可以看见二维码了

 

pic-1596534926175.png

 

3、携带code参数到redirect_uri回调方法

 

image-20200529125414591.png

 

4、通过code、AppID和AppSecret换取access_token

返回值（相关返回值信息可以查阅官方文档）

5、通过access_token和openid调用获取用户信息接口

 

image-20200529135920990.png

 

写在后面

到这里其实一个微信登录的功能已经做好了，微信扫码只是为了获取扫码者的信息；得到扫码者信息之后怎么处理那就是业务需求问题了。

上面有说到回调方法写的是在微信那边备案的域名，那么我所截的图都是本地代码的，这怎么操作？
答：很简单呀，修改本地的hosts文件，然127.0.0.1 对应那个域名，然后本地测试代码的端口号改为80就可以了。

为什么要在js里的WxLogin对象里对appid和备案域名打码？
答：这是公司的，不是我自己的，尊重公司的权益。（这两个东西很重要）

 

pic-1596534926176.png