Login + AI API
소셜 로그인과
AI API 연동
네이버/카카오 로그인으로 사용자를 받고, ChatGPT와 Perplexity API로 서비스 기능을 확장합니다.
오늘 끝나면 만들 수 있는 것
네이버 로그인
네이버 개발자센터에서 앱을 만들고 Callback으로 회원 정보를 받습니다.
카카오 로그인
카카오 Developers 앱 설정 후 인가 코드와 액세스 토큰 흐름을 연결합니다.
ChatGPT API
사용자 입력을 프롬프트로 보내 요약, 작성, 분류 기능을 만듭니다.
Perplexity API
검색 기반 답변이 필요한 기능에 최신 웹 근거 응답을 연결합니다.
전체 구조는 4개의 통로입니다
STEP 1
사용자
브라우저에서 로그인/질문
arrow_forwardSTEP 2
우리 서버
Callback 처리와 API 호출
arrow_forwardSTEP 3
외부 API
네이버, 카카오, OpenAI, Perplexity
arrow_forwardSTEP 4
DB 저장
회원, 토큰, 요청 로그 저장
네이버 로그인 설정 순서
Codex에 "네이버 로그인 구현 후 Callback URL 알려줘" 명령어 입력 후 나오는 Callback URL 복사
네이버 Developers 접속 > 애플리케이션 등록
네이버 Developers에서 애플리케이션 생성
사용 API에 네이버 로그인 추가
서비스 URL과 Callback URL 등록
Callback URL 예: /auth/naver/callback
코덱스에 Client ID / Client Secret 붙여넣기
.env 또는 config에 키 저장 확인
네이버 로그인 요청 흐름
1. 사용자가 네이버로 로그인 클릭
2. 서버가 네이버 로그인 URL로 이동
3. 네이버가 code + state를 callback으로 전달
4. 서버가 code로 access_token 요청
5. access_token으로 사용자 프로필 조회
6. DB 회원 생성/로그인 세션 발급
카카오 로그인 설정 순서
Codex에 "카카오 로그인 구현 후 Callback URL 알려줘" 명령어 입력 후 나오는 Callback URL 복사
접속 후 앱 > 앱등록 메뉴
카카오 로그인 활성화 ON
Redirect URI 등록
동의항목에서 닉네임/이메일 설정
REST API 키 확인
Callback URL 예: /auth/kakao/callback
카카오 로그인 요청 흐름
인가 URL
chevron_rightCallback code
chevron_rightToken 요청
chevron_right사용자 정보
chevron_right세션 로그인
로그인 구현 보안 체크리스트
state 값 검증으로 CSRF 방지
Client Secret은 절대 프론트에 노출 금지
Redirect URI는 정확히 등록된 주소만 사용
토큰은 필요한 경우에만 서버에 저장
세션 만료 시간과 로그아웃 처리
이메일이 없을 수 있는 상황 처리
Codex 보안 점검 프롬프트
현재 프로젝트의 네이버 로그인 연동 API와 카카오 로그인 연동 API 코드를 보안 관점에서 점검해줘. Client ID / Client Secret 노출 여부, Callback URL 검증, state 값 검증, CSRF 방지, 토큰 저장 방식, 사용자 정보 저장 범위, 세션 처리, 로그아웃 처리, 에러 로그 민감정보 노출 여부를 확인하고 수정 필요한 파일과 개선안을 먼저 알려줘.
ChatGPT API는 글을 이해하고 생성하는 엔진입니다
요약
긴 내용을 짧게 정리
작성
본문, 제목, 답변 생성
분류
문의 유형, 태그, 감정 분류
ChatGPT API 요청 흐름
사용자 입력 → 서버 Controller
서버가 프롬프트 구성 → OpenAI API 호출
응답 JSON 또는 Markdown 수신
DB 저장 또는 화면에 출력
Perplexity API는 검색 기반 답변에 강합니다
ChatGPT가 글 생성에 강하다면, Perplexity는 최신 정보와 출처 기반 답변이 필요한 기능에 적합합니다.
최신성
웹 검색 기반 정보 활용
출처
답변 근거 링크 확인
리서치
시장조사, 뉴스 요약, 비교 분석
Perplexity API 요청 흐름
질문 입력
사용자가 리서치 질문 작성
검색형 모델 호출
Perplexity API로 요청
근거 포함 응답
답변과 출처 링크 수신
서비스 출력
요약 카드나 보고서로 표시
테스트는 작은 단위로 나눠서 합니다
네이버 로그인 URL이 정상 생성되는지 확인
Callback에서 code와 state가 들어오는지 확인
토큰 요청 결과와 사용자 정보 응답 확인
카카오 동의항목 누락 여부 확인
ChatGPT API 응답 JSON 파싱 확인
Perplexity 응답의 출처 링크 표시 확인
Lazyweb으로 실제 UI 레퍼런스를 찾습니다
Lazyweb은 AI 에이전트가 257k+ 실제 앱/웹 화면을 참고해 디자인 리서치와 UI 개선 방향을 잡도록 돕는 MCP 기반 도구입니다.
실제 화면 참고
말로만 “예쁘게”가 아니라 실제 서비스 화면을 기준으로 비교합니다.
디자인 리서치
랜딩, 로그인, 대시보드 등 비슷한 화면 패턴을 찾아 방향을 잡습니다.
Codex와 함께 사용
찾은 레퍼런스를 바탕으로 화면 구성, Tailwind UI, 개선안을 요청합니다.