[인스타그램 클론코딩] 웹 구글 로그인 구현

Cognito 소셜 로그인 추가 (이론), Cognito 소셜 로그인 추가 (실전) - 구글 포스트에서 사전 작업이 많았지만, 사용하는 것은 정말 간단합니다.

다름 코드 한 줄이면 끝납니다.

Auth.federatedSignIn({provider: 'Google'}) // 구글 로그인
Auth.federatedSignIn({provider: 'Facebook'}) // 페이스북 로그인

위 코드를 실행하면 자동으로 브라우저에 저장된 소셜 로그인 정보로 Cognito에 회원가입 및 로그인을 하고, 토큰을 받아 옵니다.

참조: Cognito Pre-SignUp 트리거

 

현재 탭에서 Cognito 인증 사이트로 이동후 설정했던 리디렉션 사이트로 이동되므로, isLoggedIn Context를 변경해 줄 필요도 없습니다.

리디렉션 사이트로 이동될 때, 이미 토큰이 Local Storage에 저장되어 있기 때문입니다.

AuthPresenter.js 에서 사용된 사용된 소셜 버튼 컴포넌트

import { Auth } from 'aws-amplify';
 
<SocialButton text={"Google Login"} onClick={() => Auth.federatedSignIn({provider: 'Google'})}>Google Login</SocialButton>

저는 더 이상 구글 로그인과 AWS Cognito를 연결시켜서 사용하지 않습니다.

카카오, 네이버 지원이 안되기 때문에, 어차피 카카오, 네이버 로그인 기능을 서버에 따로 만들어야 합니다.

일관성이 떨어지기 때문에 구글 로그인 기능도 서버에 따로 만들어서 사용합니다.

그리고 페이스북을 통해 AWS Cognito에 연결하면 핸드폰 번호로 로그인할 때 버그가 발생하는거 같습니다.