Biyometrik Kimlik Doğrulamayı React Native / Expo Uygulamalarınıza Entegre Edin

Apple’ın parmak izi ile kilit açma sistemi.

Parolalar kesinlikle eskisi kadar güvenli değil. Her geçen gün, hack haberlerinde, siber güvenlik dergilerinde yayınlanan yazılarda bunu tekrar ve tekrar görüyoruz. Siber güvenlik, düzenli olarak gerçekleşen ihlaller ile birlikte giderek daha önemli bir konu haline geliyor. Mobil uygulamalara giriş yapmak ve verileri korumak için yeni yolların kullanılması gerektiği bir zorunluluğa dönüşüyor. Bu yöntemlerden bir tanesi de mobil biyometrik kimlik doğrulaması.

Biyometrik kimlik doğrulama günümüzde hızlı, güvenli ve kullanımı kolay bir yöntemdir. Kullanıcılar, parmak izi veya yüz ile kimlik doğrulamayı severler çünkü bu kimlik doğrulama mekanizmaları, cihazlarına minimum çabayla güvenli bir şekilde erişmelerini sağlar. Bu tür bir kimlik doğrulama öncelikli olarak mobil bankacılık ve e-ticaret uygulamalarında kullanılıyor. EyeVerify tarafından hazırlanmış olan “ The Retail Banking Biometrics Confidence Report” (Perakende Bankacılık Biyometri Güven Raporu) adlı çalışma, tüketicilerin yalnızca biyometrik teknolojilerin şifrelerden daha güvenlik doğrulayıcılar olduğuna inanmakla kalmayıp aynı zamanda mobil bankacılık için daha fazla biyometrik seçeneğe sahip olmak istediklerini ortaya koyuyor.

Fotoğrafta, 2016'dan 2022'ye kadar dünya çapında biyometrik veri doğrulama uygulamalarının payını görüyoruz. Biyometrik teknolojiden yararlanan uygulamaların indirme sayısı giderek artmaktadır ve 2020'ye ulaşıldığında biyometrik cihaz kullanıcılarının tahmini olarak %96.8'inin biyometrik doğrulama uygulamaları kullanması bekleniyor.

Neden Expo?

Expo, Android, iOS ve Web için JavaScript ve ReactJS’i kullanarak evrensel native uygulamalar geliştirmenizi sağlayan açık kaynaklı bir platformdur. React Native’in bir tür uzantısı olarak görebilirsiniz. React Native ile mobil uygulama geliştirmeyi kolaylaştıran ve dahili olarak tonlarca bileşen ve kütüphane sunan bir sistemdir. İçerisinde yerel API’lere erişim sağlayabileceğiniz, Facebook ile oturum açmaya yardımcı olacak, Native kod yazmanıza gerek olmadan JavaScript’te kalmanızı sağlayacak kütüphaneler bulunmaktadır.

Eğer ki mobil uygulama geliştirmeye yeni başlıyor ve ne yapmanız gerektiğinden pek emin değilseniz, Expo harika bir seçim olacaktır. Bu yazıda, Expo uygulamalarında biyometrik kimlik doğrulamanın ne kadar basit olduğunu ‘expo-local-authentication’ kütüphanesini entegre ederek göreceğiz.

Kullanacağımız ‘expo-local-authentication’ kütüphanesi, yüz veya parmak izi taramasıyla kullanıcının kimliğini doğrulamak için FaceID ve TouchID (iOS) veya Biometric Prompt (Android)’u uygulamanızda kullanmanıza olanak sağlar.

Kurulum

expo-local-authentication kütüphanesinin kurulumu oldukça basit.

Eğer yarn kullanıyorsanız aşağıdaki komutu girin:

yarn add expo-local-authentication

Eğer npm kullanıyorsanız aşağıdaki komutu girin:

npm i — save expo-local-authentication

Cihaz Uyumluluğunu Kontrol

Öncelikle, kullanıcının cihazında parmak izi kimlik doğrulamasını kullanabileceğimizden emin olmamız gerekir. Cihaz biyometrik kimlik doğrulama sistemlerine sahip değilse başka bir yönteme geçiş yapabilmemiz için böyle bir sistem şart. Öncelikle expo-local-authentication kütüphanesinden LocalAuthentication’ı içe aktarmalıyız.

import * as LocalAuthentication from ‘expo-local-authentication’;

ComponentDidMount() yaşam döngümüzde LocalAuthentication.hasHardwareAsync() komutunu kullanarak cihaz uyumluluğunu çok kolay bir şekilde kontrol edebiliriz. Bu komut, geçerli cihazın gerekli donanıma sahip olup olmadığına dair bool değer döndürür. Eğer false dönerse, kullanıcının kimliğini doğrulayabilmesi için başka bir yöntem sağlayabilirsiniz.

componentDidMount(){
 checkDeviceForHardware = async () => {
  let compatible = await LocalAuthentication.hasHardwareAsync();
  if(compatible){
   alert('Uyumlu cihaz!');
  }else{
   alert('Kullanımda olan cihaz, biyometrik doğrulama sistemlerine sahip değil!');
  }
 };
}

Biyometrik Kayıtları Kontrol

Kullanıcının cihazının biyometrik kimlik doğrulama özelliğine sahip olduğunu bildiğimize göre, kullanıcının işletim sisteminde kayıtlı biyometrik veriye sahip olduğundan emin olmamız gerekiyor. Bunu, bool değer döndüren LocalAuthentication.isEnrolledAsync() metodu ile kontrol edebiliriz.

checkForBiometrics = async () => {
 let biometricRecords = await.LocalAuthentication.isEnrolledAsync();
 if(!biometricRecords){
  alert('Biyometrik veri yok.')
 }else{
  alert('Biyometrik veri var!')
 }
};

Biyometrik Doğrulama

Hem cihazın yeterliliğe sahip olduğunu hem de kullanıcınızın biyometrik verisinin kayıtlı olduğundan emin olduktan sonra, doğrulama işlemine geçebiliriz. LocalAuthentication.authenticateAsync() metodu ile biyometrik doğrulama yapıyoruz. Bu metod, kimlik doğrulamanın başarılı olup olmadığını belirten bool değerine sahip bir anahtar ve kimlik doğrulamanın başarısız olması durumunda ise hata kodunu içeren bir nesne döndürür (Android İşletim Sistemi, doğrulama için bir UI(kullanıcı arayüzü) sağlamaz, bu nedenle sizin kendi arayüzünüzü kullanmanız gerekir; iOS’un ise kullanıcı arayüzü istemi vardır).

handleAuthentication= async() => {
 //handleLogin fonksiyonu girişin başarılı olduğunda yapılacak işlemleri kapsar.
 handleLogin = async () => {
  this.props.navigation.navigate(“AnaSayfa”)
 } 
 let result = await LocalAuthentication.authenticateAsync();
 if(result.success){
  this.setState({dogrulama:true});
  this.handleLogin();
 }else{
  alert('Doğrulama başarısız')
 }
}

Hepsini Bir Araya Getirelim

Aşağıdaki kod, expo-local-authentication kütüphanesini kullanarak kimlik doğrulamayı sağlayan Login componentini gösterir.

Daha önce bahsettiğimiz işlevlerinin yanı sıra ana odağımız handleAuthentication() fonksiyonudur. Biyometrik doğrulama yapıldıktan sonra, uygulamanıza giriş yapmak için POST isteği gönderir. Biyometrik veri taranmazsa, verilerinizi, oturum açma işlemi için standart prosedür olan giriş alanlarına girmeniz gerekir.

import React from "react";
import { Button, TextInput, View, Text, StyleSheet } from "react-native";
import * as LocalAuthentication from 'expo-local-authentication';
export default class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      kullaniciadi: "",
      sifre: "",
      hatali: false,
      dogrulama: false
    };
  }
  componentDidMount() {
    this.checkDeviceForHardware();
    this.checkForBiometrics();
    if(!this.state.scanned){
      this.handleLoginPress();
    }
  }
  checkDeviceForHardware = async () => {
    let compatible = await LocalAuthentication.hasHardwareAsync();
    if(compatible){
      alert('Uyumlu cihaz!');
    }else{
      alert('Kullanımda olan cihaz, biyometrik doğrulama sistemlerine sahip değil!');
    }
  };
  checkForBiometrics = async () => {
    let biometricRecords = await.LocalAuthentication.isEnrolledAsync();
    if(!biometricRecords){
     alert('Biyometrik veri yok.')
    }else{
      alert('Biyometrik veri var!')
    }
  };
  handleLoginPress = async () => {
    this.handleAuthentication();
  };
  handleAuthentication = async () => {
    let result = await LocalAuthentication.authenticateAsync();
    if(result.success){
      this.setState({dogrulama: true});
      var temp = this;
      const data = {
        "kullaniciadi": "kullaniciadi",
        "sifre": "sifre"
      };
      fetch("https://sunucunuz.com/giris",{
        "body": data,
        "method": "POST"
      }.then((resp) => resp.json()).then((data) => {
        if(data.success){
          alert('Giriş yapıldı!');
        }else{
          temp.setState({hatali: true});
        }
      }).catch((error) => {
        alert('Veri bağlantısı sıkıntısı!')
      });
    }
  };
  _login = async () => {
      const { kullaniciadi, sifre } = this.state;
      const data = { kullaniciadi, sifre };
      var temp = this;
      fetch("https://sunucunuz.com/giris",{
        "body": data,
        "method": "POST"
      }.then((resp) => resp.json()).then((data) => {
        if(data.success){
          alert('Giriş yapıldı!');
        }else{
          temp.setState({hatali: true});
        }
      }).catch((error) => {
        alert('Veri bağlantısı sıkıntısı!')
      });
  };
  render() {
    return(
      <View style={styles.container}>
        <TextInput
          placeholder="Kullanıcı adı"
          autoCompleteType="username"
          onChangeText={(value) => this.setState({kullaniciadi: value})}
        />
        <TextInput
          placeholder="Şifre"
          autoCompleteType="password"
          secureTextEntry={true}
          onChangeText={(value) => this.setState({sifre: value})}
        />
        {this.state.hatali ? <Text>Yanlış kullanıcı adı veya şifre girdiniz. Tekrar deneyin</Text> : null}
        <Button onPress={this._login} title="Login" />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
      flex: 1,
      backgroundColor: "white",
      justifyContent: "flex-start",
      alignItems: "center",
      padding: 10
  }
});

Artık biyometrik kimlik doğrulamayı Expo uygulamalarınza entegre ettiniz.

Uygulamanızı çalıştırdıktan sonra, biyometrik kimlik doğrulamanın şu avantajlarını görebilirsiniz:

· Daha fazla çalınan şifre yok

· Gizlilik koruması

· Kolay kullanım

· Kullanıcı dostu

Mobil uygulamalar için biyometrik kimlik doğrulama, diğer kimlik doğrulamalara kıyasla daha hızlı ve daha güvenlidir. Kullanıcıların artık hackerlardan ve sahte kimlik olaylarından korkmalarına gerek kalmıyor.

Bir şey paylaşmak veya eklemek isterseniz, aşağıya bir yorum bırakmaktan çekinmeyin. Fikirlerinizi duymak isterim.