- Language:
- Authentication: , KAKAO Login
- Deploy and Database: Vercel Postgres
- Frontend and Server:
- Validation:
- ORM:
카카오 로그인을 이용한 간단한 로그인 기능을 구현하는 예제입니다.
This is a Next.js project bootstrapped with create-next-app
.
- 카카오 로그인(https://kauth.kakao.com/oauth/authorize)으로 이동 전: previous page url, state 값 저장
- 로그인 성공 경로(/signin/success)에서 state 값 파싱 후 저장 해둔 값과 일치하면 previous page url을 꺼내서 리디렉션
sequenceDiagram
participant Client as User Client
participant Server as Service Server
participant KaKao as KaKao Server
Client->>Client: generate state and save state·previous page url
Note over Client,KaKao: KaKao Login
Client->>KaKao: Click kakao login button(move to https://kauth.kakao.com/oauth/authorize)
KaKao-->>Client: Show authentication, authorization screen
Client->>KaKao: User completes consent
KaKao-->>Server: Redirect to RedirectURI(/oauth/kakao/callback)
Server->>KaKao: Request Token
KaKao-->>Server: Token
Note over Client,KaKao: Verify and enroll members
Server->>KaKao: Fetch user info from https://kapi.kakao.com/v2/user/me
KaKao-->>Server: User info
alt If a new user
Server->>Server: Register a user
end
Note over Client,KaKao: Service login
Server->>Client: Create a service session and redirect to login success page
alt state is vaild
Client->>Client: Create a service session and redirect to [previous page]
else state is invaild
Client->>Client: Invalidate a service session and redirect to [service root page]
end
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.