소셜 로그인 설정하기

제공자를 선택해 앱을 등록하고 클라이언트 ID를 DontCode에 붙여넣는 단계별 가이드를 확인하세요.

제공자당 약 10분

설정 가이드

제공자 선택

각 제공자는 개발자 콘솔, 용어, 승인 절차가 다릅니다. 설정하려는 제공자의 가이드를 열어주세요. 서로 독립적이므로 하나만 설정하고 넘어가도 됩니다.

카카오 OAuth 설정

한국 시장에 필수입니다. 카카오 로그인 옵션 없이는 가입을 포기하는 한국 사용자가 많습니다. 참고: DontCode는 모든 사용자에 이메일이 필요한데, 카카오는 일반 앱에는 이메일 수집을 허용하지 않습니다 — "비즈 앱"으로 전환해야 합니다. 본 가이드는 OAuth 자격 증명 등록과 비즈 앱 전환(무료, 사업자등록번호가 없는 개인 개발자도 가능) 모두를 안내합니다.

가이드 열기 →

Google OAuth 설정

전 세계적으로 사용됩니다. 대부분 이미 Google 계정을 가지고 있어 한국 외 지역에서 가장 높은 전환율을 보입니다.

가이드 열기 →

이 가이드에서 할 일

활성화할 OAuth 제공자별로 개발자 프로젝트를 생성하고, 리다이렉트 URL을 설정하고, 클라이언트 ID를 복사해 DontCode 프로젝트에 붙여넣습니다. 재배포하면 라이브 사이트의 소셜 로그인 버튼이 작동하기 시작합니다.

시작 전 준비사항

DontCode 프로젝트가 배포되어 있거나, 배포 예정 URL이 준비되어 있어야 합니다.
활성화할 각 제공자의 개발자 계정이 필요합니다.
DontCode 프로젝트의 admin 또는 owner 권한이 있어야 합니다.

리다이렉트 URL

모든 제공자는 "Redirect URI" 또는 "Callback URL"을 요구합니다. 사용자가 로그인을 승인한 후 돌아올 주소입니다. DontCode 앱의 패턴은 제공자와 무관하게 동일합니다:

https://<배포된-도메인>/api/auth/oauth/callback

<배포된-도메인>을 실제 배포 URL로 바꾸세요. 커스텀 도메인을 사용 중이면 그것을 사용합니다. 각 제공자에 여러 리다이렉트 URL을 등록할 수 있어, *.dontcode.cafe 서브도메인과 커스텀 도메인을 함께 사용하기에 좋습니다.

OAuth 작동 방식 (30초 요약)

사용자가 배포된 앱에서 "X로 로그인"을 클릭합니다.
앱이 클라이언트 ID와 함께 제공자로 리다이렉트합니다.
사용자가 제공자 페이지에서 로그인을 승인합니다.
제공자가 일회용 코드와 함께 앱으로 다시 리다이렉트합니다.
앱이 그 코드로 사용자 정보(이메일, 이름 등)를 받아 세션을 생성합니다.

문제 해결 (모든 제공자 공통)

"redirect_uri_mismatch" 오류가 표시됨

제공자에 등록한 리다이렉트 URL이 실제 배포된 앱의 URL과 일치하지 않습니다. 철자, http vs https, 끝의 슬래시를 확인하세요. 대부분의 제공자는 여러 리다이렉트 URI를 등록할 수 있으니, 사용하는 모든 변형(커스텀 도메인 + dontcode.cafe 서브도메인)을 추가하세요.

저장 후에도 로그인 버튼이 나타나지 않음

OAuth 클라이언트 ID는 다음 배포 시점에만 실제 앱에 반영됩니다. 에디터에서 배포를 누르면 새 빌드 후 버튼이 나타납니다.