当前位置 博文首页 > 文章内容

    扫码登录

    作者: 栏目:未分类 时间:2020-08-04 18:01:51

    本站于2023年9月4日。收到“大连君*****咨询有限公司”通知
    说我们IIS7站长博客,有一篇博文用了他们的图片。
    要求我们给他们一张图片6000元。要不然法院告我们

    为避免不必要的麻烦,IIS7站长博客,全站内容图片下架、并积极应诉
    博文内容全部不再显示,请需要相关资讯的站长朋友到必应搜索。谢谢!

    另祝:版权碰瓷诈骗团伙,早日弃暗投明。

    相关新闻:借版权之名、行诈骗之实,周某因犯诈骗罪被判处有期徒刑十一年六个月

    叹!百花齐放的时代,渐行渐远!



    扫码登录

    引言

    前阵子一直在弄登录方面的功能,给登录功能加了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