aws cognito로 구글 로그인을 붙여보기 전 간단한 개념 설명 먼저 하고, 붙이는 방법을 설명하고자 한다.
1) AWS Cognito란??
- Amazon Cognito는 웹 및 모바일 앱에 대한 인증, 권한 부여 및 사용자 관리를 제공한다.
- 사용자는 사용자 이름과 암호를 사용하여 직접 로그인 또는 Facebook, Amazon, Google, Apple 같은 타사 API를 통해 로그인할 수 있다.
- Amazon Cognito의 두 가지 주요 구성 요소는
사용자 풀과자격 증명 풀이다.
1-1. 사용자 풀
사용자 풀은 Amazon Cognito의 사용자 디렉터리이다.
- 사용자는 Amazon Cognito를 통해, 또는 타사 자격 증명 공급자(IdP)를 통해 연동하여 웹 또는 모바일 앱에 로그인할 수 있다.
- 사용자가 직접 또는 타사를 통해 로그인하는지 여부와 무관하게 사용자 풀의 모든 멤버는 디렉터리 프로필을 보유하며, SDK를 통해 이를 액세스할 수 있다.
<사용자 풀 제공 사항>
- 가입 및 로그인 서비스.
- 사용자 로그인을 위한 내장 사용자 지정 웹 UI
- Facebook, Google, Login with Amazon 및 Sign in with Apple을 통한 소셜 로그인 및 사용자 풀의 SAML 및 OIDC 자격 증명 공급자를 통한 로그인.
- 사용자 디렉터리 관리 및 사용자 프로필.
- 멀티 팩터 인증(MFA), 이상 있는 자격 증명 확인, 계정 탈취 보호, 전화 및 이메일 확인과 같은 보안 기능.
- AWS Lambda 트리거를 통한 사용자 지정 워크플로우 및 사용자 마이그레이션.
1-2. 자격 증명 풀
자격 증명 풀로 사용자는 임시 AWS 자격 증명을 얻어 Amazon S3 및 DynamoDB 등과 같은 다른 AWS 서비스에 액세스할 수 있다. 자격 증명 풀은 익명 게스트 사용자는 물론 자격 증명에 대한 사용자 인증에 사용할 수 있는 다음 자격 증명 공급자를 지원한다.
<자격 증명 풀 지원 사항>
- Amazon Cognito 사용자 풀
- Facebook, Google, Login with Amazon 및 Sign in with Apple을 통한 소셜 로그인
- OpenID Connect(OIDC) 공급자
- SAML 자격 증명 공급자
- 개발자 인증 자격 증명
- 사용자 프로필 정보를 저장하려면 자격 증명 풀이 사용자 풀에 통합되어야 한다.
2) OAuth란?
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로 구글 로그인 API 연동🔥
이제 본격적으로 React 웹에서 Google 소셜 로그인을 통한 회원가입, 로그인 기능을 구현해보도록 하자.
구글 클라우드 플랫폼 접속 및 환경 설정
아래와 같이 구글 클라우드 플랫폼에 접속한다.
Google Cloud Platform Site
프로젝트 생성
프로젝트 생성을 클릭하면 이름을 입력하게 되고, 좌측 메뉴바에 OAuth 동의화면을 클릭하고 UserType을 외부로 설정한다.
VSC Code 실행 및 파일 생성
아래 코드처럼 creat react로 cli를 설치하고 순서대로 설치한다.
npx create-react-app testvelog
yarn add aws-amplify
amplify initamplify init한 다음 여러가지 질문들이 나오는데 위 링크 영상에서 1:20초부분부터 재생하여 6:10초 까지 똑같이 따라한다.
그 이후에는 다른 설정을 해줘야하는데 영상에는 안나와있다.
console.aws.amazon.com/cognito 접속
localhost:3000으로 돌아가서 정상 작동 확인하기
다시 영상으로 돌아가서 6:10초부터 똑같이 따라한다.
그러면 정상적으로 잘 작동할 것이다.
