在前面随笔《C#开发微信门户及应用(41)--基于微信开放平台的扫码登录处理》介绍了基于微信开放平台接口实现的微信扫码直接登录的过程。本篇介绍对扫码登录的一些改进和处理,以便更方便应用在实际项目中。
1、扫码登录配置处理
在我前面的随笔扫码登录处理中,介绍了账号登陆和扫码登录并存的情况,有时候我们可能想只是允许用户扫码登录即可,也就是不需要账号登陆,这种情况我们可以通过进行配置实现处理。
例如我在一个基于微信的系统应用里面,通过配置实现了仅仅允许扫码登录的效果。
也就是我们可以根据配置,因此其他登录界面,仅仅显示微信的扫码登录生成的二维码效果,如下所示。
![](http://upload-images.jianshu.io/upload_images/2551534-8782e66087b31242.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
在实现的代码里面,我们主要就是使用JS对界面显示进行控制即可。
一般情况下,我们在开发初期,可以允许账号密码登陆及扫码登录,一旦配置好相关的账号信息,就只需要扫码登录,屏蔽账号密码登陆了。
![](http://upload-images.jianshu.io/upload_images/2551534-ab93a64ec30e59c5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
其中我们需要处理的HTML代码层就是增加一个openLoginDiv用来显示扫码登录的二维码即可。
![](http://upload-images.jianshu.io/upload_images/2551534-3b0237c1dcb2d97a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
其中的JS代码处理如下所示,直接从后台读取相关的信息,在JS上构建二维码。
![](http://upload-images.jianshu.io/upload_images/2551534-386831ef042149c2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
2、用户扫码绑定及取消
在用户能够使用扫码登录前,我们在后台是需要先记录用户的微信标识的,也就是需要在系统上设置一个功能,让用户使用微信扫一下绑定,同时也应该设置一个功能让其解绑,方便对失效的用户进行处理。
在用户列表的二维码连接上,单击可以对用户进行微信扫码绑定,这样用户可以在扫码登录处直接扫码登录,不需要输入账号密码。
![](http://upload-images.jianshu.io/upload_images/2551534-76f49f392a415015.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
一旦成功绑定用户微信,在微信端会定位到一个绑定成功的页面,如下所示。
![](http://upload-images.jianshu.io/upload_images/2551534-c5189d5a66a98700.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
如果用户已经绑定了其中的一个用户而再去扫码绑定其他用户,那么会提示用户避免无法重复绑定账号即可。
![](http://upload-images.jianshu.io/upload_images/2551534-9e0d7d140f8fc347.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
另外,如果用户已经进行了二维码绑定,则可以在管理界面进行取消绑定,这样可以解绑用户账号和微信之间的关联。
![](http://upload-images.jianshu.io/upload_images/2551534-42e9ca5c08a865e8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
绑定和取消绑定微信扫码操作的JS代码就是通过JQuery实现接口调用接口。
![](http://upload-images.jianshu.io/upload_images/2551534-888de08c2f8c875b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
取消绑定微信扫码的界面的处理代码很简单,只需要在后台清楚对应的用户记录的openid和unionid即可。
具体的MVC控制器或者API代码如下所示。
![](http://upload-images.jianshu.io/upload_images/2551534-b6f185a49cada3a0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
而在底层BLL的代码里面,我们只需要做的就是更新指定的两个字段即可,把它们清空的代码如下所示。
![](http://upload-images.jianshu.io/upload_images/2551534-63aafda96fab8b8e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)