[바이브코딩 기초 3] 로그인 붙이기

“카카오 로그인을 붙여줘.” AI에게 요청했더니 키와 콜백 주소를 설정해달라고 합니다. 버튼은 보이는데, 눌러서 로그인하려면 무엇을 더 해야 할까요?

손님이 평소 쓰는 카카오·구글·네이버 계정으로 들어오게 하면, 내 서비스 전용 아이디와 비밀번호를 새로 정하는 과정을 줄일 수 있습니다. 이를 소셜 로그인이라고 해요. 버튼을 만든 뒤에는 제공자에게 내 서비스를 등록하고, 로그인 결과를 받아 회원을 확인하는 처리를 연결합니다.

이번에는 제공자 사이트에서 무엇을 준비하고, 내 서비스에는 어떤 설정을 넣는지 살펴볼게요. 2편의 관리자 전용 로그인은 따로 두고, 이번에는 손님이 서비스를 이용할 때 쓰는 로그인을 연결합니다.

로그인한 사람을 누가 확인하나요?

손님이 카카오 로그인 버튼을 누르면 카카오의 로그인·동의 화면을 거칩니다. 카카오는 확인한 결과를 대표님의 서비스로 돌려보내고, 서비스는 그 결과로 회원을 확인합니다.

그다음부터 손님이 상품 목록이나 내 정보 화면을 오갈 때도 같은 회원이라는 사실을 알아야겠죠. 내 서비스가 관리하는 이 로그인 상태를 세션이라고 부릅니다.

제공자가 계정을 확인해줘도 내 서비스에서 사용할 회원 정보는 필요합니다. 누가 주문했고 어떤 글을 썼는지 내 회원과 연결하고, 다음 방문에도 같은 사람을 알아보는 처리는 서비스 쪽에서 맡아요.

키와 콜백 주소부터 풀어볼게요

제공자 사이트에서 ‘앱 등록’이라고 불러도 반드시 휴대폰 앱을 만들라는 뜻은 아닙니다. 이번에는 웹 서비스를 등록하는 과정이에요.

콜백 주소도 홈페이지 주소와 다를 수 있습니다. 손님을 잠깐 받아 로그인 결과를 처리할 전용 주소라고 생각하면 돼요. 처리를 마친 뒤 상품 목록으로 돌아가는 것은 그다음 동작입니다.

먼저 AI에게 현재 프로젝트의 설정 목록을 받아요

키를 발급받기 전에 지금 만드는 서비스의 로그인 구현과 설정을 확인합니다. 이미 로그인 기능이 있다면 그 구성을 이어 쓸 수 있는지도 살펴봐요.

이 서비스에 [카카오 / 구글 / 네이버 중 선택] 로그인을 연결해줘.
기존 로그인 코드와 회원 DB가 있다면 먼저 확인하고, 그 구성을 이어서 사용해줘.

내가 제공자 사이트에서 준비할 항목을 정리해줘.
현재 개발 주소와 실제 배포 주소에 맞는 콜백 주소를 각각 알려줘.
서버에 등록할 환경변수 이름과, 각각 어떤 값을 넣을지도 알려줘.

로그인 버튼, 로그인 후 원래 화면으로 복귀, 사용자 표시, 로그아웃을 연결해줘.
서비스 회원용 소셜 로그인으로 연결해줘.
관리자 전용 계정과 로그인 상태는 따로 유지해줘.
비밀 값은 내가 서버 설정에 직접 등록할게.

한 제공자로 로그인·로그아웃을 확인한 다음 다른 제공자를 추가하면, 어느 설정에서 문제가 났는지 찾기 편합니다.

콜백 주소는 실제 서비스 주소에 맞춰요

콜백 주소의 경로는 로그인 구현에 따라 다릅니다. 아래는 로그인 기능을 만드는 라이브러리인 Better Auth의 기본 경로를 사용한 예시예요. myshop.example은 설명용 주소이므로 그대로 복사하지 않고, AI가 현재 프로젝트에서 확인한 실제 주소를 사용합니다.

개발 중에는 미리보기 주소를 쓰기도 하고, 내 컴퓨터에서 실행한다면 localhost 주소를 쓰기도 합니다. 어느 주소를 사용할지는 지금 작업하는 환경에 맞춰 AI가 확인하도록 요청해요.

서비스의 배포 주소나 도메인을 바꿨다면 로그인 설정에도 새 주소를 맞춥니다. 주소의 앞부분뿐 아니라 뒤의 /api/auth/callback/... 경로까지 같은지 확인합니다.

카카오: REST API 키와 로그인 사용 설정

Kakao Developers에서 앱을 만들거나 기존 앱을 선택합니다. 이 글의 서버 연동 방식에서는 여러 키 중 REST API 키를 사용합니다.

카카오 로그인 사용 설정. Kakao Developers 제공.

환경변수 이름은 AI가 프로젝트 코드와 맞춰 정합니다. 아래는 이름을 이렇게 정했을 때의 대응 예시예요.

현재 카카오는 REST API 키를 추가할 때 Client Secret 기능을 활성화합니다. 예전 안내를 보고 이 값을 빼기보다, 사용 중인 키의 설정에서 확인해 함께 연결합니다.

이메일을 받으려면 앱에서 해당 동의 항목을 사용할 수 있는지도 확인해요. 내 앱에 허용한 정보와 로그인 코드가 요청하는 정보가 맞아야 합니다. AI에게 이메일이 없는 경우의 회원 가입 처리도 함께 확인해달라고 요청할 수 있습니다.

구글: 웹 애플리케이션용 클라이언트 만들기

Google Cloud Console에서 프로젝트를 선택하고 Google Auth Platform을 엽니다. 여기서는 구글 로그인을 위한 등록 정보만 준비합니다.

메뉴는 Google의 클라이언트 생성 안내에서도 확인할 수 있습니다.

개발·테스트용 등록과 운영용 등록을 구분하고, 각 환경의 주소와 키를 짝지어 사용합니다. 일반 사용자에게 공개하기 전에는 앱의 공개 상태와 필요한 검증 절차를 확인해요.

로그인하다 redirect_uri_mismatch라는 오류가 나오면, 코드가 사용한 콜백 주소와 콘솔에 등록한 주소를 비교합니다. http와 https, 포트 번호, 경로까지 맞는지 보는 거예요.

네이버: 서비스 URL과 Callback URL 등록하기

NAVER Developers의 애플리케이션 등록에서 시작합니다. 사용할 API로 네이버 로그인을 선택하고 웹 서비스 환경을 등록해요.

서비스 URL에는 홈페이지 주소를, Callback URL에는 로그인 결과를 처리할 주소를 넣습니다. 홈페이지가 https://myshop.example이라면 콜백은 https://myshop.example/api/auth/callback/naver처럼 뒤에 경로가 붙을 수 있어요.

네이버는 개발 후 일반 사용자에게 공개할 때 검수 절차를 진행합니다. 요청할 사용자 정보와 동의 과정, 실제 로그인 동작을 확인해 검수 자료를 준비합니다. 네이버 로그인 개발가이드

발급받은 값은 서버 설정에 넣어요

Client ID와 Client Secret을 받았다면 서버 코드가 사용할 수 있게 연결합니다. 대표적인 방법은 환경변수에 이름과 값을 등록하는 거예요. 환경변수는 코드를 바꾸지 않고 전달할 수 있는 설정값입니다.

예를 들어 이름을 KAKAO_CLIENT_SECRET으로 정했다면 설정의 이름 칸에는 그 문자를 넣습니다. 실제로 발급받은 긴 비밀 문자열은 값 칸에 넣고요. 서버 코드도 같은 이름으로 값을 읽도록 작성합니다.

어느 화면이나 파일에 등록하는지는 개발·배포 환경마다 다릅니다. 먼저 AI에게 현재 프로젝트에서 값을 넣을 위치를 확인해달라고 요청할 수 있습니다. 비밀 값을 브라우저에 보내는 화면 코드에 적지는 않습니다.

알려준 로그인용 값을 서버 환경변수에 등록했어. 코드가 해당 이름으로 값을 읽도록 연결해줘. 지금 확인하는 개발 환경과 실제 배포 환경에서 각각 어떤 설정을 쓰는지도 확인해줘.

내 컴퓨터에서 로그인에 성공해도 배포한 서비스에는 값이 없을 수 있습니다. 두 환경의 설정과 콜백 주소를 구분해서 맞추고, 설정을 바꾼 뒤에는 사용 중인 배포 방식에 따라 새 값을 반영합니다.

마지막에는 실제 서비스에서 로그인해봐요

제공자의 로그인 화면을 통과했다면, 이제 내 서비스에서 동작을 확인합니다.

여기서 로그아웃은 내 서비스의 세션을 끝내는 동작입니다. 사용자의 카카오·구글·네이버 계정을 브라우저 전체에서 모두 로그아웃시키는 뜻은 아니에요.

오류가 나면 제공자 이름, 실패한 단계, 콜백 주소, 비밀 값이 없는 오류 메시지를 AI에게 전달합니다. 비밀 값이나 로그인 중 발급한 토큰을 그대로 채팅에 붙일 필요는 없습니다.

소셜 로그인을 연결할 때는 제공자에 등록한 정보, 서버에서 읽는 설정, 내 서비스의 회원 처리를 함께 맞춥니다. 같은 순서를 다른 제공자에도 적용할 수 있어요.

컴윗에는 이 작업에 사용할 로그인 기본 코드와 회원 데이터를 보관할 DB, 배포 환경을 미리 준비해두었어요. 컴윗 프로젝트에서는 그 기반을 사용하면서 대표님의 제공자 등록 정보를 연결하도록 AI에게 요청할 수 있어요.

로그인이 막히면, 발급한 키와 서비스 주소·콜백 주소가 같은 환경을 가리키는지부터 비교해보면 좋을 것 같아요.