利用一登给你的react-native项目增加刷脸登录功能之iOS篇

团队里接到一个双端app的外包项目,需要刷脸登录功能。

双端嘛,就想到用react-native写会省很多人力。

但是SDK都是原生的,所以本文要讲的是在原生处完成刷脸登录后就跳转到react的页面。从而让你的react项目有刷脸登录功能。

1.创建react-native项目

1.创建完成后的目录是这样的:


利用一登给你的react-native项目增加刷脸登录功能之iOS篇_第1张图片
react-native项目目录

2.打开MyApp.xcodeproj,进到AppDelegate.m


利用一登给你的react-native项目增加刷脸登录功能之iOS篇_第2张图片
AppDelegate.m

这里其实是设置程序启动后就直接来到react的窗口,我们把它抽出来,然后改为iOS原生那样子的加载方式。

新建一个Login.storyboard的故事板,然后添加一个控制器,在控制器添加一个按钮监听登录事件。


利用一登给你的react-native项目增加刷脸登录功能之iOS篇_第3张图片
创建Login.storyboard,且添加按钮

然后记住把Main interface设置为Login,即程序启动时进入刚刚我们创建的登录页面,而不是react页面。


利用一登给你的react-native项目增加刷脸登录功能之iOS篇_第4张图片
设置Main interface设置为Login

3.把appdelegate.m文件里加载react-native的代码抽到登录页面的控制器,记住也要把头文件搬过去。

把这部分代码剪切


利用一登给你的react-native项目增加刷脸登录功能之iOS篇_第5张图片
react的加载

放到LoginViewController里,写成一个gotoReactNative的方法


利用一登给你的react-native项目增加刷脸登录功能之iOS篇_第6张图片
gotoReactNative方法

其中launchOptions会报错,改为nil就行。还有用UIApplication.sharedApplication.delegate获取窗口把根控制器换掉就OK啦!


利用一登给你的react-native项目增加刷脸登录功能之iOS篇_第7张图片
LoginViewController的头文件

然后在登录按钮里直接调用这个方法,就完成里从原生登录完,跳转到react-native里的操作。


利用一登给你的react-native项目增加刷脸登录功能之iOS篇_第8张图片
登录按钮的监听

到这里已经完成了在原生登录完跳到react-native里这样一个需求。要加入人脸识别,需要借助第三方,请往下看。

2.注册一登开发者账号

1.注册地址:http://www.superid.me/developer/index.html

2.创建一个应用,iOS里的Bundle Identifier填写刚刚react-native项目iOS里的Bundle Identifier。


利用一登给你的react-native项目增加刷脸登录功能之iOS篇_第9张图片
创建应用

3.下载SDK和将SDK导入react-native的iOS项目里。下载地址:https://github.com/SuperID/superid-ios-sdk


利用一登给你的react-native项目增加刷脸登录功能之iOS篇_第10张图片
导入SDK

直接把SDK拖到项目里就行。参考文档:http://www.superid.me/developer/document-ios/ios_quickstart.html

4.项目中添加-ObjC、-lstdc++编译选项。


利用一登给你的react-native项目增加刷脸登录功能之iOS篇_第11张图片
配置SDK

5.iOS10 适配,增加相机、相册权限说明.在项目 Info.plist 源码文件中拷贝入下内容:

NSCameraUsageDescription

需要使用您的相机进行刷脸认证

NSPhotoLibraryUsageDescription

一登需要访问您的相册

6.初始化 SDK

首先:在AppDelegate.m文件中,导入 SuperID SDK头文件。

#import"SIDHeader.h"

接着,在 app delegate 方法中添加如下初始化代码:

- (BOOL)application:(UIApplication *)applicationdidFinishLaunchingWithOptions:(NSDictionary *)launchOptions {  

  [SuperIDregisterAppWithAppID:@" AppID "withAppSecret:@" AppSecret "];//开启一登SDK的调试模式,开发者在Release时,将该模式设置为NO.

[SuperIDsetDebugMode:YES];//设置一登 SDK 的语言模式,默认为自动模式。

[SuperIDsetLanguageMode:SIDAutoMode];

returnYES;

}

将appid和appsecret换成你一登应用的appid和appsecret。

7.在LoginViewCtroller里添加一个faceLogin的方法,加入以下代码:

利用一登给你的react-native项目增加刷脸登录功能之iOS篇_第12张图片
faceLogin方法

代码如下:

-(void)faceLogin{

[SIDCoreLoginKitshowLoginViewControllerWithAppUserInfoModel:nilresponseBlock:^(NSDictionary*result,NSError*error) {

if(!error) {

//授权登录成功

NSLog(@"userInfo:%@", result);

NSLog(@"登录成功!");

[selfgotoReactNative];

}else{

//授权登录失败

NSLog(@"Login Fail Error =%ld,%@",(long)[errorcode],[errorlocalizedDescription]);

NSLog(@"登录失败!");

}

}];

}

8.在刚刚的登录按钮里点击监听faceLogin这个方法。


利用一登给你的react-native项目增加刷脸登录功能之iOS篇_第13张图片
登录按钮里点击监听faceLogin这个方法

到这里,刷脸登录完成跳转到react-native里就大功告成啦!!!

你可以那真机开开心心测试一下!

注意:一定要拿真机测试!!!一定要拿真机测试!!!一定要拿真机测试!!!

因为这里用到了摄像头!!!

3.效果图:


利用一登给你的react-native项目增加刷脸登录功能之iOS篇_第14张图片
效果图

你可能感兴趣的:(利用一登给你的react-native项目增加刷脸登录功能之iOS篇)