一 : 二维码的生成细节和原理(1)
二维码又称QR Code，QR全称Quick Response，是一个近几年来移动设备上超流行的一种编码方式，它比传统的Bar Code条形码能存更多的信息，也能表示更多的数据类型：比如：字符，数字，日文，中文等等。这两天学习了一下二维码图片生成的相关细节，觉得这个玩意就 是一个密码算法，在此写一这篇文章 ，揭露一下。供好学的人一同学习之。
关于QR Code Specification，可参看这个PDF：http://raidenii.net/files/datasheets/misc/qr_code.pdf
首先，我们先说一下二维码一共有40个尺寸。官方叫版本Version。Version 1是21 x 21的矩阵，Version 2是 25 x 25的矩阵，Version 3是29的尺寸，每增加一个version，就会增加4的尺寸，公式是：(V-1)*4 + 21（V是版本号） 最高Version 40，(40-1)*4+21 = 177，所以最高是177 x 177 的正方形。
下面我们看看一个二维码的样例：
定位图案
功能性数据
数据码和纠错码
我们先来说说数据编码。QR码支持如下的编码：
Numeric mode数字编码，从0到9。如果需要编码的数字的个数不是3的倍数，那么，最后剩下的1或2位数会被转成4或7bits，则其它的每3位数字会被编成 10，12，14bits，编成多长还要看二维码的尺寸（下面有一个表Table 3说明了这点）
Alphanumeric mode字符编码。包括 0-9，大写的A到Z（没有小写），以及符号$ % * + – . / : 包括空格。这些字符会映射成一个字符索引表。如下所示：（其中的SP是空格，Char是字符，Value是其索引值） 编码的过程是把字符两两分组，然后转成下表的45进制，然后转成11bits的二进制，如果最后有一个落单的，那就转成6bits的二进制。而编码模式和 字符的个数需要根据不同的Version尺寸编成9, 11或13个二进制（如下表中Table 3）
Byte mode, 字节编码，可以是0-255的ISO-8859-1字符。有些二维码的扫描器可以自动检测是否是UTF-8的编码。
Kanji mode这是日文编码，也是双字节编码。同样，也可以用于中文编码。日文和汉字的编码会减去一个 值。如：在0X8140 to 0X9FFC中的字符会减去8140，在0XE040到0XEBBF中的字符要减去0XC140，然后把前两位拿出来乘以0XC0，然后再加上后两位，最 后转成13bit的编码。如下图示例：
Extended Channel Interpretation (ECI) mode主要用于特殊的字符集。并不是所有的扫描器都支持这种编码。
Structured Append mode用于混合编码，也就是说，这个二维码中包含了多种编码格式。
FNC1 mode这种编码方式主要是给一些特殊的工业或行业用的。比如GS1条形码之类的。
简单起见，后面三种不会在本文 中讨论。
下面两张表中，
二维码的生成细节和原理(1)_二维码编码规则
下面我们看几个示例，
示例一：数字编码
在Version 1的尺寸下，纠错级别为H的情况下，编码： 01234567
示例二：字符编码
在Version 1的尺寸下，纠错级别为H的情况下，编码: AC-42
1. 从字符索引表中找到 AC-42 这五个字条的索引 (10,12,41,4,2)
2. 两两分组: (10,12) (41,4) (2)
3.把每一组转成11bits的二进制:
(10,12) 10*45+12 等于 462 转成 00111001110
(41,4) 41*45+4 等于 1849 转成 11100111001
(2) 等于 2 转成 000010
4. 把这些二进制连接起来：00111001110 11100111001 000010
5. 把字符的个数转成二进制 (Version 1-H为9 bits ):5个字符，5转成 000000101
6. 在头上加上编码标识 0010 和第5步的个数编码: 0010 000000101 00111001110 11100111001 000010
假如我们有个HELLO WORLD的字符串要编码，根据上面的示例二，我们可以得到下面的编码，
| 编码 | 字符数 | HELLO WORLD的编码 |
|---|---|---|
| 0010 | 000001011 | 01100001011 01111000110 10001011100 10110111000 10011010100 001101 |
我们还要加上结束符：
| 编码 | 字符数 | HELLO WORLD的编码 | 结束 |
|---|---|---|---|
| 0010 | 000001011 | 01100001011 01111000110 10001011100 10110111000 10011010100 001101 | 0000 |
按8bits重排
如果所有的编码加起来不是8个倍数我们还要在后面加上足够的0，比如上面一共有78个bits，所以，我们还要加上2个0，然后按8个bits分好组：
00100000 01011011 00001011 01111000 11010001 01110010 11011100 01001101 01000011 01000000
补齐码（Padding Bytes）
最后，如果如果还没有达到我们最大的bits数的限制，我们还要加一些补齐码（Padding Bytes），Padding Bytes就是重复下面的两个bytes：11101100 00010001 （这两个二进制转成十进制是236和17，我也不知道为什么，只知道Spec上是这么写的）关于每一个Version的每一种纠错级别的最大Bits限 制，可以参看QR Code Spec的第28页到32页的Table-7一表。
假设我们需要编码的是Version 1的Q纠错级，那么，其最大需要104个bits，而我们上面只有80个bits，所以，还需要24个bits，也就是需要3个Padding Bytes，我们就添加三个，于是得到下面的编码：
00100000 01011011 00001011 01111000 11010001 01110010 11011100 01001101 01000011 0100000011101100 00010001 11101100
纠错码
上面我们说到了一些纠错级别，Error Correction Code Level，二维码中有四种级别的纠错，这就是为什么二维码有残缺还能扫出来，也就是为什么有人在二维码的中心位置加入图标。
| 错误修正容量 | |
|---|---|
| L水平 | 7%的字码可被修正 |
| M水平 | 15%的字码可被修正 |
| Q水平 | 25%的字码可被修正 |
| H水平 | 30%的字码可被修正 |
那么，QR是怎么对数据码加上纠错码的？首先，我们需要对数据码进行分组，也就是分成不同的Block，然后对各个Block进行纠错编码，对于如何分组，我们可以查看QR Code Spec的第33页到44页的Table-13到Table-22的定义表。注意最后两列：
举个例子：上述的Version 5 + Q纠错级：需要4个Blocks（2个Blocks为一组，共两组），头一组的两个Blocks中各15个bits数据 + 各 9个bits的纠错码（注：表中的codewords就是一个8bits的byte）（再注：最后一例中的（c, k, r ）的公式为：c = k + 2 * r，因为后脚注解释了：纠错码的容量小于纠错码的一半）
下图给一个5-Q的示例（因为二进制写起来会让表格太大，所以，我都用了十进制）
| 组 | 块 | 数据 | 对每个块的纠错码 |
|---|---|---|---|
| 1 | 1 | 67 85 70 134 87 38 85 194 119 50 6 18 6 103 38 | 213 199 11 45 115 247 241 223 229 248 154 117 154 111 86 161 111 39 |
| 2 | 246 246 66 7 118 134 242 7 38 86 22 198 199 146 6 | 87 204 96 60 202 182 124 157 200 134 27 129 209 17 163 163 120 133 | |
| 2 | 1 | 182 230 247 119 50 7 118 134 87 38 82 6 134 151 50 7 | 148 116 177 212 76 133 75 242 238 76 195 230 189 10 108 240 192 141 |
| 2 | 70 247 118 86 194 6 151 50 16 236 17 236 17 236 17 236 | 235 159 5 173 24 147 59 33 106 40 255 172 82 2 131 32 178 236 |
注：二维码的纠错码主要是通过Reed-Solomon error correction（里 德-所罗门纠错算法）来实现的。对于这个算法，对于我来说是相当的复杂，里面有很多的数学计算，比如：多项式除法，把1-255的数映射成2的n次方 （0<=n<=255）的伽罗瓦域Galois Field之类的神一样的东西，以及基于这些基础的纠错数学公式，因为我的数据基础差，对于我来说太过复杂，所以我一时半会儿还有点没搞明白，还在学习 中，所以，我在这里就不展开说这些东西了。还请大家见谅了。（当然，如果有朋友很明白，也繁请教教我）
最终编码
二维码的生成细节和原理(1)_二维码编码规则
穿插放置
如果你以为我们可以开始画图，你就错了。二维码的混乱技术还没有玩完，它还要把数据码和纠错码的各个codewords交替放在一起。如何交替呢，规则如下：
对于数据码：把每个块的第一个codewords先拿出来按顺度排列好，然后再取第一块的第二个，如此类推。如：上述示例中的Data Codewords如下：
| 块 1 | 67 | 85 | 70 | 134 | 87 | 38 | 85 | 194 | 119 | 50 | 6 | 18 | 6 | 103 | 38 | |
| 块 2 | 246 | 246 | 66 | 7 | 118 | 134 | 242 | 7 | 38 | 86 | 22 | 198 | 199 | 146 | 6 | |
| 块 3 | 182 | 230 | 247 | 119 | 50 | 7 | 118 | 134 | 87 | 38 | 82 | 6 | 134 | 151 | 50 | 7 |
| 块 4 | 70 | 247 | 118 | 86 | 194 | 6 | 151 | 50 | 16 | 236 | 17 | 236 | 17 | 236 | 17 | 236 |
我们先取第一列的：67， 246， 182， 70
然后再取第二列的：67， 246， 182， 70， 85，246，230 ，247
如此类推：67， 246， 182， 70， 85，246，230 ，247 ……… ……… ，38，6，50，17，7，236
对于纠错码，也是一样：
| 块 1 | 213 | 199 | 11 | 45 | 115 | 247 | 241 | 223 | 229 | 248 | 154 | 117 | 154 | 111 | 86 | 161 | 111 | 39 |
| 块 2 | 87 | 204 | 96 | 60 | 202 | 182 | 124 | 157 | 200 | 134 | 27 | 129 | 209 | 17 | 163 | 163 | 120 | 133 |
| 块 3 | 148 | 116 | 177 | 212 | 76 | 133 | 75 | 242 | 238 | 76 | 195 | 230 | 189 | 10 | 108 | 240 | 192 | 141 |
| 块 4 | 235 | 159 | 5 | 173 | 24 | 147 | 59 | 33 | 106 | 40 | 255 | 172 | 82 | 2 | 131 | 32 | 178 | 236 |
和数据码取的一样，得到：213，87，148，235，199，204，116，159，…… ……39，133，141，236
然后，再把这两组放在一起（纠错码放在数据码之后）得到：
67, 246, 182, 70, 85, 246, 230, 247, 70, 66, 247, 118, 134, 7, 119, 86, 87, 118, 50, 194, 38, 134, 7, 6, 85, 242, 118, 151, 194, 7, 134, 50, 119, 38, 87, 16, 50, 86, 38, 236, 6, 22, 82, 17, 18, 198, 6, 236, 6, 199, 134, 17, 103, 146, 151, 236, 38, 6, 50, 17, 7, 236, 213, 87, 148, 235, 199, 204, 116, 159, 11, 96, 177, 5, 45, 60, 212, 173, 115, 202, 76, 24, 247, 182, 133, 147, 241, 124, 75, 59, 223, 157, 242, 33, 229, 200, 238, 106, 248, 134, 76, 40, 154, 27, 195, 255, 117, 129, 230, 172, 154, 209, 189, 82, 111, 17, 10, 2, 86, 163, 108, 131, 161, 163, 240, 32, 111, 120, 192, 178, 39, 133, 141, 236
Remainder Bits
最后再加上ReminderBits，对于某些Version的QR，上面的还不够长度，还要加上Remainder Bits，比如：上述的5Q版的二维码，还要加上7个bits，Remainder Bits加零就好了。关于哪些Version需要多少个Remainder bit，可以参看QR Code Spec的第15页的Table-1的定义表。
画二维码图
Position Detection Pattern
首先，先把Position Detection图案画在三个角上。
然后，再把Alignment图案画上
关于Alignment的位置，可以查看QR Code Spec的第81页的Table-E.1的定义表（下表是不完全表格）
下图是根据上述表格中的Version8的一个例子（6，24，42）
接下来是Timing Pattern的线（这个不用多说了）
二维码的生成细节和原理(1)_二维码编码规则
再接下来是Formation Information，下图中的蓝色部分。
Format Information是一个15个bits的信息，每一个bit的位置如下图所示：（注意图中的Dark Module，那是永远出现的）
这15个bits中包括：
然后15个bits还要与101010000010010做XOR操作。这样就保证不会因为我们选用了00的纠错级别，以及000的Mask，从重造成全部为白色，这会增加我们的扫描器的图像识别的困难。
下面是一个示例：
关于Error Correction Level如下表所示：
关于Mask图案如后面的Table 23所示。
再接下来是Version Information（版本7以后需要这个编码），下图中的蓝色部分。
Version Information一共是18个bits，其中包括6个bits的版本号以及12个bits的纠错码，下面是一个示例：
而其填充位置如下：
数据和数据纠错码
然后是填接我们的最终编码，最终编码的填充方式如下：从左下角开始沿着红线填我们的各个bits，1是黑色，0是白色。如果遇到了上面的非数据区，则绕开或跳过。
二维码的生成细节和原理(1)_二维码编码规则
掩码图案
这样下来，我们的图就填好了，但是，也许那些点并不均衡，所以，我们还要做Masking操作（靠，还嫌不复杂）QR的Spec中说了，QR有8个 Mask你可以使用，如下所示：其中，各个mask的公式在各个图下面。所谓mask，说白了，就是和上面生成的图做XOR操作。Mask只会和数据区进 行XOR，不会影响功能区。
其Mask的标识码如下所示：（其中的i,j分别对应于上图的x,y）
下面是Mask后的一些样子，我们可以看到被某些Mask XOR了的数据变得比较零散了。
Mask过后的二维码就成最终的图了。
好了，大家可以去尝试去写一下QR的编码程序，当然，你可以用网上找个Reed Soloman的纠错算法的库，或是看看别人的源代码是怎么实现这个繁锁的编码。
原文链接：#jtss-tsina
二 : iOS 原生二维码扫描（可限制扫描区域）
写这篇文章的主要原因不是展示如何使用 AVFoundation 来进行二维码扫描，更主要的是限制扫描二维码的范围。（因为默认的是全屏扫描）
项目遇到扫描二维码的功能需求，这里我放弃了使用三方库，而采用了苹果原生的扫描。
原生的好处就是扫描特别快效率特别高，但是遇到一个问题就是不知道怎么去限制扫描范围。
还是先简单说一下怎么使用来进行二维码扫描吧。
首先是要用到的几个类
@property (strong,nonatomic)AVCaptureDevice * device;
@property (strong,nonatomic)AVCaptureDeviceInput * input;
@property (strong,nonatomic)AVCaptureMetadataOutput * output;
@property (strong,nonatomic)AVCaptureSession * session;
@property (strong,nonatomic)AVCaptureVideoPreviewLayer * preview;
他们之间的关系可以看下面的篇文章传送门
下面分别创建他们
// Device
_device = [AVCaptureDevicedefaultDeviceWithMediaType:AVMediaTypeVideo];
// Input
_input = [AVCaptureDeviceInputdeviceInputWithDevice:self.deviceerror:nil];
// Output
_output = [[AVCaptureMetadataOutputalloc]init];
[_outputsetMetadataObjectsDelegate:selfqueue:dispatch_get_main_queue()];
// Session
_session = [[AVCaptureSessionalloc]init];
[_sessionsetSessionPreset:AVCaptureSessionPresetHigh];
if ([_sessioncanAddInput:self.input])
{
[_sessionaddInput:self.input];
}
if ([_sessioncanAddOutput:self.output])
{
[_sessionaddOutput:self.output];
}
// 条码类型 AVMetadataObjectTypeQRCode
_output.metadataObjectTypes =@[AVMetadataObjectTypeQRCode];
// Preview
_preview =[AVCaptureVideoPreviewLayerlayerWithSession:_session];
_preview.videoGravity =AVLayerVideoGravityResizeAspectFill;
_preview.frame =self.view.layer.bounds;
[self.view.layerinsertSublayer:_previewatIndex:0];
// Start
[_sessionstartRunning];
然后实现 AVCaptureMetadataOutputObjectsDelegate
#pragma mark AVCaptureMetadataOutputObjectsDelegate
- (void)captureOutput:(AVCaptureOutput *)captureOutput didOutputMetadataObjects:(NSArray *)metadataObjects fromConnection:(AVCaptureConnection *)connection
{
NSString *stringValue;
if ([metadataObjectscount]>0)
{
//停止扫描
[_sessionstopRunning];
AVMetadataMachineReadableCodeObject * metadataObject = [metadataObjectsobjectAtIndex:0];
stringValue = metadataObject.stringValue;
}
}
到此为止就可以成功扫描二维码了，但是有个尴尬的问题，这时的扫描是全屏扫描的。即
vc/CzuejrLDRy/nT0M/rtb21xLe9t6i2vMrUwcvSu7Hpo6y1q8rHtryyu9DQo6i2vMrHwOGjqaOs1+66872r0qq3xcb6tcTKsbryt6LP1sHL0ru49rHIvc+/ydLJtcS146GjPC9wPgo8cD48YnI+CjwvcD4KPHA+PC9wPgo8cD5AcHJvcGVydHkobm9uYXRvbWljKUNHUmVjdCByZWN0T2ZJbnRlcmVzdApOU19BVkFJTEFCTEVfSU9TKDdfMCk7PC9wPgrV4srHtcQgQVZDYXB0dXJlTWV0YWRhdGFPdXRwdXQg0ru49sr00NSjrMv8tcS94srNyscKCjxwPgpAZGlzY3Vzc2lvbjwvcD4KPHA+ClRoZSB2YWx1ZSBvZiB0aGlzIHByb3BlcnR5IGlzIGEgQ0dSZWN0IHRoYXQgZGV0ZXJtaW5lcyB0aGUgcmVjZWl2ZXI="s rectangle of interest for each frame of video.
The rectangle's origin is top left and is relative to the coordinate space of the device providing the metadata. Specifying
a rectOfInterest may improve detection performance for certain types of metadata. The default value of this property is the
value CGRectMake(0, 0, 1, 1). Metadata objects whose bounds do not intersect with the rectOfInterest will not be returned.
大概意思就是设置每一帧画面感兴趣的区域（字面意思），那岂不是就是设置扫描范围喽，大喜于是赶紧把rectOfInterest设置成中间框的frame，[_outputsetRectOfInterest:CGRectMake((ScreenWidth-220)/2,60+64,220,220)];
//中间区域的宽和高都是220 ScreenWidth为设备屏幕宽度
但是却发现怎么扫描都不能成功了。于是又看了看上面的一段话。[_outputsetRectOfInterest:CGRectMake(((ScreenWidth-220)/2)/ScreenWidth,(60+64)/ScreenHigh,220/ScreenWidth,220/ScreenHigh)];
按说这样应该就完美了，但是才知道我还是高兴得太早了，一扫描才发现完全不是那么回事，差很多。
于是我就一点一点调，但是最后也没调成功，最后一狠心有设置了一个很确定的值。
[_output setRectOfInterest:CGRectMake(0.5,0.5,0.5, 0.5)];这次应该很确定是在右下方的四分之一区域吧，嘿嘿。
但是事实又一次打击了我，扫描后发现是左下的四分之一区域，也就是说rectOfInterest的原点是右上角！！！
回头又一想，即使右上角是原点那也应该没有影响啊，但是为什么不行呢，不会是原点的 X 和 Y 互换了吧？算了不管怎么着，试一试吧。
[_outputsetRectOfInterest:CGRectMake((60+64)/ScreenHigh,((ScreenWidth-220)/2)/ScreenWidth,220/ScreenWidth,220/ScreenHigh)];
又扫描了一下发现成功了！果然原点正确了，我只想说TMD！但是宽和高又怎么对不上了？不会也互换了吧！赶紧试试
[_outputsetRectOfInterest:CGRectMake((124)/ScreenHigh,((ScreenWidth-220)/2)/ScreenWidth,220/ScreenHigh,220/ScreenWidth)];
怀着忐忑的心情又试了试，完美扫描！OMG我想死的心都有了。于是用系统原生的扫描二维码就完美了！
今天就跟大家分享这一个点，转载请注明出处，谢谢 — — LC
三 : 基于SignalR的消息推送与二维码扫描登录实现代码
1 概要说明
使用微信扫描登录相信大家都不会陌生吧，二维码与手机结合产生了不同应用场景，基于二维码的应用更是比较广泛。为了满足ios、android客户端与web短信平台的结合，特开发了基于SinglarR消息推送机制的扫描登录。本系统涉及到以下知识点：
SignalR：http://signalr.net/ 这官网，ASP.NET SignalR 是为 ASP.NET 开发人员提供的一个库，可以简化开发人员将实时 Web 功能添加到应用程序的过程。实时 Web 功能是指这样一种功能：当所连接的客户端变得可用时服务器代码可以立即向其推送内容，而不是让服务器等待客户端请求新的数据。
二维码：使用的QRCode类库，https://github.com/jeromeetienne/jquery-qrcode
MVC5：开发环境是基于MVC5
2、系统关系图
在实现本功能前，有点不是太确定能否拿下。
所谓万事开头难，通过查询想资料及自己归纳分析：系统涉及到手机客户端、浏览者、服务端，实现扫描登录也就是三者之间是如何协调工作的。通过axure画出如下关系图：
移动客户端、浏览者、服务端三者协作关系图
【M】：表示移动端 【B】：表示浏览者（浏览器客户端） 【S】：服务端，消息推送者及扫描认证接口发布者
步骤说明：
Step（步骤）1 ，【B】浏览登录页面，Step2【S】产生一个标识符UUID，并推送给B，生成登录二维码；
Step3，【M】扫描二维码，前提条件是【M】已登录，Step4【M】解析二维码信息获取UUID；
Step5，【M】向服务端发送UUID+登录信息，Step6【S】对UUID+登录信息进行相关解析认证，Step6 UUID认证，不通过认证，则到Step6-1 重新生成UUID循环Step 2与并Step6-2 返回给【M】UUID认证失败原因，Step6 通过认证，Step6-2转到登录信息认证，Step 7登录信息认证，失败Step7-3重新生成UUID循环Step 2，成功则Step7-1推送给【B】跳转到首页。
3、SignalR循环消息推送
3.1 引用SignalR
由于本人用的是VS15Preview4，可以直接使用Nuget可视化管理工具进行安装：Tools—>Nuget Package Manager—>Manage Nuget Packages for Solution…，打开以下界面：
在Browser 标签下输入SignalR，查询到Microsoft.AspNet.SignalR
/p>
找到对应的项目，点击“Install”安装按钮即可引用相关类库，同时应用下载相关js库。
关于SignalR的知识点，可以到官网 http://www.asp.net/signalr 进行深入学习。
3.2 服务端SignalR实现
服务端要向客户端推送UUID，对于UUID唯一标识符，具有重要特性：（1）有时间限制，120秒之内扫码有效；（2）具有一定的状态。对应的声明周期就是：生成—>推送—>状态判断—>手机端扫描—>验证UUID—>状态判断—>销毁等系列过程。
服务端的核心代码将单独建立一个项目去实现：
3.2.1 Nofifier.cs通知类
本类将连接QRCodeHub与SessionTimer
using Microsoft.AspNet.SignalR;namespace TxSms.SingalR { public static class Notifier { private static readonly IHubContext Context = GlobalHost.ConnectionManager.GetHubContext<QRCodeHub>(); public static void SessionTimeOut(string connectionId, int time) { Context.Clients.Client(connectionId).alertClient(time); } public static void SendElapsedTime(string connectionId, int time) { Context.Clients.Client(connectionId).sendElapsedTime(time); } public static void SendQRCodeUUID(string connectionId, string uuid) { Context.Clients.Client(connectionId).sendQRCodeUUID(uuid); } } } 3.2.2 QRCodeHub.cs SignalR核心实现
SignalR的核心代码：
using Microsoft.AspNet.SignalR; using System.Threading.Tasks; namespace TxSms.SingalR { /// <summary> /// 二维码推送 /// </summary> //[HubName("qrcode")] public class QRCodeHub : Hub { /// <summary> /// 给客户端发送时间间隔 /// </summary> /// <param name="time"> </param> public void SendTimeOutNotice(int time) { Clients.Client(Context.ConnectionId).alertClient(time); } public void CheckElapsedTime(int time) { Clients.Client(Context.ConnectionId).sendElapsedTime(time); } /// <summary> /// 发送二维码UUID内容 /// </summary> /// <param name="uuid"> </param> public void SendQRCodeUUID(string uuid) { Clients.Client(Context.ConnectionId).sendQRCodeUUID(uuid); } /// <summary> /// Called when the connection connects to this hub instance. /// </summary> /// <returns>A <see cref="T:System.Threading.Tasks.Task" /> </returns> public override Task OnConnected() { SessionTimer.StartTimer(Context.ConnectionId); return base.OnConnected(); } /// <summary> /// Called when a connection disconnects from this hub gracefully or due to a timeout. /// </summary> /// <param name="stopCalled"> /// true, if stop was called on the client closing the connection gracefully; /// false, if the connection has been lost for longer than the /// <see cref="P:Microsoft.AspNet.SignalR.Configuration.IConfigurationManager.DisconnectTimeout" />. /// Timeouts can be caused by clients reconnecting to another SignalR server in scaleout. /// </param> /// <returns>A <see cref="T:System.Threading.Tasks.Task" /> </returns> public override Task OnDisconnected(bool stopCalled) { SessionTimer.StopTimer(Context.ConnectionId); return base.OnDisconnected(stopCalled); } /// <summary> /// Called when the connection reconnects to this hub instance. /// </summary> /// <returns>A <see cref="T:System.Threading.Tasks.Task" /> </returns> public override Task OnReconnected() { if (!SessionTimer.Timers.ContainsKey(Context.ConnectionId)) { SessionTimer.StartTimer(Context.ConnectionId); } return base.OnReconnected(); } /// <summary> /// 重置时钟 /// </summary> public void ResetTimer() { SessionTimer timer; if (SessionTimer.Timers.TryGetValue(Context.ConnectionId, out timer)) { timer.ResetTimer(); } else { SessionTimer.StartTimer(Context.ConnectionId); } } /// <summary> /// 发送普通消息 /// </summary> /// <param name="name"> </param> /// <param name="message"> </param> public void Send(string name, string message) { Clients.All.addNewMessageToPage(name, message); } } } 3.2.3 SessionTimer.cs 对应客户端时钟
对【B】来说，产生一个独立的timer，进行按1s间隔发送消息。
using System;using System.Collections.Concurrent;using System.Timers;namespace TxSms.SingalR{ public class SessionTimer : IDisposable { /// <summary> /// 存储客户端对应的Timer /// </summary> public static readonly ConcurrentDictionary<string, SessionTimer> Timers; private readonly Timer _timer; static SessionTimer() { Timers = new ConcurrentDictionary<string, SessionTimer>(); } /// <summary> /// 构造函数 /// </summary> /// <param name="connectionId"></param> private SessionTimer(string connectionId) { ConnectionId = connectionId; _timer = new Timer { Interval = Utility.ActivityTimerInterval() }; _timer.Elapsed += (s, e) => MonitorElapsedTime(); _timer.Start(); } public int TimeCount { get; set; } /// <summary> /// 客户端连接Id /// </summary> public string ConnectionId { get; set; } /// <summary> /// 启动Timer /// </summary> /// <param name="connectionId"> </param> public static void StartTimer(string connectionId) { var newTimer = new SessionTimer(connectionId); if (!Timers.TryAdd(connectionId, newTimer)) { newTimer.Dispose(); } } /// <summary> /// 停止Timer /// </summary> /// <param name="connectionId"> </param> public static void StopTimer(string connectionId) { SessionTimer oldTimer; if (Timers.TryRemove(connectionId, out oldTimer)) { oldTimer.Dispose(); } } /// <summary> /// 重置Timer /// </summary> public void ResetTimer() { TimeCount = 0; _timer.Stop(); _timer.Start(); } public void Dispose() { // Stop might not be necessary since we call Dispose _timer.Stop(); _timer.Dispose(); } /// <summary> /// 给客户端发送消息 /// </summary> private void MonitorElapsedTime() { Utility.ClearExpiredUUID(); var uuid = Utility.GetUUID(ConnectionId); //if (TimeCount >= Utility.TimerValue()) //{ // StopTimer(ConnectionId); // Notifier.SendQRCodeUUID(ConnectionId, uuid); // Notifier.SessionTimeOut(ConnectionId, TimeCount); //} //else // { Notifier.SendQRCodeUUID(ConnectionId, uuid); Notifier.SendElapsedTime(ConnectionId, TimeCount); //} TimeCount++; if (TimeCount > 1000) { TimeCount = 0; } } }} 3.2.4 Utility.cs 基础配置
满足时钟、获取QRCode等
using TxSms.Actions;namespace TxSms.SingalR { internal class Utility { public static int IntNum = 0; /// <summary> /// 时间间隔 /// </summary> /// <returns></returns> public static int TimerValue() { return 1000; } public static double ActivityTimerInterval() { return 1000.0; } /// <summary> /// 获取当前UUID /// </summary> /// <returns></returns> public static string GetUUID(string connectionId) { try { var model = new QRCodeAction().GetValidModel(connectionId); return model.ToJson(connectionId); } catch { return "ERROR"; } } /// <summary> /// 删除过期UUID /// </summary> public static void ClearExpiredUUID() { IntNum++; if (IntNum <= 1000) return; new QRCodeAction().ClearExpiredUUID(); IntNum = 0; } }} 3.2.5 SignalR在MVC中启动配置
在MVC中，启动项目进行如下配置：
using Microsoft.Owin;using Owin; [assembly: OwinStartup(typeof(TxSms.Web.Startup))]namespace TxSms.Web{ public partial class Startup { public void Configuration(IAppBuilder app) { //启动SignalR app.MapSignalR(); ConfigureAuth(app); } }} 3.2.6 其他类库说明
QRCodeAction.cs：维护UUID，创建、保存、状态更改、删除等。
QRModel.cs：UUID实体
所有文件，可在《7、总结与下载》中下载。
3.3 客户端SignalR实现
添加SignalR js库：
<script type="text/javascript" src="~/Scripts/jquery.signalR-2.2.1.min.js"> </script> <script type="text/javascript" src="~/signalr/hubs"> </script
两者必须都引用。
调用接口如下：
var codeUUID = ""; $(function () { // Reference the auto-generated proxy for the hub. var qrcode = $.connection.qRCodeHub; // Create a function that the hub can call back to display messages. qrcode.client.addNewMessageToPage = function (name, message) { // Add the message to the page. console.log(message); //jQuery('#divQRCode').qrcode({ width: 180, height: 180, correctLevel: 0, text: message }); }; qrcode.client.sendElapsedTime = function (time) { console.log(time); }; qrcode.client.sendQRCodeUUID = function (uuid) { console.log("sendQRCodeUUID"); console.log(codeUUID); if (codeUUID === uuid) { return; } codeUUID = uuid; if (codeUUID !== "ERROR") { var jsonUUID = $.parseJSON(codeUUID); if (jsonUUID.islogin === 1) { //判断是否登录 window.location.href = "/Home/Index/@Model.Name"; } } $("#divQRCode").html(""); $('#divQRCode').qrcode({ width: 180, height: 180, correctLevel: 0, text: codeUUID }); }; // Start the connection. $.connection.hub.start().done(function () { //qrcode.server.updateConnectionId($.connection.hub.id); qrcode.server.send("qrcode", Math.random()); }); }); 以上代码包括相关二维码的生成。
4、二维码的生成与存储数据解析
4.1 二维码的生成
二维码类库选择https://github.com/jeromeetienne/jquery-qrcode 一个QRCode原生态js类库，jquery对其进行了扩展。
添加script标签：
<script type="text/javascript" src="~/Scripts/qrcode.min.js"> </script> <script type="text/javascript" src="~/Scripts/jquery.qrcode.min.js"> </script>
定义div标签，用来呈现二维码：
<!--二维码登录开始--> <div> <div>安全登录 防止被盗</div> <div> </div> <div>扫一扫登录</div> </div> <!--二维码登录结束-->
呈现二维码：
$("#divQRCode").html(""); $('#divQRCode').qrcode({ width: 180, height: 180, correctLevel: 0, text: codeUUID }); 通过3与4，可实现具有180秒生命周期二维码的生成，对于不同的浏览者，生成的二维码是不同的，效果如下：
4.2 二维码存储的是什么
二维码生成了，但是存储的是什么呢？首先我们看下以下的二维：
hbuilder官网
千牛电脑客户端二维码登录界面
显然，扫描这两个图片上的二维码会得到不同的结果。对某些二维码的解码要对应配套的客户端才能起到作用，否则用其他工具解析出来也就是字符串。
在本系统中，二维码存储的是一个json对象，格式为：
{"connectionid":"19c12e95-26d7-410c-8292-2a3afdd1a4da","uuid":"a04702df-6a52-4e1c-be8b-9b3dbeef4d72","islogin":0,"isvalid":1} connectionid：客户端与SignalR联系的id，其格式为Guid
uuid：对应connectionid产生的一个唯一标识符，其格式为Guidislogin：当前connectionid连接是否已登录，1—>表示登录，0—>未登录isvalid：当前connectionid对应的uuid是否有效，1—>表示有效，0—>表示失效
手机客户端扫描之后，可根据这些参数情况进行判断，是否向服务端发送请求。在做扫描应用（比如扫描登录）时，要依据业务场景进行消息传递，生成对应二维码，并不局限于json对象、url地址等。
总结下来，二维码应用场景，如下图：
5、扫描认证接口
为了满足【M】端扫描之后，提交UUID+用户信息进行认证，建立QRCode API接口。接口任务比较简单，就是对UUID合法性进行判断，然后判断用户信息登录情况，更改UUID的登录状态。
5.1 输入参数
using Abp.Application.Services.Dto;using System;using System.ComponentModel.DataAnnotations; namespace TxSms.Inputs{ /// <summary> /// 二维码登录认证 /// </summary> [Serializable] public class QRCodeVerifyInput : IInputDto { /// <summary> /// 构造函数 /// </summary> public QRCodeVerifyInput() { ConnectionId = Guid.Empty.ToString(); UUID = Guid.Empty; UserName = Password = ""; } /// <summary> /// 当前回话ID /// </summary> [DisplayFormat(ConvertEmptyStringToNull = false)] public string ConnectionId { get; set; } /// <summary> /// 唯一标识符号 /// </summary> public Guid UUID { get; set; } /// <summary> /// 用户账号 /// </summary> [DisplayFormat(ConvertEmptyStringToNull = false)] public string UserName { get; set; } /// <summary> /// 登录密码 /// </summary> [DisplayFormat(ConvertEmptyStringToNull = false)] public string Password { get; set; } /// <summary> /// 平台 /// </summary> [DisplayFormat(ConvertEmptyStringToNull = false)] public string Platform { get; set; } }} 5.2 输出参数
using Abp.Application.Services.Dto; using Newtonsoft.Json;using System.ComponentModel.DataAnnotations;using System.Web.Mvc;using TxSms.MVC;namespace TxSms.Outputs{ /// <summary> /// 输出基类 /// </summary> [ModelBinder(typeof(EmptyStringModelBinder))] public class TxSmsOutputDto : IOutputDto { /// <summary> /// 构造函数 /// </summary> public TxSmsOutputDto() { Result = 0; //默认为0，表示初始值或正确 Message = ""; } /// <summary> /// 错误代码 /// </summary> [JsonProperty("Result")] public int Result { get; set; } /// <summary> /// 错误信息 /// </summary> [DisplayFormat(ConvertEmptyStringToNull = false)] [JsonProperty("Message")] public string Message { get; set; } }} 5.3 API接口
using System;using System.Threading.Tasks;using System.Web.Http;using TxSms.Actions;using TxSms.Inputs;using TxSms.Outputs;namespace TxSms{ /// <summary> /// 二维码接口 /// </summary> public class QRCodeController : TxSmsApiController { /// <summary> /// 二维码登录认证 /// </summary> /// <returns> /// 0:登录成功；-1:参数错误 -2:ConnectionId、UUID、UserName、Password不允许为空-3:ConnectionId回话id不存在-4:UUID输入错误-5:UUID已过期 /// -6:本UUID已登录-7:登录账号已停用-8:登录账号已删除-9:登录密码输入错误-10:登录账号不存在 /// </returns> [AllowAnonymous] [HttpPost] public async Task<TxSmsOutputDto> QRCodeVerify([FromBody]QRCodeVerifyInput model) { TxSmsOutputDto result = new TxSmsOutputDto(); #region 参数验证 if (model.IsNull()) { result.Result = -1; result.Message = "参数错误"; return result; } if (model.ConnectionId.IsNullOrEmpty() || model.UUID.Equals(Guid.Empty) || model.UserName.IsNullOrEmpty() || model.Password.IsNullOrEmpty()) { result.Result = -2; result.Message = "ConnectionId、UUID、UserName、Password不允许为空"; return result; } #endregion 参数验证 #region 有效性判断 //验证ConnectionId合法性 if (QRCodeAction.QRCodeLists.ContainsKey(model.ConnectionId)) { result.Result = -3; result.Message = "ConnectionId回话id不存在"; return result; } //验证UUID有效性 var findCode = QRCodeAction.QRCodeLists[model.ConnectionId]; if (!model.UUID.Equals(findCode.UUID)) { result.Result = -4; result.Message = "UUID输入错误"; return result; } if (!findCode.IsValid()) { result.Result = -5; result.Message = "UUID已过期"; return result; } if (findCode.IsLogin) { result.Result = -6; result.Message = "本UUID已登录"; return result; } #endregion 有效性判断 LoginUserNameInput loginParam = new LoginUserNameInput { UserName = model.UserName, Password = model.Password, Platform = model.Platform }; LoginOutput loginResult = await new SessionController().LoginUserName(loginParam); switch (loginResult.Result) { case -1: result.Result = -7; result.Message = "登录账号已停用"; break; case -2: result.Result = -8; result.Message = "登录账号已删除"; break; case -3: result.Result = -9; result.Message = "登录密码输入错误"; break; case -4: result.Result = -10; result.Message = "登录账号不存在"; break; } if (loginResult.Result > 0) //登录成功，值为AccId { result.Result = 0; findCode.IsLogin = true; //更改登录状态 result.Message = "成功登录"; } return result; } }} 6、疑难解答
6.1 #16解答
二维码中可以加入图片吗？文中二维码 有个图片上面有 M 字母是怎么处理的？
第一个问题：是把存储图片信息存储到二维码中，手机扫码可以识别吧？这个问题涉及到二维码的存储容量，理论上如果二维码的存储容量足够大，可把图片序列化成01的字符进行存储，扫描就可以识别。但二维码有不同的标准，不同标准下数据容量是不同的。建议不要存储图片，详情可查看知乎，了解一下：http://www.zhihu.com/question/20387257
M字母是一个图片，来自http://www.dcloud.io/，只需要把想放的图放到已生成的二维码中间即可，但图片不宜过大，调试一下，用手机识别一下。有兴趣的朋友可以查看草榴二维码：http://cli.im/
6.2 #17解答
疑问： 输入参数有 用户名和密码，那个是每次都需要用户输入的？还是通过扫描二维码获得的？ 还是哪种方式来给 输入参数的用户名和密码赋值的。我想了解楼主是按哪种方式实现的呢？
首先要理解一下扫描登录的流程，【M】扫描二维码只获取相关【B】的唯一标识符信息，扫码之后，【M】（前提是【M】必须已经登录成功）发送用户名密码UUID到【S】进行一系列的验证；为了提高安全性，在【M】提交数据时，对密码进行md5时间戳加密。
6.3 #23解答
可以这样不 在手机端随机生成码 加密存在手机上并上传服务器 后端生成带有该码加时间的二维码 网页扫的时候对比登陆
要实现扫描登录，弄懂一个问题：为什么扫描二维码之后，提交给服务器的数据就是当前页面所需的呢？在本项目中，是通过SignalR的固有通信connectionid来确认的。你所说的流程应该如下：
在本流程图中，比方案中的步骤延长了；在Step2中，会出现问题，如何将【M】推送过来的UUID推送到你看到的【B】端？显然缺少纽带。本方法是不可行的。
7、总结与下载
二维码应用比较广泛，记得去北京的故宫旁边的中山公园，里面的古树也有二维码，扫描可查看相关联信息。紧紧对于二维码而言就是存储有限信息，但就是这有限的信息，可以将庞大的信息系统连接一起，所用的应用不是前沿技术的突破，而是我们思考问题方式的转变、思维角度的变化。由于二维码具有信息存储的独特性，可在以下方面应用：
由于最近在做短信业务平台，将二维码应用到营销管理中，每个业务人员具有独立的推广二维码，客户扫码可进行短信测试，若注册成为会员则就是本业务人员的直属客户，可查看《二维码在短信业务应用的初步构思》。
最后，上传《基于SignalR的消息推送与二维码描登录实现》主要文件下载：signalrqrcode
四 : 公众号二维码无法扫描登录 公众狗今天放假？
11月11日上午，大量公号主反映，在登陆微信公众号后台时，验证的二维码无法显示，导致无法进入微信公众号后台。对此，@腾讯张军 在微博回应：开发哥正在紧急修复。截止上午11点左右，该问题已全面修复。现在已经能够正常登陆。
五 : 微信扫描二维码登录网页是什么原理？
我个人开发过程一般是和产品说，『你们提业务要求、交互方式、性能[www.61k.com]要求等就好，技术方案我们会综合开发时间、系统架构等因素考虑』。
恰好我之前也花过几个小时做过类似的验证登录过程，这里作为探讨，把产品同学的回答做个引用，解释一下其中『不技术』的地方。
1. 每打开一次微信网页版页面的时候会随机生成一个含有唯一 uid 的二维码，每次刷新页面都会不一样（这个可以保证一个 uid 只可以绑定一个账号和密码，如果一个 uid 可以绑定多个账号和密码，那么很可能你的电脑会登陆别人的微信哦）；
确实返回了唯一 id，但目的是为了识别用户身份，而且实际上打开这个页面的时候浏览器已经和 Server 创建了一个长连接等待确认信息。
查看http://wx.qq.com的源码可以轻易看出来，其实这个页面加载完毕的同时，也已经把很多登录后才需要的相关资源都加载进来了，然后会开启一个长连接等待登录用户的信息。
2. 当用户使用登陆后的微信扫描该二维码的时候，会将这个 id 和手机上的微信账号及密码绑定，并上传到微信网页版服务器；
先上个图：
二维码样例：http://weixin.qq.com/x/ARmFYVvUzczwBl9u6Y1I，利用我查查之类的二维码应用可以轻易得到类似这样的地址，但并不会自动打开该地址，微信实际上针对http://weixin.qq.com/x/开头的地址做了特殊处理，会自动获取相关信息并提示确认。 在手机版微信访问这个页面进行确认时，Server 已经同时获得了客户端信息，并通过之前保持的长连接告知浏览器。
3.微信网页版页面每隔 1 秒或 2 秒会 get 请求该 id 对应的微信账号及密码，如果 id 绑定上了微信账号和密码，那么就可以请求到账号和密码，就可以自动登陆了。
浏览器展示完长连接里包含的用户信息（头像等）后，会新开一个长连接等待客户端的确认操作，其 URL 类似https://login.weixin.qq.com/cgi-bin/mmwebwx-bin/login?uuid=794ecedd804f47&tip=1&_=1395748413642。从安全的角度来说，无论如何都不会让客户端获得微信帐号和密码，要知道，密码这玩意腾讯自己都不敢保存（有兴趣的同学可以自行了解下 CSDN 明文密码泄露事件），肯定是不可能返回给浏览器的。
而且从体感来看，怎么着都不可能是页面 1-2 秒 GET 请求的，实际是通过长连接，近乎实时的获得信息。 对于验证过程，Open API 一般是通过授权令牌（Token）来解决的，原理是当用户通过授权后，分配一个限定条件下的令牌（如限制本机访问、限制授权有效时间、限制同时登录设备数等），使获得授权的用户仅在有限的前提下能访问相关服务。 像计算机休眠后曾做的授权就自动收回了，这样就有效的避免了在别人电脑上（尤其是网吧）打开，但忘记关闭或退出这类安全问题了。
同时，整个授权过程的验证部分在手机端进行，有效杜绝了 PC 上泛滥的各类木马、『安全工具』的监听，大大降低了帐号被盗的风险。
整个核心过程是：浏览器获得一个临时 id，通过长连接等待客户端扫描带有此 id 的二维码后，从长连接中获得客户端上报给 server 的帐号信息进行展示，并在客户端点击确认后，获得服务器授信的令牌，进行随后的信息交互过程。 在超时、网络断开、其他设备上登录后，此前获得的令牌或丢失、或失效，有效完成了安全防护。
本文标题：扫描二维码登录原理-二维码的生成细节和原理(1)61阅读| 精彩专题| 最新文章| 热门文章| 苏ICP备13036349号-1