Cognito 소셜 로그인 추가 (실전) - 구글

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

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

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

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

1. Cognito 도메인 생성

앱 통합 > 도메인 이름에서 원하는 도메인(joondong 부분)을 입력후 가용성 확인 버튼을 클릭해 줍니다.

이 도메인은 사용할 수 있습니다. 메시지가 나타나면 변경 내용 저장 버튼을 클릭해서 도메인을 저장합니다.

Cognito 도메인 생성

2. 구글 사용자 인증 정보 만들기

Google 클라우드 플랫폼 > 사용자 인증정보

Google 클라우드 플랫폼 > 사용자 인증정보

사용자 인증정보 만들기 > OAuth 클라이언트 ID

사용자 인증정보 만들기 > OAuth 클라이언트 ID

OAuth 클라이언트 생성

애플리케이션 유형은 웹 애플리케이션으로 선택해 줍니다.

리액트뿐만 아니라 리액트 네이트브에서도 웹 애플리케이션으로 사용할 수 있습니다.

승인된 자바스크립트 원본에는 1에서 만들었던 도메인 주소를 입력해 줍니다.

승인된 리디렉션 URI에는 1에서 만들었던 도메인 주소에 /oauth2/idpresponse를 추가한 주소를 입력해 줍니다.

마지막으로 생성 버튼 클릭

OAuth 클라이언트 생성

Oauth 클라이언트 ID 정보 확인

클라이언트 ID와 클라이언트 보안비밀을 Cognito에 등록해 주어야 합니다.

Oauth 클라이언트 ID 정보 확인

3. Cognito에 Oauth 클라이언트 ID 정보 입력

연동 > 자격 증명 공급자 > 구글

구글 클라이언트 ID와 클라이언트 보안비밀을 각각 Google 앱 ID와 앱 보안에 입력해 줍니다.

인증 범위는 profile email openid로 설정해 줍니다.

연동 > 자격 증명 공급자 > 구글

연동 > 속성 매핑

구글 사용자의 속성 이름과 Cognito 사용자의 속성 이름은 다릅니다. 이름이 우연히 같다고 해도 Cognito는 인식하지 못하기 때문에 직접 매핑해 주어야 합니다.

사실 구글의 경우 Cognito와 속성 이름이 거의 비슷하지만 페이스북의 경우는 약간 다릅니다. 예를 들어, 페이스북에선 성을 first_name 속성으로 전달하는데, Cognito에선 family_name 속성에 저장합니다.

연동 > 속성 매핑

4. Cognito 리디렉션 주소 설정

expo 클라이언트의 경우

리액트 네이티브 앱이 expo 클라이언트에서 실행될 경우 exp://192.168.43.217:19000 주소가 사용됩니다.

http://localhost:3000은 리액트 앱이 사용하는 임시 주소입니다.

둘 다 앱을 배포할 때는 실제 주소로 변경해 주어야 합니다.

Cognito 리디렉션 주소 설정

앱 배포시

여기 참조

5. 클라이언트 설정

[인스타그램 클론코딩] Amplify 초기화 포스트에서 aws-exports.js가 자동으로 생성되었습니다.

여기서 "oauth" 부분에 접근 정보를 추가해 주어야 합니다.

리액트 aws-exports.js

// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
    "aws_project_region": "<region>",
    "aws_cognito_identity_pool_id": "<cognito_identity_pool_id>",
    "aws_cognito_region": "<region>",
    "aws_user_pools_id": "<user_pools_id>",
    "aws_user_pools_web_client_id": "<user_pools_web_client_id>",
    "oauth": {
        "domain": "joondong.auth.ap-northeast-2.amazoncognito.com",
        "scope": [
            "email",
            "openid",
            "profile",
        ],
        "redirectSignIn": "http://localhost:3000",
        "redirectSignOut": "http://localhost:3000",
        "responseType": "code"
    },
    "federationTarget": "COGNITO_USER_POOLS"
};


export default awsmobile;

리액트 네이티브 aws-exports.js

// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
    "aws_project_region": "<region>",
    "aws_cognito_identity_pool_id": "<cognito_identity_pool_id>",
    "aws_cognito_region": "<region>",
    "aws_user_pools_id": "<user_pools_id>",
    "aws_user_pools_web_client_id": "<user_pools_web_client_id>",
    "oauth": {
        "domain": "joondong.auth.ap-northeast-2.amazoncognito.com",
        "scope": [
            "email",
            "openid",
            "profile",
        ],
        "redirectSignIn": "exp://192.168.43.217:19000/--/",
        "redirectSignOut": "exp://192.168.43.217:19000/--/",
        "responseType": "code"
    },
    "federationTarget": "COGNITO_USER_POOLS"
};


export default awsmobile;

당연히 실제로 배포할 때는 redirectSignIn과 redirectSignOut을 실제 앱의 주소로 바꿔주어야 합니다.

6. 클라이언트에서 사용

이제 Amplify에서 제공되는 Auth 객체를 통해 코드 한 줄로 앞에서 만든 인증업체에 로그인할 수 있습니다.

import { Auth } from 'aws-amplify';

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

이제 리액트와 리액트 카테고리의 인스타그램 클론 인증 포스트에서 위의 코드를 사용해 보겠습니다.