How to use Touch ID Authentication To Your Ionic Application framework
In this tutorial I will teach you how to authenticate user with Touch ID, with Ionic framework.
Time to build app : 10 -15 minutes
Complexity : Normal
Platform : IOS
IONIC VERSION : V1
First thing first, create a new ionic project by typing ionic command and add IOS platform.
ionic start IonicProject blank
cd IonicProject
ionic platform add ios
This tutorial is only works with ios devices with Touch ID. So you should be working on MAC OS.
Now we need to install the touch id plugin into our project:
cordova plugin add cordova-plugin-touchid
Add ngCordova in your project, because you are using ionic and you want to do things in angular way. So download ngCordova, copy ng-cordova.min.js into your project’s www/js directory, and add the following to your www/index.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
Note that we include ngCordova script before cordova.js. It is important, else you get an error in your project. In app.js, inject ngCordova injector. Now it look like
angular.module('starter', ['ionic', 'ngCordova'])
We successfully setup ngCordova and ready to go. In same file add following controller:
.controller("ExamplTouchIDController", function($scope, $ionicPlatform, $cordovaTouchID) {
$ionicPlatform.ready(function() {
$cordovaTouchID.checkSupport().then(function() {
$cordovaTouchID.authenticate("You must authenticate").then(function() {
alert("The authentication was successful");
}, function(error) {
console.log(JSON.stringify(error));
});
}, function(error) {
console.log(JSON.stringify(error));
});
});
})
Like most cordova plugins, this plugin also use device native functions that needs to be ready before trying to use it. So we place our code inside the $ionicPlatform.ready. Before check use this functionality, we must sure that our device supports Touch ID. So we use $cordovaTouchID.checkSupport method. After fully sure, we ask for authentication through the $cordovaTouchID.authenticate method. use this controll to partial or directly index file for authentication. To use this with index file, assign controller in index. Now your index file look like this :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content ng-controller="ExamplTouchIDController">
</ion-content>
</ion-pane>
</body>
</html>
Run your project and you will get expected result.
Hope this tutorial will help in your project. If you have ant problem, please leave your problem in comment section.
Note that we include ngCordova script before cordova.js. It is important, else you get an error in your project. In app.js, inject ngCordova injector. Now it look like
angular.module('starter', ['ionic', 'ngCordova'])
We successfully setup ngCordova and ready to go. In same file add following controller:
.controller("ExamplTouchIDController", function($scope, $ionicPlatform, $cordovaTouchID) {
$ionicPlatform.ready(function() {
$cordovaTouchID.checkSupport().then(function() {
$cordovaTouchID.authenticate("You must authenticate").then(function() {
alert("The authentication was successful");
}, function(error) {
console.log(JSON.stringify(error));
});
}, function(error) {
console.log(JSON.stringify(error));
});
});
})
Like most cordova plugins, this plugin also use device native functions that needs to be ready before trying to use it. So we place our code inside the $ionicPlatform.ready. Before check use this functionality, we must sure that our device supports Touch ID. So we use $cordovaTouchID.checkSupport method. After fully sure, we ask for authentication through the $cordovaTouchID.authenticate method. use this controll to partial or directly index file for authentication. To use this with index file, assign controller in index. Now your index file look like this :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content ng-controller="ExamplTouchIDController">
</ion-content>
</ion-pane>
</body>
</html>
Run your project and you will get expected result.
Hope this tutorial will help in your project. If you have ant problem, please leave your problem in comment section.
0 comments