느린 개발자

 

Nuxt 카카오 로그인 설정 및 카카오 정보 발급

---

Nuxt 프로젝트를 하나 만들어주자.

npx create-nuxt-app <project-name>

create-nuxt-app v3.4.0
✨  Generating Nuxt.js project in test

# 프로젝트명 입력
? Project name: (test) 

# 프로그래밍 언어 선택
? Programming language: (Use arrow keys)
> JavaScript 
  TypeScript 

# 패키지 매니저 선택  
? Package manager: (Use arrow keys)
> Yarn 
  Npm 
  
# UI 프레임워크 선택
? UI framework: (Use arrow keys)
> None 
  Ant Design Vue 
  Bootstrap Vue 
  Buefy 
  Bulma 
  Chakra UI 
  Element 
  Framevuerk 
  iView 
  Tachyons 
  Tailwind CSS 
  Vuesax 
  Vuetify.js 
  
# Nuxt 모듈 선택
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>◯ Axios
 ◯ Progressive Web App (PWA)
 ◯ Content
 
# Linting 도구 선택
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>◯ ESLint
 ◯ Prettier
 ◯ Lint staged files
 ◯ StyleLint
 ◯ Commitlint
 
# 테스트 프레임워크 선택
? Testing framework: (Use arrow keys)
> None 
  Jest 
  AVA 
  WebdriverIO 
  
# 렌더링 모드 선택 (SSR / SPA)
? Rendering mode: (Use arrow keys)
> Universal (SSR / SSG) 
  Single Page App 
  
# 배포 대상 선택 (서버 호스팅 / 정적 호스팅)
? Deployment target: (Use arrow keys)
> Server (Node.js hosting) 
  Static (Static/JAMStack hosting) 
  
# 개발 도구 선택
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>◯ jsconfig.json (Recommended for VS Code if you're not using typescript)
 ◯ Semantic Pull Requests
 ◯ Dependabot (For auto-updating dependencies, GitHub only)
 
# GitHub 사용자명 입력
? What is your GitHub username? (username) 
  
# 버전 관리 시스템 선택
? Version control system: (Use arrow keys)
> Git 
  None

 

nuxt.config 안에 카카오 SDK 스크립트 설정

• head 안에 작성해주면된다.

script:[
  { src: 'https://developers.kakao.com/sdk/js/kakao.min.js' }
]

 

 

카카오 Developers  Redirect URI로 등록해준 페이지 생성

kakao-callback 페이지 URL Query로 인가코드가 발급된다.

 

발급받은 인가코드로 카카오 토큰 정보 발급

카카오 클라이언트 ID = REST API Key(개발자 앱키)

AXIOS_BASE_URL = localhost:3000

code = 인가코드

 

data 파일을 위 형식대로 만들어주고  카카오 토큰 URL로 post 요청을 한다.

 

※주의※

header application/x-www ... 이 부분이 제일 중요하다.

카카오 api 요청할시 Content-Type헤더는 이런식으로 만들어줘야한다.

 

만약에 위에처럼 Header 포함해서 보낼때 에러 발생하거나 안될시  자기 프로젝트에서

axios interceptors 설정했는지 확인해보자

axios.interceptors.request.use((config)=>{

    config.headers["Content-Type"] = "application/json; charset=utf-8";
    return config
  },
  (error)=>{
    return Promise.reject(error)
  })

axios 요청 보내기 전에 설정하는 문법으로 이미 header가 설정되어있으면  json 형식 헤더로 고정된다.

(이 원인이 아니면 댓글로 다른 무엇인지 알려주세요!!)

 

인가코드로 토큰 발급받으면 이런식으로 나옵니다.

 

---

 

발급받은 엑세스 토큰으로(access_token) 유저 정보 조회

header Authorization 안에 엑세스 토큰 추가해준다.

반응형

Kakao_USER_INFO_URL 로 Axios get 요청을 한다.

 

유저 정보가 조회된다.

 

이제 위에 정보를 바탕으로 서버에서는

 

1. 유저정보 받기

2. DB저장

3. jwt 토큰 발행

 

이렇게 진행된다. 

 

※ 만약 프론트에서 전부 정보를 발급받지않고 서버를 통해서 하는 방법은

1. 프론트에서 인가코드만 받고 서버로 넘겨준다

2. 서버에서 위에 방식과 같게 카카오 API URL 에 axios 요청하여 발급받아서 컨트롤하면된다. 

 

예를 들어 express에서 인가코드만 받고 카카오 토큰 발급받는 코드

  token = await axios({//token
        method: 'POST',
        url: 'https://kauth.kakao.com/oauth/token',
        headers:{
            'content-type':'application/x-www-form-urlencoded'
        },
        data:qs.stringify({
            grant_type: 'authorization_code',
            client_id:kakao.clientID,
            client_secret:kakao.clientSecret,
            redirectUri:kakao.redirectUri,
            code:req.query.code,
        })

이런식으로 서버에서 받아서 처리하는 방식도 있다.

 

혹시나 프론트에서 발급받는 과정에 대해 보안상 이슈나 이런게 있을수도있고, 있다고하면 위 방식대로 진행하면된다.

 

 

틀리거나 다른 의견이 있는분들은 댓글로 작성해주시면 감사하겠습니다.!!

서로 공부하며 발전해가는 하루 되길 바랍니다.!