微信开发之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

评论

5 楼 Sarlly 2015-05-26  

辛苦了，楼主。 

4 楼 liangyao 2014-10-29  

   

3 楼 liangyao 2014-10-29  

2 楼 China2010pan 2014-10-29  

楼主写的很细心a，辛苦了

1 楼 lixin032190 2014-10-29  

学习了，