[Flutter] Amplify 와 Flutter 연동하기 (3) - Sign up 구현

Overview

해당 포스트는 Amplify 의 인증 기능 중 메일주소 기반 Sign up 기능을 어떻게 구현하는지에 다루도록 하겠습니다.

인증 기능

Amplify 에서 회원 가입/로그인/로그 아웃 같이 사용자 인증 관련 기능은 AWS Cognito 를 사용하고 있습니다. 다시 말해 Amplify 는 여러개의 서비스를 집합을 한 것이고 그 중 하나가 Cognito 입니다.

Cognito란?

Amazon Cognito 는 웹 및 모바일 앱에 대한 인증, 권한 부여 및 사용자 관리를 제공합니다. 사용자는 사용자 이름과 암호를 사용하여 직접 로그인하거나 Facebook, Amazon, Google 또는 Apple 같은 타사를 통해 로그인할 수 있습니다.

Amazon Cognito의 두 가지 주요 구성 요소는 사용자 풀 과 자격 증명 풀 입니다.

• 사용자 풀 (User Pool)은 앱 사용자의 가입 및 로그인 옵션을 제공하는 사용자 디렉터리입니다.
• 자격 증명 풀(Identi)사용자에게 기타 AWS 서비스에 액세스할 수 있는 권한을 부여할 수 있습니다.

Cognito 의 flow를 간략히 살펴보면..

1. 앱 사용자는 사용자 풀을 통해 로그인하여 인증 성공 이후 사용자 풀 토큰을 받습니다.
2. 앱은 사용자 풀 토큰을AWS자격 증명 풀을 통해 자격 증명을 생성합니다.
3. 앱 사용자는 AWS자격 증명을 사용하여 다른 AWS 서비스 (예: Amazon S3 또는 DynamoDB) 를 제공합니다.

사용자 풀 과 자격 증명 풀 같은 경우 이전 포스트에서 Amplify CLI를 통해 Auth 서비스를 만들었으면 자동으로 생성이 되기 때문에 딱히 설정할 것이 없습니다.

Amplify CLI를 통해 Auth 서비스를 생성하는 방법은 아래 링크를 참고 바랍니다.

Amplify 서비스 초기화

1. Sign up 화면 구성

다음은 이메일 주소 기반으로 Sign up 기능을 개발하는 방법에 대해 살펴보겠습니다.
보통 Sign up 기능을 구현하기 위한 모바일 화면은 아래와 같을 것입니다.

</br>

</br>

TextField Widget 으로 부터 입력받은 E-mail 주소와 패스워드를 가지고 아래와 같이 Amplify API 를 호출합니다.

class LoginData {
  final String name;
  final String password;
}

Future<String> _onSignUp(LoginData data) async {
    _loginData = data;
    try {
      await Amplify.Auth.signUp(
          username: data.name,
          password: data.password,
          options: CognitoSignUpOptions(userAttributes: {'email': data.name}));
    } on AuthException catch (e) {
      return '${e.message} - ${e.recoverySuggestion}';
    }
  }

위 코드에서 Amplify.Auth.signUp() 를 호출하여 email 정보와 패스워드 정보를 넘겨주게 됩니다.
만약 정상적으로 Sign up이 수행이 된다면 AWS Cognito 의 User pool 에 유저 데이터가 추가가 됩니다.

위 정보는 Amplify console > Authentication > View in Cognito > 사용자 및 그룹에서 확인할 수 있습니다.

여기서 계정상태가 UNCONFIRMED 로 되어 있는 것을 확인 할 수 있습니다. 이 상태는 이메일 인증이 필요한 단계이며 필요한 상태이며 이메일 인증 코드를 입력받을 수 있는 화면을 구성합니다.

2. 이메일 인증 화면 구성

이메일 인증 화면은 아래와 같이 구성을 합니다.

</br>

</br>

그리고 이전 단계에서 입력받은 메일 주소로 인증 코드가 포함된 메일을 수신할 것입니다.

TextField Widget 에 인증 코드를 입력하고 VERIFY 버튼을 눌렀을 때 아래의 코드를 호출하도록 합니다.

void _verifyCode(LoginData data, String code) async {
  try {
    SignUpResult res = await Amplify.Auth.confirmSignUp(
        username: data.name, confirmationCode: code);

    if (res.isSignUpComplete) {

        // 회원 가입 성공!!
    }
  } on AuthException catch (e) {
    // 에러 핸들링
  }
}

Amplify.Auth.confirmSignUp() API 를 통해 이메일 주소와 인증 코드를 넘겨주고 정상적으로 동작했다면 Cognito 의 유저 풀의 상태는 UNCONFIRMED 에서 CONFIRMED 로 변경이 되었음을 확인 할 수 있습니다.

따라서 해당 계정을 통해 정상적으로 Log in 동작을 수행할 수 있게 됩니다.

총평

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

이전 단계

• Amplify 서비스 초기화 (2)

다음 단계

• Amplify Log in/out 구현 (4)

Reference

• AWS Amplify for Flutter