iOS-React Native 原生密码键盘插件

一:介绍

React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安卓两大平台。RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

在React Native移动平台项目开发中,除了React Native 提供的封装好的部分插件和原声组建外,在实际的项目中还需要使用到很多其他的插件,比如网络请求、数据库、相机、相册、通讯录、视频播放器、浏览器、蓝牙连接、图片处理、消息推送、地图、统计、埋点等等APP开发中需要用到的功能,都为IDE开发平台提供封装好的插件,以便项目开发使用。

另外,这些博文都是来源于我日常开发中的技术总结,在时间允许的情况下,我会针对技术点分别分享iOS、Android两个版本,如果有其他技术点需要,可在文章后留言,我会尽全力帮助大家。这篇文章重点介绍原生密码键盘插件的开发与使用

二:实现思路分析

原生密码键盘插件是需要实现自定以键盘包含数字、大写字母、小写字母、特殊字符四种切换方式,并且需要实现随机键盘和非随机键盘模式。
实现根据密码包含数字、大写字母、小写字母、特殊字符种类判断密码强度和长度。
为了密码的安全考虑,实现对输出密码进行SM3加密。
实现键盘类型,其中包括以下6种类型:

FBYCustomKeyBordType_NumWord,//数字及字母键盘
FBYCustomKeyBordType_WordNum,//字母及数字键盘
FBYCustomKeyBordType_NumWordSymbol,//数字及字母,标点键盘
FBYCustomKeyBordType_WordNumSymbol,//字母及数字,标点键盘
FBYCustomKeyBordType_Num,//仅数字键盘
FBYCustomKeyBordType_Word//仅字母键盘

基本键盘截图如下:
66.png

实现键盘视图显示类型,其中包括以下5种类型:

FBYCustomKeyBordShowType_Common,//普通
FBYCustomKeyBordShowType_Text,//文本框
FBYCustomKeyBordShowType_Pass,//密码
FBYCustomKeyBordShowType_PayPass,//支付密码格
FBYCustomKeyBordShowType_NoTitle//无标题

带有文本框的键盘:
88.png

有支付密码格的键盘:
99.png

打开默认浏览器和打开自定义浏览器,具体的实现思路如下:

  1. 新建CustomKeyboard类,实现RCTBridgeModule协议

  2. 添加RCT_EXPORT_MODULE()宏

  3. 添加React Native跟控制器

  4. 声明被JavaScript 调用的方法

  5. 新建数字键盘FBYNumKeyBord类,实现相应视图及功能

  6. 新建字母键盘FBYWordKeyBord类,实现相应视图及功能

  7. 新建纯数字键盘FBYNumOnlyKeyBord类,实现相应视图及功能

  8. 新建符号键盘FBYSymbolKeyBord类,实现相应视图及功能

  9. 新建符号键盘FBYCustomKeyBord类,实现键盘类型切换功能

  10. 实现根据密码判断密码强度和长度功能

  11. 实现输出密码SM3加密功能

  12. 根据传参分析调用自定义键盘

  13. Javascript调用浏览器方法

三:实现源码分析

1. 新建CustomKeyboard类,实现RCTBridgeModule协议

新建继承NSObject的CustomKeyboard类,并实现RCTBridgeModule协议

1
2
3
4
5
6
// CustomKeyboard.h
#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
#import <UIKit/UIKit.h>
@interface CustomKeyboard : NSObject<RCTBridgeModule>
@end

2. 添加RCT_EXPORT_MODULE()宏

为了实现RCTBridgeModule协议,CustomKeyboard的类需要包含RCT_EXPORT_MODULE()宏。
并在这个宏里面添加一个参数“KeybordPlugin”用来指定在 JavaScript 中访问这个模块的名字。
如果你不指定,默认就会使用这个 Objective-C 类的名字。
如果类名以 RCT 开头,则 JavaScript 端引入的模块名会自动移除这个前缀。

1
2
3
4
5
// CustomKeyboard.m
#import "CustomKeyboard.h"
@implementation CustomKeyboard
RCT_EXPORT_MODULE(KeybordPlugin);
@end

3. 添加React Native跟控制器

如果不添加React Native跟控制器,view将不能正常显示出来,实现方法如下:

1
2
3
4
5
6
// CustomKeyboard.m
#import "CustomKeyboard.h"
#import <React/RCTUtils.h>
@implementation CustomKeyboard
RCT_EXPORT_MODULE(KeybordPlugin);
@end

引入之后,在视图初始化或者显示的时候,按照如下方法调用即可

1
UIViewController *vc = RCTPresentedViewController();

4. 声明被JavaScript 调用的方法

React Native需要明确的声明要给 JavaScript 导出的方法,否则 React Native 不会导出任何方法。声明通过RCT_EXPORT_METHOD()宏来实现:

1
2
3
4
5
6
7
8
9
10
11
12
// CustomKeyboard.m
#import "CustomKeyboard.h"
#import <React/RCTUtils.h>
@implementation CustomKeyboard
RCT_EXPORT_MODULE(KeybordPlugin);
RCT_EXPORT_METHOD(onKeyboard:(NSDictionary *)arguments
:(RCTResponseSenderBlock)sucessCallback
:(RCTResponseSenderBlock)failCallback)
{
NSLog(@"调起原生密码键盘方法");
}
@end
5. 新建数字键盘FBYNumKeyBord类,实现相应视图及功能

在数字键盘FBYNumKeyBord类中,视图包含0-9数字按钮、ABC字母切换按钮、@%#特殊字符切换按钮、回删按钮、完成按钮和取消按钮。
实现相应按钮的点击功能以及实现随机键盘和非随机键盘两种模式。
效果图:

number.png

核心代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//FBYNumKeyBord.m
- (void)setRandom:(BOOL)random{
_random = random;
if (random) {
NSMutableArray *newArray = [NSMutableArray arrayWithArray:self.numArray];
for(int i = 0; i< self.numArray.count; i++)
{
int m = (arc4random() % (self.numArray.count - i)) + i;
[newArray exchangeObjectAtIndex:i withObjectAtIndex: m];
}
self.numArray = newArray;
for (UIButton *btn in self.subviews) {
[btn removeFromSuperview];
}
[self addControl];
}
}

6. 新建字母键盘FBYWordKeyBord类,实现相应视图及功能

在数字键盘FBYWordKeyBord类中,视图包含26个字母按钮、大小写切换按钮、123数字键盘切换按钮、@%#特殊字符切换按钮、回删按钮、完成按钮和取消按钮。
实现相应按钮的点击功能以及实现随机键盘和非随机键盘两种模式。
效果图:

1234.png

核心代码如下:

1
2
3
4
5
6
7
8
9
10
//FBYWordKeyBord.m
for (int i = 0; i< 26; i++) {
FBYCustomKeyBordButton *btn = [FBYCustomKeyBordButton buttonWithTitle:self.wordArray[i] tag:i delegate:self];
[btn addTarget:self action:@selector(btnTouchDown:) forControlEvents:(UIControlEventTouchDown)];
[btn addTarget:self action:@selector(btnTouchCancel:) forControlEvents:(UIControlEventTouchUpInside)];
[btn addTarget:self action:@selector(btnTouchCancel:) forControlEvents:(UIControlEventTouchUpOutside)];
[btn addTarget:self action:@selector(btnTouchCancel:) forControlEvents:(UIControlEventTouchCancel)];
[btnArray addObject:btn];
[self addSubview:btn];
}

7. 新建纯数字键盘FBYNumOnlyKeyBord类,实现相应视图及功能

在数字键盘FBYNumOnlyKeyBord类中,视图包含0-9数字按钮、回删按钮、完成按钮和取消按钮。
实现相应按钮的点击功能以及实现随机键盘和非随机键盘两种模式。
效果图:

0987.png

核心代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//FBYNumOnlyKeyBord.m
for (int i=0;i<self.btnArray.count;i++) {
UIButton *btn =self.btnArray[i];
if(i<9){
btn.frame = CGRectMake(btn.tag % 3 * (btnW ), btn.tag / 3 * (btnH ), btnW, btnH);
}else if (i==9){
btn.frame = CGRectMake( 1 * (btnW ), 3* (btnH ), btnW, btnH);
}else if (i==10){
btn.frame = CGRectMake( 0* (btnW ), 3* (btnH ) , btnW, btnH);

}else if (i==11){
btn.frame = CGRectMake( 2* (btnW ), 3* (btnH ), btnW, btnH);
}else if (i==12){
btn.frame = CGRectMake( 0* (btnW ), 3* (btnH ), btnW, btnH);
}
}

8. 新建符号键盘FBYSymbolKeyBord类,实现相应视图及功能

在数字键盘FBYSymbolKeyBord类中,视图包含30种特殊字符按钮、123数字键盘切换按钮、ABC字母切换按钮、回删按钮、完成按钮和取消按钮。
实现相应按钮的点击功能以及实现随机键盘和非随机键盘两种模式。
效果图:

4321.png

核心代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//FBYSymbolKeyBord.m
- (NSArray *)symbolArray{
if (!_symbolArray) {
_symbolArray = @[@"*",@"/",@":",@";",@"(",@")",@"[",@"]",@"$",@"=",@"!",@"^",@"&",@"%",@"+",@"-",@"¥",@"?",@"{",@"}",@"#",@"_",@"\\",@"|",@"~",@"`",@"∑",@"€",@"£",@"。"];
}
return _symbolArray;
}

- (void)addControl{
NSMutableArray *btnArray = [NSMutableArray array];
for (int i = 0; i < 30; i++) {
FBYCustomKeyBordButton *btn = [FBYCustomKeyBordButton buttonWithTitle:self.symbolArray[i] tag:i delegate:self];
[btn addTarget:self action:@selector(btnTouchDown:) forControlEvents:(UIControlEventTouchDown)];
[btn addTarget:self action:@selector(btnTouchCancel:) forControlEvents:(UIControlEventTouchUpInside)];
[btn addTarget:self action:@selector(btnTouchCancel:) forControlEvents:(UIControlEventTouchUpOutside)];
[btn addTarget:self action:@selector(btnTouchCancel:) forControlEvents:(UIControlEventTouchCancel)];
[self addSubview:btn];
[btnArray addObject:btn];
}
}

9. 新建FBYCustomKeyBord类,实现键盘类型切换功能

FBYCustomKeyBord类中根据JS调用键盘时传入的参数,来实现何种键盘模式,实现键盘类型,共有6种类型:数字及字母、字母及数字、数字及字母特殊字符、字母及数字特殊字符、仅数字、仅字母。
键盘视图显示类型,共包括5种类型:普通、文本框、密码、支付密码格、无标题。
核心代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
-(void)setKeybordType:(FBYCustomKeyBordType)keybordType{
_keybordType=keybordType;
[self.numPad removeFromSuperview];
if(_keybordType==FBYCustomKeyBordType_NumWord){
self.numPad.random=self.random;
self.numPad.delegate=self;
[self addSubview:self.numPad];
}else if(_keybordType==FBYCustomKeyBordType_WordNum){
self.wordPad.random=self.random;
self.wordPad.delegate=self;
[self addSubview:self.wordPad];
}else if(_keybordType==FBYCustomKeyBordType_Num){
self.numOnlyPad.random=self.random;
self.numOnlyPad.delegate=self;
[self addSubview:self.numOnlyPad];
}else if(_keybordType==FBYCustomKeyBordType_NumWordSymbol){
self.numPad.random=self.random;
self.numPad.delegate=self;
[self addSubview:self.numPad];
}else if(_keybordType==FBYCustomKeyBordType_Word){
self.wordPad.random=self.random;
self.wordPad.delegate=self;
[self addSubview:self.wordPad];
}else if (keybordType==FBYCustomKeyBordType_WordNumSymbol){
self.wordPad.random=self.random;
self.wordPad.delegate=self;
[self addSubview:self.wordPad];
}
}

10. 实现根据密码判断密码强度和长度功能

根据密码字符串获取其长度,代码如下:

1
2
3
4
5
6
7
8
9
//FBYCustomKeyBord.m
#pragma mark 长度计算
-(NSUInteger)messageLength:(NSString *)message{
NSString *msg=[message copy];

NSUInteger length= msg.length;
NSLog(@"%lu",(unsigned long)length);
return length;
}

根据密码字符串message,通过正则校验,判断字符串中包含几种字符,进而判断其密码强度。
总共是数字、大写字母、小写字母、特殊字符四种状态,包含两种强度为弱,包含三种强度为中,包含四种强度为强,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
//FBYCustomKeyBord.m
#pragma mark 强度计算
-(NSUInteger)messageStrength:(NSString *)message{
NSString *msg=[message copy];
NSUInteger length= msg.length;
BOOL capitalBool = NO;
BOOL lowercaseBool = NO;
BOOL numberBool = NO;
BOOL stringBool = NO;
NSString* result1;
NSString* result2;
NSString* result3;
NSString* result4;
for (int i = 0; i < length; i++) {
char commitChar = [msg characterAtIndex:i];
if((commitChar>64)&&(commitChar<91)){
NSLog(@"字符串中含有大写英文字母");
capitalBool = YES;
}else if((commitChar>96)&&(commitChar<123)){
NSLog(@"字符串中含有小写英文字母");
lowercaseBool = YES;
}else if((commitChar>47)&&(commitChar<58)){
NSLog(@"字符串中含有数字");
numberBool = YES;
}else{
NSLog(@"字符串中含有空格");
stringBool = YES;
}
}
result1 = [NSString stringWithFormat:@"%d",capitalBool];
result2 = [NSString stringWithFormat:@"%d",lowercaseBool];
result3 = [NSString stringWithFormat:@"%d",numberBool];
result4 = [NSString stringWithFormat:@"%d",stringBool];

NSMutableArray* resultArray = [[NSMutableArray alloc] init];
[resultArray addObject:[NSString stringWithFormat:@"%@",result1]];
[resultArray addObject:[NSString stringWithFormat:@"%@",result2]];
[resultArray addObject:[NSString stringWithFormat:@"%@",result3]];
[resultArray addObject:[NSString stringWithFormat:@"%@",result4]];
int intResult=0;
for (int j=0; j<[resultArray count]; j++)
{
if ([[resultArray objectAtIndex:j] isEqualToString:@"1"])
{
intResult++;
}
}
NSUInteger result;
if (intResult == 4){
result = 3;
}else if (intResult == 3){
result = 2;
}else if (intResult == 2){
result = 1;
}else{
result = 0;
}
return result;
}

11. 实现输出密码SM3加密功能

这里的密码加密采用的是国密SM3加密方式,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#pragma mark 加密设置
-(NSString *)encryptMessage:(NSString *)message{
NSString *msg=[message copy];
return [self sm3:msg];
}

#pragma mark - 对字符串做sm3处理
- (NSString *) sm3:(NSString *) input
{
NSData *inputData = [input dataUsingEncoding:NSUTF8StringEncoding];
NSData *outputData = [CustomKBSM3Coded sm3_hashWithPainData:inputData];
//NSString *outputString = [GTMBase64 stringByEncodingData:outputData];
NSString *outputString = [self convertDataToHexStr:outputData];
NSString *upper = [outputString uppercaseString];
return upper;
}

12. 根据传参打开浏览器

此浏览器插件支持打开自定义浏览器和打开默认浏览器,具体使用哪种方法打开浏览器,需要JavaScript通过arguments字典以字段的形式传过来,这里就使用openType字段。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
// CustomKeyboard.m
#import "CustomKeyboard.h"
#import <React/RCTUtils.h>
@interface CustomKeyboard ()<FBYCustomKeyBordDelegate>
@property(strong,nonatomic)RCTResponseSenderBlock sucessCallback;
@property(strong,nonatomic)RCTResponseSenderBlock failCallback;
@property (nonatomic, strong) FBYCustomKeyBord *keyBoard;
@property(assign,nonatomic)FBYCustomKeyBordType keybordType;
@property(assign,nonatomic)FBYCustomKeyBordShowType keybordShowType;
@property(strong,nonatomic)NSString *tag;
@property(strong,nonatomic)NSString *isUp;
@end
@implementation CustomKeyboard
RCT_EXPORT_MODULE(KeybordPlugin);
RCT_EXPORT_METHOD(open:(NSDictionary *)arguments
withCompletionHandler:(RCTResponseSenderBlock)completion
failureHandler:(RCTResponseSenderBlock)failure)
{
dispatch_async(dispatch_get_main_queue(), ^{
self.keyBoard = [FBYCustomKeyBord instance];
self.keyBoard.delegate = self;
self.sucessCallback = sucessCallback;
self.failCallback = failCallback;
NSString *isUp=@"1";
NSString *isRandom=@"0";
NSString *type=@"4";
NSString *showType=@"0";
NSString *isEncrypt=@"0";
//是否是随机键盘
self.keyBoard.random = YES;
self.keybordType = FBYCustomKeyBordType_Num;
self.keybordShowType = FBYCustomKeyBordShowType_Common;
self.keyBoard.keybordType = self.keybordType;
//弹起键盘或收起键盘
self.keyBoard.keybordShowType = self.keybordShowType;
dispatch_async(dispatch_get_main_queue(), ^{
if ((isUp==nil) || isUp.intValue == 1) {
[self.keyBoard popKeyBordInParent:RCTPresentedViewController()];
} else {
[self.keyBoard disappearSwitchBtnClickWithBlock:^{
self.sucessCallback(@[@{SucessReslutCode:@"1",SucessData:@"ok"}]);
CIBNSLog(@"成功调起密码键盘方法");
}];
}
});
});
}
//键盘数据回调
-(void)customKeybord:(FBYCustomKeyBord *)keybord didReturnMessage:(NSString *)message withLength:(NSUInteger)length withStrength:(NSUInteger)strength{
if(self.tag == nil){
self.tag = [CustomKeyboard getSecondTimeStringSince1970];
}
if (![self.isUp isEqualToString:@"0"]) {
self.sucessCallback(@[@{SucessReslutCode:@"1",SucessData:@{@"pwdLength":[NSString stringWithFormat:@"%lu",(unsigned long)length],@"pwdStrong":[NSString stringWithFormat:@"%lu",strength],@"pwdValue":message}}]);
NSLog(@"成功调起密码键盘方法");
}
}

13. Javascript调用浏览器方法

现在从 Javascript 里可以这样调用这个方法:

1
2
3
4
5
6
7
import { NativeModules } from "react-native";
const CustomkeyBoardPlugin = NativeModules.KeybordPlugin;
CustomkeyBoardPlugin.onKeyboard({isRandom:"1",isUp:"1",type:"4",showType:"3"},(msg) => {
Alert.alert(JSON.stringify(msg));
},(err) => {
Alert.alert(JSON.stringify(err));
});

希望可以帮助大家,如有问题可加QQ技术交流群: 668562416

如果哪里有什么不对或者不足的地方,还望读者多多提意见或建议

如需转载请联系我,经过授权方可转载,谢谢

公众号:网罗开发

-------------本文结束感谢您的阅读-------------

本文标题:iOS-React Native 原生密码键盘插件

文章作者:FBY展菲

发布时间:2018年12月08日 - 20:12

最后更新:2018年12月16日 - 18:12

原始链接:https://fanbaoying.github.io/iOS-React-Native-原生密码键盘插件/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

坚持原创技术分享,您的支持将鼓励我继续创作!