[ Flutter ] 사용자 비밀번호 ( 패스워드 ) 암호화 설정 ( obscureText & Hash )

개발 환경

OS : windows

IDE : VSC ( Flutter) & STS ( Spring )

개발 언어 : Dart & Java

 

서론

프로젝트 진행 시 회원가입을 진행할 때 사용자의 비밀번호 부분을 강화하기로 하였습니다.

현재 Login 화면에서는 사용자의 아이디와 비밀번호가 전부 보이는 상태입니다.

VIEW

 

Flutter에서 비밀번호 ( 패스워드 ) 암호화 설정 방법

1. obscureText: true 속성 추가

LGOIN.DART

비밀번호 Text 부분에 obscureText 속성을 추가해 줍니다.

obscureText: true,

VIEW

obscureText 속성을 추가해 준 상태입니다.

 

obscureText 속성은 다음과 같은 기능이 있습니다.

• 해당 비밀번호 TextField 부분이 보이지 않게 암호화 처리를 해줍니다.
• 해당 비밀번호 TextField 부분이 복사가 되지 않습니다.

 

2. 비밀번호 Hash

LOGIN.DART

UserPassword를 직접적으로 DB에 저장하지 않고 Hash를 통하여 UserPassword의 Hash 값을 저장해 줍니다.

 

import 'package:crypto/crypto.dart';

해당 라이브러리를 추가해 줍니다.

 

var bytes = utf8.encode(userps);    
var passwordHash = sha256.convert(bytes).toString();    

Map data = {      'userid': '$userid',      'userps': '$passwordHash',    };

이런 식으로 UserPassword가 아닌 passwordHash 변수를 추가로 설정하여 저장합니다.

 

DB

id 3번의 데이터는 비밀번호 hash를 적용하기 전이고 id 4번은 비밀번호 hash를 적용한 후입니다.

둘 다 똑같은 비밀번호 "123456789!"를 입력받았지만 다르게 비밀번호가 저장된 걸 확인할 수 있습니다.