MySQL로 회원가입, 로그인 구현 (2)

이번에는 로그인 기능을 구현하고, shared preferences 기능 구현 준비까지 할 것임

vs code 에서 user 폴더 내에 login.php 파일을 생성한다.

 

쿼리문을 보면 2가지 조건이 있는데

user_table에서 정보를 가져오되, 테이블의 email 칼럼에서 사용자가 플러터앱에서 입력한 이메일과 일치하는게 있어야되고

password 칼럼에서도 사용자가 입력한 패스워드랑 일치하는게 있어야 된다는 것이다.

그래서 이 쿼리문 실행시 두가지 조건을 만족하는 정확한 email과 password가 존재한다면 이땐 

num_row가 0보다 큰, 즉 1이 되는 것이다

 

이제 플러터로 돌아가서, api.dart에 로그인을 위한 변수를 하나 더 만든다

static const login = "$hostConnect/user/login.php";

 

 

그리고 login.dart로 돌아가서 userLogin이라는 메서드를 하나 만든다

 

 

body에서는 사용자 이메일과 패스워드를 전달해주고 잘 진행이 되었나 확인까지 해주어야하므로 login.php에서 사용한 똑같은 키네임을 사용해서 body에 데이터를 전달해준다

status code가 200이면 통신에 성공한거고 서버로부터 로그인에 성공했다는 response를 받게된다 

그리고 success 키네임이 true값으로 전달되면 사용자 정보가 담겨있는 userRecord의 키를 통해 정보를 전달받아야함

 

이제 resLogin의 키네임인 userData를 전달해준다.

현재 userRecord에는 json으로 사용자 정보가 담겨져있음 그래서 일반 포맷으로 컨버팅 해줘야되는데

이를 위해 user.dart 파일로 이동해주고, factory를 이용해서 생성자를 만들어준다

 

factory는 간단하게 말하자면, 생성자가 여러번 호출되더라도 최초에 생성된 하나의 생성자만을 사용하기 위한 디자인 패턴이다

 

그래서 정리를 해보면 user.dart 파일의 fromJson은 로그인에 성공한 유저의 각 항목들의 json 데이터를 가져올 수 있게 해주고

login.dart 파일의 json은 바로 이 특정 유저의 데이터를 기억하기 위한 것이다

그래서 이 특정 유저의 데이터를 기억하고 있다가 앱 상에서 필요시 사용할 수 있게해야한다

예를 들어서 앱을 닫았다가 재실행할 때 곧바로 메인 스크린으로 보내줄 수 있어야하는데 이럴 때 이 특정 유저의 데이터를 shared preferences를 사용해서 폰에 있는 로컬 저장소에 저장을 하게 된다 

그래서 이 정보를 User 타입의 userInfo라는 변수에 할당해줬다 (login.dart에서)

 

이번에는 userInfo가 가진 정보를 shared preferences를 이용해서 로컬 저장소에 저장해볼 것이다

user 디렉토리를 새로 만들고 user_pref 라는 파일을 새로 만든다

그리고 shared preferences 패키지를 설치한다. (명령어: flutter pub add shared_preferences)

 

 

이로써 정보를 로컬 저장소에 저장하기 위해 SharedPreferences를 사용하고 이 과정에서 데이터를 json 으로 컨버팅 해주는 과정을 거치게 되고 정보를 userJsonData에 담아주고 최종적으로 SharedPreference의 인스턴스인 preferences를 사용해서 폰의 로컬 저장소에 저장을 하게 되는 것임

 

(이 강의에서는 로그인 기능까지만 구현하고 데이터를 메인 스크린까지 보내주는 sharedpreference 기능은 다음에 마무리 지을 것)

 

이번에는 user 폴더에 pages 폴더를 만들어준다

 

다시 login.dart로 돌아와서 Get.to를 사용해서 로그인이 성공적으로 진행되면 main_screen.dart 파일로 이동시켜주는 코드를 추가한다

 

 

그리고 login.dart에 로그인 버튼 onTap() 내에 아래 코드를 추가한다

if(formKey.currentState!.validate()){
                      checkUserEmail();
                    }