扫码登录

扫码登录

引言

前阵子一直在弄登录方面的功能,给登录功能加了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
原文地址:https://www.cnblogs.com/xm970829/p/13434847.html