IOS 图形验证码的封装

开发背景

现在越来越多的app注重安全性能的提升,其中方式恶意注册就是一个方面,为了控制竞争对手恶意注册,在登录界面做一些安全设置越发重要,常见的方式有:图形验证码,短信验证码,和语音验证码,其中短信和语音验证安全性能较高,但是需要服务商并且是收费的那这里不做说明,本章重点介绍图形验证.

开发思路

我们常见的图形验证码通常都是一串数字和字母的结合,如图

这里涉及到图形的绘制,然后随机生成一些字符串,以及随机生成的背景颜色,底图杂纹.

代码示例

下面我们开始上代码:

1: 我们首先要初始化一个数组,里面来存储我们要生成的验证码元素,这里以一个有大小写和数字的验证码为例

- (void)changeCodeStr{    self.textArray = [[NSArray alloc] initWithObjects:@"0",@"1",@"2",@"3",@"4",@"5",@"6",@"7",@"8",@"9",@"A",@"B",@"C",@"D",@"E",@"F",@"G",@"H",@"I",@"J",@"K",@"L",@"M",@"N",@"O",@"P",@"Q",@"R",@"S",@"T",@"U",@"V",@"W",@"X",@"Y",@"Z",@"a",@"b",@"c",@"d",@"e",@"f",@"g",@"h",@"i",@"j",@"k",@"l",@"m",@"n",@"o",@"p",@"q",@"r",@"s",@"t",@"u",@"v",@"w",@"x",@"y",@"z",nil];    for(NSInteger i = 0; i < 4; i++)    {        NSInteger index = arc4random() % ([self.textArray count] - 1);        NSString *oneText = [self.textArray objectAtIndex:index];        self.imageCodeStr = (i==0)?oneText:[self.imageCodeStr stringByAppendingString:oneText];    }    if (self.bolck) {      //将验证码通过block的方式传出去        self.bolck(self.imageCodeStr);    }}

2.我们可以将这个图形验证码的View分成四份,每份上增加一个label,label的位置随机生成,取出验证码的字符串中每个字符，并将字符写在lable上。

-(void)initImageCodeView{if (_bgView) {        [_bgView removeFromSuperview];    }    _bgView = [[UIView alloc]initWithFrame:self.bounds];    [self addSubview:_bgView];    [_bgView setBackgroundColor:[self getRandomBgColorWithAlpha:0.5]];    CGSize textSize = [@"W" sizeWithAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:20]}];    //每个label能随机产生的位置的point.x的最大范围    int randWidth = (self.frame.size.width)/self.imageCodeStr.length - textSize.width;  //每个label能随机产生的位置的point.y的最大范围    int randHeight = self.frame.size.height - textSize.height;    for (int i = 0; i<self.imageCodeStr.length; i++) {        //随机生成每个label的位置CGPoint(x,y)        CGFloat px = arc4random()%randWidth + i*(self.frame.size.width-3)/self.imageCodeStr.length;        CGFloat py = arc4random()%randHeight;        UILabel * label = [[UILabel alloc] initWithFrame: CGRectMake(px+3, py, textSize.width, textSize.height)];        label.text = [NSString stringWithFormat:@"%C",[self.imageCodeStr characterAtIndex:i]];        label.font = [UIFont systemFontOfSize:20];        //label是否是可以是斜的，isRotation这个属性暴露在外面，可进行设置        if (self.isRotation) {            double r = (double)arc4random() / ARC4RAND_MAX * 2 - 1.0f;//随机生成-1到1的小数            if (r>0.3) {                r=0.3;            }else if(r<-0.3){                r=-0.3;            }            label.transform = CGAffineTransformMakeRotation(r);        }        [_bgView addSubview:label];    }

3..随机获取view中的两个点画线，使用UIBezierPath画两点的线，根据需要随机画几条线,这几条线作为底图。

for (int i = 0; i<10; i++) {     UIBezierPath *path = [UIBezierPath bezierPath];     CGFloat pX = arc4random() % (int)CGRectGetWidth(self.frame);     CGFloat pY = arc4random() % (int)CGRectGetHeight(self.frame);     [path moveToPoint:CGPointMake(pX, pY)];     CGFloat ptX = arc4random() % (int)CGRectGetWidth(self.frame);     CGFloat ptY = arc4random() % (int)CGRectGetHeight(self.frame);     [path addLineToPoint:CGPointMake(ptX, ptY)];     CAShapeLayer *layer = [CAShapeLayer layer];     layer.strokeColor = [[self getRandomBgColorWithAlpha:0.2] CGColor];//layer的边框色     layer.lineWidth = 1.0f;     layer.strokeEnd = 1;     layer.fillColor = [UIColor clearColor].CGColor;     layer.path = path.CGPath;     [_bgView.layer addSublayer:layer]; }

4.随机获取背景颜色

-(UIColor *)getRandomBgColorWithAlpha:(CGFloat)alpha{    float red = arc4random() % 100 / 100.0;    float green = arc4random() % 100 / 100.0;    float blue = arc4random() % 100 / 100.0;    UIColor *color = [UIColor colorWithRed:red green:green blue:blue alpha:alpha];    return color;}

5.刷新验证码的操作方法，这个是暴露在外面的的方法，做刷新调用。

-(void)freshVerCode{    [self changeCodeStr];    [self initImageCodeView];}

那么以上就是一个图形验证码的代码,大家可以参照以上的代码自己写出一个图形验证码,封装成一个view也方便自己以后调用

注意

如果有些朋友不想自己去封装,或者需要完整的demo,请移步到本人的GitHub上,那里提供完整的demo以及封装好可以直接调用的图形验证码,GitHub地址: https://github.com/WJeaner/WKVerCodeView.git