[Strapi] 구글 로그인 연동 커스텀하기

목표

이 강의에서는 Strapi에 Google OAuth를 연동하는 방법을 배웁니다. 기본적으로 Strapi에서 간단한 연동방법을 제공하지만, 구글에 저장된 프로필의 사용자 이름을 가져오지 않고 mail의 @의 앞부분을 가져오도록 되어 있습니다. 이 부분을 보완하여 프로필에 저장된 이름을 가져오도록 해보는 강의입니다.

Strapi 소개

Strapi는 백엔드에 대한 전문적인 지식이 없어도 손쉽게 RESTful API를 만들어주는 NodeJs기반의 Headless CMS입니다. Frontend 개발자, App 개발자는 Strapi를 설치만 하면 Backend 개발자 도움없이 스스로 클라이언트 만드는데만 집중할 수 있습니다.

Strapi를 이해하는데 도움이 되는 약간의 특징은 다음과 같습니다.

• Headless란, 머리가 없는, 즉 Frontend(화면)이 없다는 의미로 API까지만 제공합니다.
• CMS이므로 웹기반의 관리자 화면(Admin Panel)이 제공되고 대부분은 코딩없이 화면 클릭만으로 백엔드 만드는 것이 가능합니다.(워드프레스처럼)
• Admin Panel에서 DB 테이블(Collection 이라 부릅니다)을 생성하면, 테이블 단위로 CRUD에 해당하는 Rest API가 자동 생성됩니다.
• 테이블 이름의 복수형이 API의 EndPoint(/api/freeboards)가 되고, Create(Post), Read(Get), Update(Put), Delete(Delete) 에 대응됩니다.
• 기본적으로 API는 권한을 부여 받아야만 사용이 가능합니다.
• NodeJs가 제공하는 거의 모든 기능을 커스터마이징하여 사용이 가능합니다.

Strapi Google 로그인 내장 모듈의 한계

Strapi에 내장된 Purest라는 3rd-Party 로그인 연동은 매우 훌륭하지만, 우리가 흔히 쓰는 인증중의 하나인 구글 로그인의 경우, 사용자 프로필 정보를 가져오는 부분에 있어서 약간 아쉬운점을 발견했습니다.

Strapi 내장 모듈은 구글 계정의 사용자의 이름을 가져오지 않고 mail의 @를 기준으로 앞부분을 username으로 가져옵니다.

구글 인증 관련 코어파일인, user-permissions 플러그인의 providers-registry.js 의 내부를 살펴보면, 그 이유를 알 수 있습니다.

96번째 줄을 보면, email을 @로 split한 다음 첫번째([0]) 값을 가져오도록 되어있죠? 사용자의 이름은 구글에서는 개인 정보로 취급합니다. 따라서 기본 연동으로는 이름을 가져올 수 없으며, 애플리케이션에서 권한 범위를 확대하여 이름 정보를 가져올 수 있습니다.

이 강의를 통해 아쉬운점 보완

그렇다면, 이 강의를 통해서 구글의 내 프로필 정보에 있는 이름을 제대로 가져오도록 코어 모듈을 커스터마이징하여 완성해보도록 하겠습니다.

강의 진행 과정

아래와 같은 항목들을 이번 강의에서 진행하게 됩니다. Strapi 설치와 GCP 설정, ReactJs를 이용하여 간단한 프론트엔드까지 구현해보도록 하겠습니다.

1. Strapi v4 설치
2. GCP 설정
3. Strapi 설정
4. Strapi 코어(Core) 수정
5. ReactJs로 프론트엔드 구현