iOS--React Native手势密码插件

发表于 | 分类于
数字统计 2,101字 | 阅读时长 9分钟

一：介绍

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加密、密码本地保存等功能，这些功能加通过在PwdLockPlugin类中封装的SetPwdLock方法和DecryptLock方法来提供给Javascript开发使用。

具体的实现思路如下：

  1. 新建PwdLockPlugin类，实现RCTBridgeModule协议

  2. 添加RCT_EXPORT_MODULE()宏

  3. 添加React Native跟控制器

  4. 声明被JavaScript 调用的方法

  5. 新建设置密码控制器

  6. 新建验证密码控制器

  7. 设置手势密码

  8. 验证手势密码

  9. 密码sm3加密

  10. Javascript调用浏览器方法

三：实现源码分析

实现源码分析是根据上面列出的具体实现思路来为大家解刨内部的实现流程及核心代码分析。

1. 新建PwdLockPlugin类，实现RCTBridgeModule协议

新建继承NSObject的PwdLockPlugin类，并实现RCTBridgeModule协议

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

2. 添加RCT_EXPORT_MODULE()宏

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

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

3. 添加React Native跟控制器

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

1
2
// PwdLockPlugin.m
#import <React/RCTUtils.h>

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

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
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
// PwdLockPlugin.m
#import "PwdLockPlugin.h"
#import <React/RCTUtils.h>
@implementation PwdLockPlugin
RCT_EXPORT_MODULE(PwdLockPlugin);
//设置手势密码
RCT_EXPORT_METHOD(SetPwdLock:(RCTResponseSenderBlock)sucessCallback failCallback:(RCTResponseSenderBlock)failCallback)
{
        NSLog(@"调起设置密码方法");
	    dispatch_queue_t queue = dispatch_get_main_queue();
	    dispatch_async(queue, ^{
			[CLLockVC showSettingLockVCInVC:RCTPresentedViewController() successBlock:^(CLLockVC *lockVC, NSString *pwd) {
				[lockVC dismiss:0.0f];
				sucessCallback(@[@{@"status":@"1",@"data":@"密码设置成功"}]);
                CIBNSLog(@"%@",[self jsonStringWithDict:@{@"status":@"1",@"data":@"密码设置成功"}]);
				//存储密码
                pwd = [CLLockVC sm3:pwd];
				[CoreArchive setStr:pwd key:CoreLockPWDKey];
			}];
		});
}

//验证手势密码
RCT_EXPORT_METHOD(DecryptLock:(RCTResponseSenderBlock)sucessCallback failCallback:(RCTResponseSenderBlock)failCallback)
{
        NSLog(@"调起验证密码方法");
		dispatch_queue_t queue = dispatch_get_main_queue();
		dispatch_async(queue, ^{
		[CLLockVC showVerifyLockVCInVC:RCTPresentedViewController() forgetPwdBlock:^{
			failCallback(@[@{@"resultCode":@"-1",@"resultMessage":@"手势密码三次验证失败"}]);
		} successBlock:^(CLLockVC *lockVC, NSString *pwd) {
			[lockVC dismiss:0.0f];
			sucessCallback(@[@{@"status":@"1",@"data":@"手势密码验证成功"}]);
		}];
		});
}
@end

5. 新建设置密码控制器

设置密码控制器是由3乘3的9个可触摸按钮实现，用户可以通过滑动屏幕来触动屏幕按钮，每个按钮有自己特有的编号（编号为0-9），通过触动按钮的先后顺序来记录手势密码，并将密码存储在本地。

核心源码如下：

1
2
3
4
5
6
7
+(instancetype)showSettingLockVCInVC:(UIViewController *)vc successBlock:(void(^)(CLLockVC *lockVC,NSString *pwd))successBlock{
    CLLockVC *lockVC = [self lockVC:vc];
    lockVC.title = @"设置密码";
    lockVC.type = CoreLockTypeSetPwd;
    lockVC.successBlock = successBlock;
    return lockVC;
}

效果如下图：

1.png

6. 新建验证密码控制器

验证密码控制器是由3乘3的9个可触摸按钮实现，用户可以通过滑动屏幕来触动屏幕按钮，每个按钮有自己特有的编号（编号为0-9），通过触动按钮的先后顺序来记录手势密码，通过和本地存储的密码进行对比验证是否一致，判断是否通过验证。

核心源码如下：

1
2
3
4
5
6
7
8
+(instancetype)showVerifyLockVCInVC:(UIViewController *)vc forgetPwdBlock:(void(^)())forgetPwdBlock successBlock:(void(^)(CLLockVC *lockVC, NSString *pwd))successBlock{
    CLLockVC *lockVC = [self lockVC:vc];
    lockVC.title = @"手势解锁";
    lockVC.type = CoreLockTypeVeryfiPwd;
    lockVC.successBlock = successBlock;
    lockVC.forgetPwdBlock = forgetPwdBlock;
    return lockVC;
}

效果如下图：

2.png

7. 设置手势密码

设置手势密码的滑动实现流程如下：

    1. 第一次滑动设置
    1. 再次确认滑动设置
    1. 检测密码长度是否符合要求（至少为四个点）
    1. 判断两次设置的密码是否一致
    1. 如果密码一致提示设置成功
    1. 如果不一致提示再次输入
    1. 将密码存储在本地

核心源码如下：

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
//第一次滑动设置
self.lockView.setPWBeginBlock = ^(){
    [self.label showNormalMsg:CoreLockPWDTitleFirst];
};
//再次确认滑动设置
self.lockView.setPWConfirmlock = ^(){
    [self.label showNormalMsg:CoreLockPWDTitleConfirm];
};
//检测密码长度是否符合要求（至少为四个点）
self.lockView.setPWSErrorLengthTooShortBlock = ^(NSUInteger currentCount){
    [self.label showWarnMsg:[NSString stringWithFormat:@"请连接至少%@个点",@(CoreLockMinItemCount)]];
};
//判断两次设置的密码是否一致
self.lockView.setPWSErrorTwiceDiffBlock = ^(NSString *pwd1,NSString *pwdNow){
    [self.label showWarnMsg:CoreLockPWDDiffTitle];
    self.navigationItem.rightBarButtonItem = self.resetItem;
};
//如果密码一致提示设置成功
self.lockView.setPWFirstRightBlock = ^(){
    [self.label showNormalMsg:CoreLockPWDTitleConfirm];
};
//如果不一致提示再次输入
self.lockView.setPWTwiceSameBlock = ^(NSString *pwd){
    [self.label showNormalMsg:CoreLockPWSuccessTitle];
    //将密码存储在本地
    [CoreArchive setStr:pwd key:CoreLockPWDKey];
    self.view.userInteractionEnabled = NO;
    if(_successBlock != nil) _successBlock(self,pwd);
    if(CoreLockTypeModifyPwd == _type){
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(.5f * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            [self.navigationController popViewControllerAnimated:YES];
        });
    }
};

8. 验证手势密码

验证手势密码的滑动实现流程如下：

    1. 滑动输入密码
    1. 检测密码长度是否符合要求（至少为四个点）
    1. 取出本地存储的密码
    1. 判断输入的密码和本地密码是否一致
    1. 如果一致返回验证成功
    1. 如果不一致提示重新验证

核心源码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//滑动输入密码
self.lockView.verifyPWBeginBlock = ^(){
    [self.label showNormalMsg:CoreLockVerifyNormalTitle];
};
//检测密码长度是否符合要求（至少为四个点）
self.lockView.verifyPwdBlock = ^(NSString *pwd){
    //取出本地存储的密码
    NSString *pwdLocal = [CoreArchive strForKey:CoreLockPWDKey];
    BOOL res = [pwdLocal isEqualToString:pwd];
    //判断输入的密码和本地密码是否一致
    if(res){
        [self.label showNormalMsg:CoreLockVerifySuccesslTitle];
    }else{
        [self.label showWarnMsg:CoreLockVerifyErrorPwdTitle];
    }
    return res;
};

9. 密码sm3加密

对密码进行sm3加密，可以保证密码在传输过程中安全传输，实现源码如下：

1
2
3
4
5
6
7
8
+ (NSString *) sm3:(NSString *) input
{
    NSData *inputData = [input dataUsingEncoding:NSUTF8StringEncoding];
    NSData *outputData = [PwdLockSM3Coded sm3_hashWithPainData:inputData];
    NSString *outputString = [CLLockVC convertDataToHexStr:outputData];
    NSString *upper = [outputString uppercaseString];
    return upper;
}
10. Javascript调用浏览器方法

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { NativeModules } from "react-native";
const PwdLockPlugin = NativeModules.PwdLockPlugin;
//设置手势密码
PwdlockPlugin.SetPwdLock((msg) => {
                                         Alert.alert(JSON.stringify(msg));

                                         },(err) => {
                                         Alert.alert(JSON.stringify(err));
                                         });
//验证手势密码
PwdlockPlugin.DecryptLock((msg) => {
                                         Alert.alert(JSON.stringify(msg));

                                         },(err) => {
                                         Alert.alert(JSON.stringify(err));
                                         });

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

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

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

公众号：网罗开发

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

本文标题:iOS--React Native手势密码插件

文章作者:Swift社区

发布时间:2018年12月16日 - 17:12

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

原始链接:https://fanbaoying.github.io/iOS-React-Native手势密码插件/

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

坚持原创技术分享，您的支持将鼓励我继续创作！
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多