로컬 상태의 aws amplify , cognito 로그인/회원가입 연동하기 (1)

저번에 했던 웹 구축에 이어서 aws에 있는 cognito를 사용하여 간단한 회원가입, 로그인을 연동시켜보겠습니다.

제목에 로컬 상태라고 적은 것은 로컬 상태와 서버에 배포한 상태의 결과가 다르기 때문입니다.

다음에 서버에 올릴 때 추가적으로 해야 하는 파트를 따로 작성하여 올리겠습니다.

 

로그인을 만드는 것은 

https://docs.amplify.aws/lib/auth/getting-started/q/platform/js/

https://docs.amplify.aws/lib/auth/getting-started/q/platform/js/

aws에서 기본으로 알려주는 방식을 토대로 작성하였습니다.

 

먼저 

 backend에서 get started를 눌러서 backend를 활성화합니다.

 

이렇게 활성화가 진행이 되고 

 

완료가 되면 위와 같이 활성화됩니다.

 

이제 console에서 backend와 연동을 시켜줍니다.

위 그림처럼 amplify pull <amplify 이름>을 입력하면 어떻게 설정할 것인지 나오며 위와 같이 입력을 하면 다 넘어가 집니다.

Successfully pulled backend environment staging from the cloud.이라고 나오면 이상 없이 완료가 된 것입니다.

 

이제 로그인/회원가입 부분을 연결시켜 봅시다!

amplify add auth를 입력합니다. 이는 Authentication를 backend에 생성하는 작업입니다.

위 그림과 같이 입력을 선택하면 이상 없이 넘어가지는 모습을 볼 수 있습니다.

? Do you want to use the default authentication and security configuration? Default configuration
? How do you want users to be able to sign in? Username
? Do you want to configure advanced settings?  No, I am done.

혹시 몰라 확인용으로 위 코드도 남겨놓았습니다.

 

이제 amplify push를 통해 서버에 지금까지 한 작업을 전송시켜 줍니다.

작업이 완료되면 backend 부분은 완료된 상태입니다.

 

이제 다시 web을 추가 작업을 해야 합니다.

web상에 amplify 관련하려 추가하기 위해 아래 코드를 입력하여 설치합니다.

npm install aws-amplify

설치를 하고 나서 아래의 코드를 app.js에 아래 코드를 입력하고 npm start를 통해 실행을 합니다.

import Amplify, { Auth } from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);

위 그림처럼 아무 이상 없이 실행이 되었다면 amplify와 연동이 된 것입니다.

여기까지 이상 없이 왔다면 잘하고 있는 겁니다.!

 

다음에는 이어서 로그인 회원가입 기본적인 UI를 연동시키는 작업을 진행하겠습니다.