React | Aws Cognito로 구글 로그인 API 연동하기

shin6403·2021년 2월 5일
0
post-thumbnail

aws cognito로 구글 로그인을 붙여보기 전 간단한 개념 설명 먼저 하고, 붙이는 방법을 설명하고자 한다.

1) AWS Cognito란??

  • Amazon Cognito는 웹 및 모바일 앱에 대한 인증, 권한 부여 및 사용자 관리를 제공한다.
  • 사용자는 사용자 이름과 암호를 사용하여 직접 로그인 또는 Facebook, Amazon, Google, Apple 같은 타사 API를 통해 로그인할 수 있다.
  • Amazon Cognito의 두 가지 주요 구성 요소는 사용자 풀자격 증명 풀이다.

1-1. 사용자 풀

사용자 풀은 Amazon Cognito의 사용자 디렉터리이다.

  • 사용자는 Amazon Cognito를 통해, 또는 타사 자격 증명 공급자(IdP)를 통해 연동하여 웹 또는 모바일 앱에 로그인할 수 있다.
  • 사용자가 직접 또는 타사를 통해 로그인하는지 여부와 무관하게 사용자 풀의 모든 멤버는 디렉터리 프로필을 보유하며, SDK를 통해 이를 액세스할 수 있다.

<사용자 풀 제공 사항>

  1. 가입 및 로그인 서비스.
  2. 사용자 로그인을 위한 내장 사용자 지정 웹 UI
  3. Facebook, Google, Login with Amazon 및 Sign in with Apple을 통한 소셜 로그인 및 사용자 풀의 SAML 및 OIDC 자격 증명 공급자를 통한 로그인.
  4. 사용자 디렉터리 관리 및 사용자 프로필.
  5. 멀티 팩터 인증(MFA), 이상 있는 자격 증명 확인, 계정 탈취 보호, 전화 및 이메일 확인과 같은 보안 기능.
  6. AWS Lambda 트리거를 통한 사용자 지정 워크플로우 및 사용자 마이그레이션.

1-2. 자격 증명 풀

자격 증명 풀로 사용자는 임시 AWS 자격 증명을 얻어 Amazon S3 및 DynamoDB 등과 같은 다른 AWS 서비스에 액세스할 수 있다. 자격 증명 풀은 익명 게스트 사용자는 물론 자격 증명에 대한 사용자 인증에 사용할 수 있는 다음 자격 증명 공급자를 지원한다.

<자격 증명 풀 지원 사항>

  1. Amazon Cognito 사용자 풀
  2. Facebook, Google, Login with Amazon 및 Sign in with Apple을 통한 소셜 로그인
  3. OpenID Connect(OIDC) 공급자
  4. SAML 자격 증명 공급자
  5. 개발자 인증 자격 증명
  6. 사용자 프로필 정보를 저장하려면 자격 증명 풀이 사용자 풀에 통합되어야 한다.

2) OAuth란?

생활코딩 OAuth 2.0 강의 영상

OAuth 2.0는 일반적으로 인터넷 사용자가 웹 사이트나 응용 프로그램이 다른 웹 사이트의 정보에 액세스 할 수 있도록 암호를 제공하지 않고 액세스 할 수있는 권한으로 사용 되는 공개 표준이다.

OAuth는 API 또는 서비스가 아니다.

  • 2012 년 10 월에 승인을 위해 승인 된 공개 표준이며 모든 개발자가 이를 구현할 수 있다.
    OAuth 흐름은 클라이언트 응용 프로그램에 “보안 위임 액세스”를 제공한다.

액세스 토큰으로 인증

  • OAuth는 자격 증명이 아닌 액세스 토큰으로 장치, API, 서버 및 응용 프로그램을 인증한다.

3) AWS Amplify

AWS Amplify는 API(API Gateway&Lambda, AppSync), Auth(Cognito), Storage(S3) 등의 서비스를 CloudFormation 기반으로 만들 수 있는 개발 플랫폼이다.

Amplify는 CLI와 Framework으로 나뉜다.

  • Amplify CLI를 통해 프로젝트를 Initialize(초기화)
  • 백엔드 리소스들을 구축 및 배포
  • Framework를 통해 프론트엔드 로직에 Amplify 패키지를 설치
  • Amplify로 배포된 리소스를 코드로써 어렵지 않게 접근하여 사용할 수가 있다.

AWS Cognito Site
Google Cloud Platform Site

🔥Aws Cognito로 구글 로그인 API 연동🔥

이제 본격적으로 React 웹에서 Google 소셜 로그인을 통한 회원가입, 로그인 기능을 구현해보도록 하자.

구글 클라우드 플랫폼 접속 및 환경 설정

아래와 같이 구글 클라우드 플랫폼에 접속한다.
Google Cloud Platform Site

프로젝트 생성

프로젝트 생성을 클릭하면 이름을 입력하게 되고, 좌측 메뉴바에 OAuth 동의화면을 클릭하고 UserType을 외부로 설정한다.

VSC Code 실행 및 파일 생성

아래 코드처럼 creat react로 cli를 설치하고 순서대로 설치한다.

npx create-react-app testvelog

yarn add aws-amplify

amplify init

AWS Amplify 설치 실행 순서

amplify init한 다음 여러가지 질문들이 나오는데 위 링크 영상에서 1:20초부분부터 재생하여 6:10초 까지 똑같이 따라한다.
그 이후에는 다른 설정을 해줘야하는데 영상에는 안나와있다.

console.aws.amazon.com/cognito 접속

AWS Cognito Site

localhost:3000으로 돌아가서 정상 작동 확인하기

AWS Amplify 설치 실행 순서

다시 영상으로 돌아가서 6:10초부터 똑같이 따라한다.

그러면 정상적으로 잘 작동할 것이다.

출처|Amazon Cognito로 시도 해 보는 다양한 방법의 소셜 로그인

profile
생각하는대로 살지 않으면, 사는대로 생각하게 된다.

0개의 댓글