微信开发之PC端扫描登录

    刚打算写这篇文章,发现刚刚有人已经发布了,作者很给力,我说说我自己的经验,给需要帮助的人更多的参考吧。

    在discuz的官网http://www.discuz.net/forum.php 有个很吸引的功能,微信账号登录。起初有很多人问过我怎么实现这个功能,我特意去查了微信的文档,微信官方其实是没有这个接口的。它与普通的oauth2.0授权不一样,这是跨客户端了。需要手机微信和PC浏览器相互配合才能完成,所以单纯的oauth2.0接口是做不到一键登录的。

    好在有了需求就知道该往哪方面发展了,有可以研究的技术是一件很幸福的事。

    大体流程:

    没怎么使用过iteye,不知道怎么发图片,所以我用文字大体描述一下流程吧。

    PC端生成随机参数 ---> 生成带参数的二维码(带上随机参数) ---> 启动轮询查询是否验证成功 ---> 

扫描二维码 ---> 微信服务器回调咱的验证地址 ---> 将验证结果放入数据库带上二维码中的随机参数 --- >

pc端轮询到结果,如果成功则登录  --- > 登录成功

    实现步骤:

    

    看上面的流程,估计不会的还是不会,因为讲的太笼统,但是我们要按照这个思路去实现功能。

   1、生成随机数,var uuid; 

    2、生成二维码,因为二维码就是一个url,我们要做的就是把微信的oauth2.0认证地址加密成二维码,并且回调地址填写我们的服务器验证地址。

    首先生成二维码,推荐前台生成,我使用的是jquery.qrcode.min.js,二维码的加密字符串为:

https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxxx&redirect_uri=http://服务器验证地址/" + uuid+"&response_type=code&scope=snsapi_userinfo&state=0#wechat_redirect

,建议使用网址缩短,不然生成的二维码太过密集影响使用。

   3、显示二维码的时候同时启动轮询,带上uuid去后台验证是否登录成功,怎么登录请往下看。

   4、微信扫描二维码后会调用我们指定的回调地址,并且回调地址中有UUID,上述地址跳转到我们action方法中时会有带上code参数(参考微信oauth2.0网页授权),根据code可以获取openId,也就可以判断用户是否存在了。如果用户存在,则将用户ID和UUID放入数据库表中(建议使用缓存,我使用的是mongodb),前台轮询时因为带上了uuid,后台根据UUID找到了验证后的用户ID,此时将需要的session信息初始化并且返回登录成功的标识到前台,前台接收到结果后进行跳转,到此微信登录完成。

    思考:

    为什么使用轮询,因为微信的认证已经脱离了PC客户端,故不能直接进行前后台交互。而如果不考虑兼容性问题,也可以使用websocket,原理是一样的。

    微信登录可以说是一个高大上的功能,不需要输入繁琐的密码,轻轻一扫即可登录,对既有PC端又有微信端的网站用处很大,很值得一试。

    如有不懂,请留言,我会努力解答。如果错误,欢迎指正。

 转载请保留出处,尊重原创,

http://a283037321.iteye.com/blog/2149430

相关推荐