C#开发微信门户及应用(45)--微信扫码登录
2016-08-20 23:12
267 查看
在前面随笔《C#开发微信门户及应用(41)--基于微信开放平台的扫码登录处理》介绍了基于微信开放平台接口实现的微信扫码直接登录的过程。本篇介绍对扫码登录的一些改进和处理,以便更方便应用在实际项目中。
例如我在一个基于微信的系统应用里面,通过配置实现了仅仅允许扫码登录的效果。
也就是我们可以根据配置,因此其他登录界面,仅仅显示微信的扫码登录生成的二维码效果,如下所示。
![](//upload-images.jianshu.io/upload_images/2551534-8782e66087b31242.png?imageMogr2/auto-orient/strip%7CimageView2/2)
在实现的代码里面,我们主要就是使用JS对界面显示进行控制即可。
一般情况下,我们在开发初期,可以允许账号密码登陆及扫码登录,一旦配置好相关的账号信息,就只需要扫码登录,屏蔽账号密码登陆了。
![](//upload-images.jianshu.io/upload_images/2551534-ab93a64ec30e59c5.png?imageMogr2/auto-orient/strip%7CimageView2/2)
其中我们需要处理的HTML代码层就是增加一个openLoginDiv用来显示扫码登录的二维码即可。
![](//upload-images.jianshu.io/upload_images/2551534-3b0237c1dcb2d97a.png?imageMogr2/auto-orient/strip%7CimageView2/2)
其中的JS代码处理如下所示,直接从后台读取相关的信息,在JS上构建二维码。
![](//upload-images.jianshu.io/upload_images/2551534-386831ef042149c2.png?imageMogr2/auto-orient/strip%7CimageView2/2)
在用户列表的二维码连接上,单击可以对用户进行微信扫码绑定,这样用户可以在扫码登录处直接扫码登录,不需要输入账号密码。
![](//upload-images.jianshu.io/upload_images/2551534-76f49f392a415015.png?imageMogr2/auto-orient/strip%7CimageView2/2)
一旦成功绑定用户微信,在微信端会定位到一个绑定成功的页面,如下所示。
![](//upload-images.jianshu.io/upload_images/2551534-c5189d5a66a98700.png?imageMogr2/auto-orient/strip%7CimageView2/2)
如果用户已经绑定了其中的一个用户而再去扫码绑定其他用户,那么会提示用户避免无法重复绑定账号即可。
![](//upload-images.jianshu.io/upload_images/2551534-9e0d7d140f8fc347.png?imageMogr2/auto-orient/strip%7CimageView2/2)
另外,如果用户已经进行了二维码绑定,则可以在管理界面进行取消绑定,这样可以解绑用户账号和微信之间的关联。
![](//upload-images.jianshu.io/upload_images/2551534-42e9ca5c08a865e8.png?imageMogr2/auto-orient/strip%7CimageView2/2)
绑定和取消绑定微信扫码操作的JS代码就是通过JQuery实现接口调用接口。
![](//upload-images.jianshu.io/upload_images/2551534-888de08c2f8c875b.png?imageMogr2/auto-orient/strip%7CimageView2/2)
取消绑定微信扫码的界面的处理代码很简单,只需要在后台清楚对应的用户记录的openid和unionid即可。
具体的MVC控制器或者API代码如下所示。
![](//upload-images.jianshu.io/upload_images/2551534-b6f185a49cada3a0.png?imageMogr2/auto-orient/strip%7CimageView2/2)
而在底层BLL的代码里面,我们只需要做的就是更新指定的两个字段即可,把它们清空的代码如下所示。
1、扫码登录配置处理
在我前面的随笔扫码登录处理中,介绍了账号登陆和扫码登录并存的情况,有时候我们可能想只是允许用户扫码登录即可,也就是不需要账号登陆,这种情况我们可以通过进行配置实现处理。例如我在一个基于微信的系统应用里面,通过配置实现了仅仅允许扫码登录的效果。
也就是我们可以根据配置,因此其他登录界面,仅仅显示微信的扫码登录生成的二维码效果,如下所示。
![](http://upload-images.jianshu.io/upload_images/2551534-8782e66087b31242.png?imageMogr2/auto-orient/strip%7CimageView2/2)
在实现的代码里面,我们主要就是使用JS对界面显示进行控制即可。
一般情况下,我们在开发初期,可以允许账号密码登陆及扫码登录,一旦配置好相关的账号信息,就只需要扫码登录,屏蔽账号密码登陆了。
![](http://upload-images.jianshu.io/upload_images/2551534-ab93a64ec30e59c5.png?imageMogr2/auto-orient/strip%7CimageView2/2)
其中我们需要处理的HTML代码层就是增加一个openLoginDiv用来显示扫码登录的二维码即可。
![](http://upload-images.jianshu.io/upload_images/2551534-3b0237c1dcb2d97a.png?imageMogr2/auto-orient/strip%7CimageView2/2)
其中的JS代码处理如下所示,直接从后台读取相关的信息,在JS上构建二维码。
![](http://upload-images.jianshu.io/upload_images/2551534-386831ef042149c2.png?imageMogr2/auto-orient/strip%7CimageView2/2)
2、用户扫码绑定及取消
在用户能够使用扫码登录前,我们在后台是需要先记录用户的微信标识的,也就是需要在系统上设置一个功能,让用户使用微信扫一下绑定,同时也应该设置一个功能让其解绑,方便对失效的用户进行处理。在用户列表的二维码连接上,单击可以对用户进行微信扫码绑定,这样用户可以在扫码登录处直接扫码登录,不需要输入账号密码。
![](http://upload-images.jianshu.io/upload_images/2551534-76f49f392a415015.png?imageMogr2/auto-orient/strip%7CimageView2/2)
一旦成功绑定用户微信,在微信端会定位到一个绑定成功的页面,如下所示。
![](http://upload-images.jianshu.io/upload_images/2551534-c5189d5a66a98700.png?imageMogr2/auto-orient/strip%7CimageView2/2)
如果用户已经绑定了其中的一个用户而再去扫码绑定其他用户,那么会提示用户避免无法重复绑定账号即可。
![](http://upload-images.jianshu.io/upload_images/2551534-9e0d7d140f8fc347.png?imageMogr2/auto-orient/strip%7CimageView2/2)
另外,如果用户已经进行了二维码绑定,则可以在管理界面进行取消绑定,这样可以解绑用户账号和微信之间的关联。
![](http://upload-images.jianshu.io/upload_images/2551534-42e9ca5c08a865e8.png?imageMogr2/auto-orient/strip%7CimageView2/2)
绑定和取消绑定微信扫码操作的JS代码就是通过JQuery实现接口调用接口。
![](http://upload-images.jianshu.io/upload_images/2551534-888de08c2f8c875b.png?imageMogr2/auto-orient/strip%7CimageView2/2)
取消绑定微信扫码的界面的处理代码很简单,只需要在后台清楚对应的用户记录的openid和unionid即可。
具体的MVC控制器或者API代码如下所示。
![](http://upload-images.jianshu.io/upload_images/2551534-b6f185a49cada3a0.png?imageMogr2/auto-orient/strip%7CimageView2/2)
而在底层BLL的代码里面,我们只需要做的就是更新指定的两个字段即可,把它们清空的代码如下所示。
![](http://upload-images.jianshu.io/upload_images/2551534-63aafda96fab8b8e.png?imageMogr2/auto-orient/strip%7CimageView2/2)
相关文章推荐
- Android 仿微信显示的聊天照片
- Android 仿微信语音录音小控件
- Android 仿微信联系人Demo(自定义View,Viewgroup)
- SwipeListView 详解 实现微信 QQ等滑动删除效果
- art apk像facebook、微信等apk安装失败,安装慢等问题
- 微信公众号内H5调用微信支付国内服务商模式
- 微信开发1
- 修改UA在PC中访问只能在微信中打开的链接
- js 调用 oc 方法来发起微信支付
- 微信开放平台API学习笔记——第一章:API的注册与官方Demo的调试
- 浅谈微信红包的算法
- 爆微信公众平台个人类账号一年内可主动修改一次名称
- 支付宝微信支付接入详细流程
- 接入微信的流程,不官方,赞
- 微信支付
- Android集成微信支付
- Android微信支付彻底扫坑
- Golang实现通过微信接收告警消息
- [Widget]GradientTabStrip-微信式底部渐变栏
- 微信开放平台创建应用时应用官网的问题