본문 바로가기
javascript/React-Native

[리액트 네이티브] 로그인 페이지 Bcrypt 암호화 하기

by 산코디 2023. 7. 8.

리액트네이티브 로그인 페이지 Bcrypt 암호화 하기

 

안녕하세요!

오늘은 리액트 네이티브에서 로그인 페이지를 개발할 때 Bcrypt 암호화 기술을 활용한 암호화 처리 방법에 대해 포스팅하려고 합니다.

보안은 소프트웨어에서 로그인 기능을 구현할 때 항상 중요한 고려 사항입니다. 따라서 이번 포스팅에서는 Bcrypt라는 강력한 암호화 기법을 사용하여 사용자의 비밀번호를 안전하게 암호화하여 처리할 수 있는 방법에 대해 알아보겠습니다.

이번 예제를 통해 간단하고 명확하게 암호화 기능을 이해하고 구현할 수 있도록 설명해 드리겠습니다. 사용자의 비밀번호를 보호하는 데 안전하고 신뢰할 수 있는 암호화 방법으로 Bcrypt를 사용함으로써 더욱 안전한 로그인 페이지를 구현할 수 있습니다.

그러면 이제 예제를 통해 Bcrypt 암호화 기법을 적용하는 방법을 자세히 알아보도록 하겠습니다. 함께 시작해 봅시다!

 


1. bcrypt

bcrypt란 단방향 해시 함수로서 비밀번호와 같은 민감한 정보를 안전하게 저장하고 검증하기 위한 암호화 알고리즘 방식입니다.

bcrypt는 입력값을 암호화하여 고정된 길이의 해시 값으로 변환을 하고, 단방향의 해시 함수이기 때문에 복호화를 할 수는 없습니다. 즉, 암호화된 값을 비교하여 입력한 비밀번호를 검증하는 용도로 사용을 합니다.

 

bcrypt 암호화는 안전성을 보장하기 위해 salt값을 포함하여 암호화 처리를 하게 됩니다. salt는 입력한 값과 결합하여 암호화를 진행하게 되고, 같은 입력값이라도 다른 salt를 사용하게 되면 다른 해시 결과를 생성하므로 무차별 대입 공격에 대한 보호를 할 수 있습니다.

 

추가로 동일한 입력값이더라도 암호화를 할 때마다 매번 다른 암호화 결괏값이 나오기 때문에 보안에 안전한 암호화 알고리즘으로 널리 알려져 있습니다.

 

bcrypt와 유사한 알고리즘으로는 PBKDK2, Argon2, scrypt 등이 있으며, 모두 bcrypt와 유사하면서 강력한 보안성을 제공하고 있습니다.


2. react-native-bcrypt 라이브러리 설치

npm install react-native-bcrypt

가장 먼저 bcrypt 암호화를 하기 위해 라이브러리를 설치해 줍니다.

 

 

3. 로그인 페이지 예시 소스 코드

import React, { useState } from 'react';
import { View, TextInput, Button } from 'react-native';
import bcrypt from 'react-native-bcrypt';

const LoginPage = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = () => {
    // 사용자가 입력한 패스워드를 bcrypt로 암호화
    const hashedPassword = bcrypt.hashSync(password, 10);

	console.log(hashedPassword);
  };

  return (
    <View>
      <TextInput
        placeholder="Username"
        value={username}
        onChangeText={setUsername}
      />
      <TextInput
        placeholder="Password"
        secureTextEntry
        value={password}
        onChangeText={setPassword}
      />
      <Button title="Login" onPress={handleLogin} />
    </View>
  );
};

export default LoginPage;

위의 예시 코드를 살펴보면, react-native-bcrypt 라이브러리의 hashSync() 함수를 사용하여 암호화를 수행하는 방법을 볼 수 있습니다.

사용자가 입력한 평문 비밀번호를 함수의 첫 번째 인자로 전달하고, 두 번째 인자로는 salt 값을 전달하면 됩니다. 이렇게 하면 bcrypt를 이용한 단방향 암호화가 수행됩니다. 이러한 방식은 간단하면서도 안전한 암호화 처리 방법입니다. 사용자의 비밀번호를 안전하게 저장하기 위해 이러한 기술을 사용할 수 있습니다. 암호화는 데이터 보안의 핵심 요소이며, 사용자의 개인정보를 안전하게 보호하는 데 큰 역할을 합니다.

 


마무리

소프트웨어에서 암호화는 매우 중요한 부분입니다. bcrypt 외에도 다양한 암호화 알고리즘에 대해 알아두는 것이 개발자로서 필수입니다. 우리는 소프트웨어를 개발하면서 기능을 구현하는 데 집중하곤 하지만, 암호화 역시 그만큼 중요한 요소 중 하나입니다. 데이터의 보안은 소프트웨어 발전과 더불어 매우 중요해지고 있기 때문에 암호화 기술에 대한 이해는 필수적입니다. 실제로 암호화를 적용해 보면서 데이터가 어떻게 처리되는지 경험해 보는 것도 좋은 방법입니다.

 

 

오늘은 리액트네이티브에서 bcrypt 암호화를 사용하여 사용자의 비밀번호를 안전하게 처리하는 방법에 대해 정리해 보았습니다.
이번에는 클라이언트 측에서 간단하게 처리하는 방법을 살펴보았습니다. 다음으로는 서버 측 (spring boot)에서 비밀번호를 받아 검증하는 방법에 대해 더 자세히 다루어보도록 하겠습니다.
암호화는 사용자의 개인정보와 보안에 매우 중요한 요소이므로, 암호화 기술에 대한 이해와 실제 적용 방법을 알고 있는 것이 중요합니다. 더 나은 보안과 사용자의 안전을 위해 암호화 처리에 대한 포스팅을 계속해서 이어나가도록 하겠습니다.

 

 

 

 

반응형

 

반응형