在前面随笔《C#开发微信门户及应用(41)--基于微信开放平台的扫码登录处理》介绍了基于微信开放平台接口实现的微信扫码直接登录的过程。本篇介绍对扫码登录的一些改进和处理,以便更方便应用在实际项目中。
1、扫码登录配置处理
在我前面的随笔扫码登录处理中,介绍了账号登陆和扫码登录并存的情况,有时候我们可能想只是允许用户扫码登录即可,也就是不需要账号登陆,这种情况我们可以通过进行配置实现处理。
例如我在一个基于微信的系统应用里面,通过配置实现了仅仅允许扫码登录的效果。
也就是我们可以根据配置,因此其他登录界面,仅仅显示微信的扫码登录生成的二维码效果,如下所示。

在实现的代码里面,我们主要就是使用JS对界面显示进行控制即可。
一般情况下,我们在开发初期,可以允许账号密码登陆及扫码登录,一旦配置好相关的账号信息,就只需要扫码登录,屏蔽账号密码登陆了。

其中我们需要处理的HTML代码层就是增加一个openLoginDiv用来显示扫码登录的二维码即可。

其中的JS代码处理如下所示,直接从后台读取相关的信息,在JS上构建二维码。

2、用户扫码绑定及取消
在用户能够使用扫码登录前,我们在后台是需要先记录用户的微信标识的,也就是需要在系统上设置一个功能,让用户使用微信扫一下绑定,同时也应该设置一个功能让其解绑,方便对失效的用户进行处理。
在用户列表的二维码连接上,单击可以对用户进行微信扫码绑定,这样用户可以在扫码登录处直接扫码登录,不需要输入账号密码。

一旦成功绑定用户微信,在微信端会定位到一个绑定成功的页面,如下所示。

如果用户已经绑定了其中的一个用户而再去扫码绑定其他用户,那么会提示用户避免无法重复绑定账号即可。

另外,如果用户已经进行了二维码绑定,则可以在管理界面进行取消绑定,这样可以解绑用户账号和微信之间的关联。

绑定和取消绑定微信扫码操作的JS代码就是通过JQuery实现接口调用接口。

取消绑定微信扫码的界面的处理代码很简单,只需要在后台清楚对应的用户记录的openid和unionid即可。
具体的MVC控制器或者API代码如下所示。

而在底层BLL的代码里面,我们只需要做的就是更新指定的两个字段即可,把它们清空的代码如下所示。

网友评论