[Flutter] Amplify 와 Flutter 연동하기 (4) - Log in/Out 구현

Overview

해당 포스트는 Amplify 의 인증 기능 중 메일주소 기반 Log In/Out 기능을 어떻게 구현하는 지 알아보도록 하겠습니다.

Log in 기능

Log in 기능을 구현하기 위해서 아래 화면처럼 UI 입력폼으로 부터 사용자로 부터 ID(E mail) 와 Password를 입력받습니다.

그리고 사용자가 Log in button 을 눌렀을 경우 아래와 같이 API 를 호출합니다.

Future<String> _onLogin(LoginData loginData) async {
  try {
    SignInResult res = await Amplify.Auth.signIn(
        username: loginData.name, password: loginData.password);

    _isSignedIn = res.isSignedIn;
  } on AuthException catch (e) {
    if (e.message.contains('already a user which is signed in')) {
      await Amplify.Auth.signOut();
      return 'Problem logging in. Please try again.';
    }

    return '${e.message} - ${e.recoverySuggestion}';
  }
}

여기서 핵심은 Amplify.Auth.signIn() 메소드입니다. 리턴 값은 SignInResult 입니다.
SignInResult.isSignedIn 의 값이 true 일 경우 Log in 성공 페이지로 넘어가도록 처리하며 SignInResult.isSignedIn 이 false 이거나 Exception 이 발생한 경우 다시 로그인을 시도하도록 처리를 해야합니다.

Log out

다음은 Log in 성공 페이지를 아래와 같이 구성한다고 가정을 해봅시다.

앱바 우측에는 Log out를 할 수 있도록 Button을 구현하였습니다.

그리고 사용자가 Log out Button 을 눌렀을 경우 아래 API 를 호출하도록 구현합니다.

Amplify.Auth.signOut().then((_) {
  Navigator.pushReplacementNamed(context, '/');
});

여기서 핵심은 Amplify.Auth.signOut() 이며 그 리턴 값으로 SignOutResult 을 받긴하지만 Sign out은 명시적으로 사용자가 서비스를 중단하는 것이기 때문에 따로 결과 값을 처리하지 않아도 됩니다.

총평

이번 포스트를 통해 이메일 기반으로 Log in/out 을 구현하는 방법에 대해 간략하게 살펴보았고 다음 시간에 Facebook 계정으로 Sign up/Log in 을 기능을 구현하는 방법에 대해 알아보도록 하겠습니다.

이전 단계

• Amplify Sign up 구현 (3)

다음 단계

• Amplify Facebook OAuth 인증 (5)

Reference

• AWS Amplify for Flutter