[AWS] 아마존 웹 서비스 Android + Amazon Cognito 회원가입 구현

지난번에 안드로이드 앱이랑 aws cognito를 연결시켜 로그인까지 구현해보았다.

[AWS] 아마존 웹 서비스 Android + Amazon Cognito 로그인 구현

이번에는 회원가입 UI를 새로 만들어 구현해보고 로그아웃 기능까지 추가해보도록 해보자.

이전에 aws cognito 회원가입 방식을 확인해야 한다.

 aws cognito 회원가입 방식은 앱에서 이메일과 이름 비밀번호 등을 cognito 서비스로 보내면 거기서 받은 정보를 입력하고 받은 이메일에 인증 코드를 보내게 된다. 

사용자는 그 인증 코드를 확인 후 코드를 다시 앱에 적어 회원가입을 성공적으로 하게 되는 것이다.

먼저 MainActivity에 로그아웃 버튼을 만들었다.

코드는 다음과 같다.

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import androidx.appcompat.app.AppCompatActivity;
import com.amazonaws.mobile.client.AWSMobileClient;
import com.amazonaws.mobile.client.Callback;
import com.amazonaws.mobile.client.UserStateDetails;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Button signOut_button = findViewById(R.id.signOut_button); // 로그아웃 버튼

        // 로그아웃 버튼
        signOut_button.setOnClickListener(new View.OnClickListener() {


            @Override
            public void onClick(View v) {
                AWSMobileClient.getInstance().initialize(getApplicationContext(), new Callback<UserStateDetails>() {
                    @Override
                    public void onResult(UserStateDetails userStateDetails) {
                        // 로그아웃 후 로그인 창으로 이동
                        AWSMobileClient.getInstance().signOut();
                        Intent i = new Intent(MainActivity.this, AuthActivity.class);
                        startActivity(i);
                        finish();
                    }

                    @Override
                    public void onError(Exception e) {
                    }
                });
            }
        });
    }
}

activity_main.xml은 다음과 같다. 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".SignUpActivity"
    android:orientation="vertical"
    android:gravity="center">


    <Button
        android:id="@+id/signOut_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="로그아웃"
        android:layout_gravity="center"
        android:layout_marginTop="20dp"/>


</LinearLayout>

그냥 간단하게 로그아웃 버튼만을 만들어 구현했다.

다음으로는 회원가입 창을 구현하기 위해 새 Activity를 만들었다.

이름은 SIgnUpactivity로 하였고 코드는 다음과 같다.

import android.content.Intent;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import com.amazonaws.mobile.client.AWSMobileClient;
import com.amazonaws.mobile.client.Callback;
import com.amazonaws.mobile.client.results.SignUpResult;
import com.amazonaws.mobile.client.results.UserCodeDeliveryDetails;
import java.util.HashMap;
import java.util.Map;

public class SignUpActivity extends AppCompatActivity {
    String TAG = AuthActivity.class.getSimpleName();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_sign_up);


        Button signUp_button2 = findViewById(R.id.signUp_button2); // 회원 가입 버튼

        // 회원 가입 버튼
        signUp_button2.setOnClickListener(new View.OnClickListener() {


            // 회원가입
            @Override
            public void onClick(View v) {

                // 이름, 아이디(이메일), 비밀번호 순
                EditText signUpName =  (EditText)findViewById(R.id.signUpName);
                EditText signUpUsername =  (EditText)findViewById(R.id.signUpUsername);
                EditText signUpPassword =  (EditText)findViewById(R.id.signUpPassword);

                String name = signUpName.getText().toString();
                String username = signUpUsername.getText().toString();
                String password = signUpPassword.getText().toString();


                final Map<String, String> attributes = new HashMap<>();
                attributes.put("name", name);
                attributes.put("email", username);
                Log.d("TTT",attributes.toString());


                AWSMobileClient.getInstance().signUp(username, password, attributes, null, new Callback<SignUpResult>() {
                    @Override
                    public void onResult(final SignUpResult signUpResult) {
                        runOnUiThread(new Runnable() {
                            @Override
                            public void run() {

                                Log.d(TAG, "Sign-up callback state: " + signUpResult.getConfirmationState());
                                if (!signUpResult.getConfirmationState()) {


                                    final UserCodeDeliveryDetails details = signUpResult.getUserCodeDeliveryDetails();
                                    Toast.makeText(getApplicationContext(), "인증 메일을 보냈습니다.: " + details.getDestination(), Toast.LENGTH_SHORT).show();

                                    // 이메일에 문제가 없으면 인증 코드 창으로 이동
                                    Intent i = new Intent(SignUpActivity.this, OkActivity.class);
                                    i.putExtra("email",username); // username을 인증 코드 창에서 사용하기 위해
                                    startActivity(i);
                                    finish();

                                } else {
                                    // 인증 코드 창으로 이동
                                    Toast.makeText(getApplicationContext(), "Sign-up done.", Toast.LENGTH_SHORT).show();
                                    Log.e(TAG, "Sddd");
                                }
                            }
                        });
                    }

                    @Override
                    public void onError(Exception e) {
                        Log.e(TAG, "Sign-up error", e);
                    }
                });
            }

        });

    }

    // 뒤로가기 2번 눌러야 종료
    private final long FINISH_INTERVAL_TIME = 1000;
    private long backPressedTime = 0;

    @Override
    public void onBackPressed() {
        long tempTime = System.currentTimeMillis();
        long intervalTime = tempTime - backPressedTime;

        // 뒤로 가기 할 경우 AuthActivity 화면으로 이동
        if (0 <= intervalTime && FINISH_INTERVAL_TIME >= intervalTime)
        {
            Intent i = new Intent(SignUpActivity.this, AuthActivity.class);
            startActivity(i);
            finish();
        }
        else
        {
            backPressedTime = tempTime;
            Toast.makeText(getApplicationContext(), "한번 더 누르면 종료됩니다.", Toast.LENGTH_SHORT).show();
        }
    }

}

activity_sign_up.xml은 다음과 같다. 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".SignUpActivity"
    android:orientation="vertical"
    android:gravity="center">


    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_gravity="center"
        android:layout_marginTop="20dp">
        <TextView
            android:id="@+id/signUpName_text"
            android:layout_width="90dp"
            android:layout_height="30dp"
            android:text="이름"
            android:textSize="20sp"
            android:textStyle="bold"
            tools:layout_editor_absoluteX="7dp"
            tools:layout_editor_absoluteY="318dp" />

        <EditText
            android:id="@+id/signUpName"
            android:layout_width="300dp"
            android:layout_height="50dp"
            android:ems="10"
            android:inputType="text"
            tools:layout_editor_absoluteX="213dp"
            tools:layout_editor_absoluteY="310dp" />


    </LinearLayout>
    <LinearLayout

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_gravity="center"
        android:layout_marginTop="20dp"
        >

        <TextView
            android:id="@+id/signUpUsername_text"
            android:layout_width="90dp"
            android:layout_height="30dp"
            android:text="이메일"
            android:textSize="20sp"
            android:textStyle="bold" />

        <EditText
            android:id="@+id/signUpUsername"
            android:layout_width="300dp"
            android:layout_height="50dp"
            android:ems="10" />


    </LinearLayout>


    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_gravity="center"
        android:layout_marginTop="20dp">

        <TextView
            android:id="@+id/signUpPassword_text"
            android:layout_width="90dp"
            android:layout_height="30dp"
            android:text="비밀번호"
            android:textSize="20sp"
            android:textStyle="bold" />

        <EditText
            android:id="@+id/signUpPassword"
            android:layout_width="300dp"
            android:layout_height="50dp"
            android:ems="10"
            android:inputType="textPassword" />


    </LinearLayout>


    <Button
        android:id="@+id/signUp_button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="20dp"
        android:text="회원가입" />


</LinearLayout>

회원가입 xml도 간단하게 필요한 정보인 이름과 아이디 비밀번호만을 가지고 구현했다.

그리고 에러 없이 회원가입 버튼을 눌렀다면 인증 코드 창으로 이동시켰다.

인증 코드 창을 구현하기 위해 새 Activity를 만들었다.

이름은 OkAcitivty 로하였고 코드는 다음과 같다.

import android.content.Intent;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import com.amazonaws.mobile.client.AWSMobileClient;
import com.amazonaws.mobile.client.Callback;
import com.amazonaws.mobile.client.results.SignUpResult;
import com.amazonaws.mobile.client.results.UserCodeDeliveryDetails;

public class OkActivity extends AppCompatActivity {
    String TAG = AuthActivity.class.getSimpleName();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_ok);

        // 인증 확인버튼
        Button Ok_button = findViewById(R.id.Ok_button);

        // SingUpActivity 에서 사용된 username 정보를 가져와 TextView에 넣는다.
        TextView TextView = findViewById(R.id.signUpUsername2);
        Intent intent = getIntent();
        Bundle bundle = intent.getExtras();
        String username = bundle.getString("email");
        TextView.setText(username);

        // 인증 버튼
        Ok_button.setOnClickListener(new View.OnClickListener() {

            // 인증 코드 확인
            @Override
            public void onClick(View v) {

                EditText code_name = findViewById(R.id.code_name);
                String code = code_name.getText().toString();

                AWSMobileClient.getInstance().confirmSignUp(username, code, new Callback<SignUpResult>() {
                    @Override
                    public void onResult(final SignUpResult signUpResult) {
                        runOnUiThread(new Runnable() {
                            @Override
                            public void run() {

                                Log.d(TAG, "Sign-up callback state: " + signUpResult.getConfirmationState());
                                if (!signUpResult.getConfirmationState()) {
                                    final UserCodeDeliveryDetails details = signUpResult.getUserCodeDeliveryDetails();

                                    Toast.makeText(getApplicationContext(), "Confirm sign-up with: " + details.getDestination(), Toast.LENGTH_SHORT).show();


                                } else {

                                    // 회원가입이 완료되면 로그인 창으로 이동
                                    Toast.makeText(getApplicationContext(),"성공적으로 회원가입 되셨습니다..", Toast.LENGTH_SHORT).show();
                                    Intent i = new Intent(OkActivity.this, AuthActivity.class);
                                    startActivity(i);
                                    finish();

                                }
                            }
                        });
                    }

                    @Override
                    public void onError(Exception e) {
                        Log.e(TAG, "Confirm sign-up error", e);
                    }
                });


            }

        });
    }


    // 뒤로가기 2번 눌러야 종료
    private final long FINISH_INTERVAL_TIME = 1000;
    private long backPressedTime = 0;

    @Override
    public void onBackPressed() {
        long tempTime = System.currentTimeMillis();
        long intervalTime = tempTime - backPressedTime;

        // 뒤로 가기 할 경우 SignActivity 화면으로 이동
        if (0 <= intervalTime && FINISH_INTERVAL_TIME >= intervalTime)
        {
            Intent i = new Intent(OkActivity.this, SignUpActivity.class);
            startActivity(i);
            finish();
        }
        else
        {
            backPressedTime = tempTime;
            Toast.makeText(getApplicationContext(), "한번 더 누르면 종료됩니다.", Toast.LENGTH_SHORT).show();
        }
    }

}

회원가입 창에서 사용된 이메일을 한번 더 사용해야 하기 때문에 정보를 인증 코드 창으로 가져와서 다시 사용했다.

activity_ok.xml은 다음과 같다. 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".OkActivity"
    android:orientation="vertical"
    android:gravity="center">

    <TextView
        android:id="@+id/ok_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="마지막 단계입니다!\n
        인증 메일이 아래의 이메일 주소로 전송되었습니다!\n
        24시간 이내로 인증을 완료해주세요!"
        android:textSize="16dp"
        android:textStyle="bold" />

    <LinearLayout

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_gravity="center"
        android:layout_marginTop="40dp"
        >

        <TextView
            android:id="@+id/signUpUsername2_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="이메일 주소"
            android:textSize="16dp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/signUpUsername2"
            android:layout_width="300dp"
            android:layout_height="50dp"
            android:gravity="center"
            android:textStyle="bold"
            android:textColor="@color/black"
            android:textSize="20dp"
            android:text="이메일" />


    </LinearLayout>

    <LinearLayout

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_gravity="center"
        android:layout_marginTop="40dp"
        >

        <TextView
            android:id="@+id/code_name_text"
            android:layout_width="90dp"
            android:layout_height="30dp"
            android:text="인증 코드"
            android:textSize="16dp"
            android:textStyle="bold" />

        <EditText
            android:id="@+id/code_name"
            android:layout_width="300dp"
            android:layout_height="50dp"
            android:ems="10"
            android:inputType="text" />



    </LinearLayout>



    <Button
        android:id="@+id/Ok_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="20dp"
        android:text="확인" />


</LinearLayout>

코드를 모두 수정했다면 run을 눌러 다음 결과 동영상과 같이 실행되는지 확인한다.

<결과 동영상>

인증 코드는 이메일 주소에서 확인 후 적으면 된다 것이다.

이렇게 회원가입 과정을 구현해보았고 로그아웃 기능도 추가했다.

다음번에는 인증코드 재전송 기능을 구현해보려고 한다.

참고

Authentication - Working with the API - Amplify Docs

github

junjange/aws-Learning