微信开发之PC端扫描登录
huqingbin0 2014-10-29
刚打算写这篇文章，发现刚刚有人已经发布了，作者很给力，我说说我自己的经验，给需要帮助的人更多的参考吧。
在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端又有微信端的网站用处很大，很值得一试。
如有不懂，请留言，我会努力解答。如果错误，欢迎指正。
转载请保留出处，尊重原创，
