Strapi & Google Login Flow

먼저 전반적으로 이 강의가 어떻게 진행되는지 숲을 보기 위해 Flow 다이어그램부터 보도록 하겠습니다.

각 주체는 크게 Frontend, Backend, Google 3단으로 먼저 구성해봤습니다.

Frontend는 잘 아시다시피 클라이언트로 웹이나 App서비스가 되고 Backend는 Strapi입니다. 번호를 매긴 순서대로 흘러가며 Google OAuth 인증에 대한 지식이 어느정도 있어야 아래 그림이 이해가 되는데 지금은 아래 내용은 완벽히 이해하지 않아도 됩니다. 수업이 진행되면서 차근차근 설명해 드리겠습니다.

번호 순서대로 한번 따라가 보기만 하세요.

Strapi 구글로그인 연동의 단점

기본적으로 Strapi가 구글 인증을 제공하긴 합니다만,  구현해보신 분은 아시겠지만 Strapi의 사용자계정의 이름필드인 username의 경우, 구글에서 설정한 사용자 이름이 아니라  mail의 @를 기준으로 앞부분인 구글 아이디를 채워 넣도록 설계되어 있습니다. (Strapi의 구글 인증 부분에서 이부분이 보완되어 코어가 버전업이 되면 바뀔수도 있겠습니다만, 강의를 쓰고 있는 현재 2023년 6월까지는 아직도 안되어 있습니다.)

즉, 예를 들면, teracokr@gmail.com 이라는 계정의 구글 사용자 이름은 Tera입니다.

하지만 현재버전의 Strapi를 이용하여 구현하면, username에 Tera가 아니라 teracokr이 들어갑니다.

이 부분을 커스터마이징 하여 Tera를 가져오는 것이 이 강의의 핵심입니다.

제대로 구현된 모습을 한번 보겠습니다.

Google OAuth 클라이언트 설정

Google Cloud Platform은 항상 뭔가 어려운 것 같습니다. 구글 로그인 연동을 위해 필요한 OAuth 클라이언트 설정에 필요한 모든 것을 자세히 안내해 드리도록 하겠습니다.

프론트엔드 ReactJs

Strapi는 Headless CMS이므로 API까지만 제공하고, 프론트엔드 화면은 여러분이 직접 구현을 해야합니다. ReactJs를 이용하여 간단히 구현해 보도록 하겠습니다.