“ 무료 소프트웨어를 두려워하는 사람들은 자신들의 제품이 그것보다 못하기 때문이다. ”
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,
})이런식으로 서버에서 받아서 처리하는 방식도 있다.
혹시나 프론트에서 발급받는 과정에 대해 보안상 이슈나 이런게 있을수도있고, 있다고하면 위 방식대로 진행하면된다.
틀리거나 다른 의견이 있는분들은 댓글로 작성해주시면 감사하겠습니다.!!
서로 공부하며 발전해가는 하루 되길 바랍니다.!
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,
})이런식으로 서버에서 받아서 처리하는 방식도 있다.
혹시나 프론트에서 발급받는 과정에 대해 보안상 이슈나 이런게 있을수도있고, 있다고하면 위 방식대로 진행하면된다.
틀리거나 다른 의견이 있는분들은 댓글로 작성해주시면 감사하겠습니다.!!
서로 공부하며 발전해가는 하루 되길 바랍니다.!
