DevGang
Авторизоваться

Использование React-Native-KeyChain для защиты учетных данных мобильного приложения 

Безопасность - один из важнейших факторов при создании мобильных приложений. А аутентификация пользователей - это первоочередная задача обеспечения безопасности. Таким образом, вы можете найти несколько стратегий аутентификации пользователей, отвечающих различным требованиям безопасности.

Из них два наиболее распространенных метода:

  1. Используя поставщика удостоверений, поддерживающий поток предоставления кода OpenID Connect, мобильное приложение получает токен обновления для получения новых токенов доступа для вызова API.
  2. Непосредственно сохраняйте учетные данные пользователя в приложении с помощью связки ключей после аутентификации для повторной аутентификации.

В этой статье будет рассмотрен последний подход с использованием NPM библиотеки react-native-keychain, вызываемой для защиты хранилища учетных данных на мобильных устройствах.

Зачем нам нужен Keychain?

По умолчанию React-Native не поставляется с каким-либо методом хранения безопасных данных.

Важно! Не храните конфиденциальные данные или ключи в коде приложения. Ко всему, что включено в кодовую базу, можно получить доступ в виде простого текста, проверив пакет приложения.

Но есть два отдельных существующих решения для Android и iOS:

  1. Служба связки ключей iOS
  2. Общие настройки безопасности Android

Чтобы использовать эти две службы, вы можете написать мост самостоятельно или быстрее использовать библиотеки. Есть три стандартные библиотеки которые используют разработчики react-native-keychain, react-native-secure-storage и react-native-sensitive-info.

Статистический анализ загрузок трех пакетов в течение одного года показывает, что react-native-keychain это самая загружаемая библиотека, в которой есть все, что вам нужно.

Использование react-native-keychain в мобильных приложениях

Прежде всего, мы можем начать с установки react-native-keychain в нашем проекте React-Native.

Установка пакетов

Установка react-native-keychain так же проста, как установка любого из пакетов npm. Вы можете использовать как npm, так и yarn для установки пакета.

npm i react-native-keychain
yarn add react-native-keychain

Если вы используете React-Native версии 0.59 или ниже, выполните следующую команду, она свяжет вашу библиотеку с React-Native.

react-native link react-native-keychain

Если вы разрабатываете iOS, запустите pod install в каталоге ios/, чтобы установить зависимости iOS. Наконец, пересоберите приложение.

Затем, используя API-интерфейсы библиотеки по умолчанию, теперь вы можете получить доступ к Связке ключей iOS и общим настройкам безопасности Android.

Примечание. При использовании react-native-keychain важно отметить, что только определенные методы совместимы с iOS или Android. Однако те, которые мы используем в этой статье, одинаково можно использовать как на Android, так и на iOS.

Вы также можете использовать некоторые особенности платформы, если у вас есть какие-либо предварительные требования, связанные с аутентификацией.

Использование библиотеки на практике

В этом примере показано, как хранить, извлекать и использовать учетные данные для повторного входа в приложение.

Шаг 1 - Сохраните учетные данные

Мы можем использовать функцию setGenericPassword для хранения учетных данных пользователя (имени пользователя и пароля) в Связке ключей. (Примечание: по умолчанию строки могут быть сохранены с использованием их функции. При хранении объектов рекомендуется использовать JSON.stringify).

import * as Keychain from 'react-native-keychain';

const LoginScreen = props => {
  
  const username = 'Charuka';
  const password = 'iTsAsEcReT';
  
  await Keychain.setGenericPassword(username, password);
}

Шаг 2 - Получить учетные данные

Используйте функцию getGenericPassword, чтобы получить сохраненные учетные данные пользователя из Связки ключей. (Примечание: по умолчанию функция возвращает String. Поэтому при извлечении объектов рекомендуется использовать JSON.parse).

import * as Keychain from 'react-native-keychain';

const LoginScreen = props => {

  const checkUserStatus = async () => {
    try {
      const credentials = await Keychain.getGenericPassword();
      }
    } catch (error) {
      console.log('Keychain couldn\'t be accessed!', error);
    }
  }
 }

Шаг 3 - Использование в реальном сценарии

В следующем фрагменте кода сначала функция checkUserStatus() будет вызываться в хуке useEffect во время монтирования компонента и устанавливать учетные данные пользователя, получая их из хранилища ключей. Затем функция login() будет вызвана для входа в систему пользователя с использованием полученных учетных данных.

import React, { useState } from 'react';
import * as Keychain from 'react-native-keychain';

const LoginScreen = props => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [preLogTest, setPreLogTest] = useState(false);

  useEffect(() => {
    checkUserStatus();
  }, []);

  useEffect(() => {
    if (preLogTest) {
      login();
    }
  }, [password, email])

  const checkUserStatus = async () => {
    try {
      const credentials = await Keychain.getGenericPassword();
      if (credentials) {
        setPreLogTest(true);
        setEmail(credentials.username);
        setPassword(credentials.password);
      } else {
      setLoading(false);
      }
    } catch (error) {
      console.log('Keychain couldn\'t be accessed!', error);
      setLoading(false);
    }
  }

  const login = async () => {
    try {
      const response = await fetch('yoururl' + 'signin', {
        method: 'POST',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          email,
          password,
        }),
      });
      const responseJson = await response.json();
      var message = responseJson.msg;
      if (responseJson.success === true) {
          await Keychain.setGenericPassword(email, password);
        }
      }
    } catch (error) {
      console.error(error);
    }
  };
 }

Шаг 4 - Удаление учетных данных

Функция resetGenericPassword может удалить все учетные данные Связки ключей в сценарии, когда пользователи выходят из приложения.

import * as Keychain from 'react-native-keychain';

const LoginScreen = props => {

  const removeCredentials = async () => {
    try {
      const credentials = await Keychain.resetGenericPassword();
      }
    } catch (error) {
      console.log('Keychain couldn\'t be accessed!', error);
    }
  }
 }

Понимание рисков с связкой ключей

Однако, когда дело доходит до разработки под Android, в React-Native Keychain есть одна распространенная ошибка.

Общие настройки не защищены на 100%. Это безопасно для хранения ваших данных, но не рекомендуется для хранения пар ключ-значение.

Общие настройки хранятся в файле, и, если разработчику удастся подключить телефон и смонтировать файловую систему, любой желающий сможет прочитать эти настройки. Стандартный ответ - использование скрытия. Он обрабатывает шифрование и дешифрование того, что хранится на корневых устройствах, но все же данные не будут 100% секретными, потому что ключ присутствует локально.

Кроме того, SharedPrefsBackedKeyChain используется для шифрования данных. Метод хранит 256-битные ключи шифрования в SharedPreferences на устройстве. Проблема в том, что ключ шифрования и зашифрованные данные хранятся в одном месте. И шифрование становится бессмысленным.

Однако на более новых устройствах все ключи шифрования хранятся на аппаратном уровне, а не внутри самого приложения, что увеличивает защиту.

Преимущества использования React-native-keychain

Одна библиотека для доступа к iOS Keychain и Android Keystore в приложениях React-Native.

react-native-keychain самая популярная библиотека по многим причинам. Давайте посмотрим на некоторые важные плюсы.

  1. Для доступа к Связке ключей устройство должно быть разблокировано.
  2. Связку ключей нельзя восстановить на другом устройстве.
  3. В устройствах ключи шифрования хранятся на аппаратном уровне.

Заключение

Исходя из моего опыта, использование react-native-keychain - лучший вариант для хранения учетных данных в мобильных приложениях React-Native. Как я вижу, основным преимуществом является использование существующей Связки ключей iOS и общих предпочтений Android под капотом.

Как я показал выше, проще использовать библиотеку и реализовать хранение учетных данных для ваших мобильных приложений React-Native.

Я надеюсь, что обсуждаемый здесь подход окажется полезным для большинства из вас.

Источник:

#ReactNative
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

Поделитесь своим опытом, расскажите о новом инструменте, библиотеке или фреймворке. Для этого не обязательно становится постоянным автором.

Попробовать

В подарок 100$ на счет при регистрации

Получить