반응형
다음은 이 글의 동영상 강좌입니다.
카카오 로그인 기능을 만들어봅니다.
진행 순서는 다음과 같습니다.
- 카카오 developer 사이트에서 application 생성
- 프론트 개발
- 백엔드 개발
보다 자세한 설명은 이전 영상을 보시면 됩니다.
https://www.youtube.com/watch?v=E-a-wQqybbE
카카오 developer 사이트에서 application 생성
- 우선 카카오 로그인을 사용하기 위해 https://developers.kakao.com/ 에서 로그인을 합니다.
- 상단의 내 애플리케이션 메뉴를 클릭 합니다.
- 애플리케이션 추가하기를 클릭합니다.
- 애플리케이션 정보를 입력합니다.
- 애플리케이션 목록에서 새로 만든 slider를 확인할 수 있습니다.
- slider 앱을 클릭하면 앱에 대한 정보를 확인할 수 있습니다.
- 플랫폼 -> 플랫폼 설정하기를 클릭합니다.
- 우리는 Web으로 개발을 할 것이므로 web을 클릭합니다. 사이트 도메인에 http://localhost:3000 를 입력한 후 저장합니다.
*http://localhost:3000 는 로컬에서 프론트를 개발하여 테스트 하기 위한 정보입니다.
- 저장이 완료되면 다음과 같이 변경된것을 확인할 수 있습니다. 여기서 Redirect URI 등록하러 가기를 클릭합니다.
- 활성화 설정은 ON 으로 변경하고, Redirect URI 등록을 클릭합니다.
- Redirect URI에 http://localhost:3000/kakao-callback 을 입력합니다.
- Left 메뉴에서 카카오로그인 -> 동의 항목을 클릭합니다.
- 동의 항목은 카카오 로그인시 가져올 수 있는 고객의 정보를 선택하는 화면입니다.
- 설정 항목을 클릭한 후 필수 또는 선택 동의로 변경하고, 저장합니다.
* 필수 동의(검수 필요)가 disable되어 있는 경우는 비즈니스 채널을 신청해야만 선택할 수 있습니다.
- 카카오 애플리케이션 설정이 완료되었습니다.
프론트 개발
- slider-front 프로젝트를 open 합니다.
- https://developers.kakao.com/tool/resource/login 에서 카카오 로그인 버튼 이미지를 다운 받습니다.
- 다운로드 받은 이미지를 프로젝트의 /static/images/kakao_login.png로 복사합니다.
- 카카오 로그인 모듈을 사용하기 위해
/nuxt.config.js 의 head 부분에 다음을 추가합니다.
script: [
{
src: 'https://developers.kakao.com/sdk/js/kakao.js'
}
]- index page를 수정합니다.
/pages/index.vue
<template>
<a @click="loginWithKakao">
<img src="/images/kakao_login.png"/>
</a>
</template>
<script>
export default {
name: 'IndexPage',
methods: {
kakaoInit () {
Kakao.init('329a6a74...')// KaKao client key
Kakao.isInitialized()
},
async loginWithKakao () {
await Kakao.Auth.authorize({
redirectUri: `${window.location.origin}/kakao-callback`
})
}
},
mounted () {
this.kakaoInit()
}
}
</script>- callback 페이지를 추가합니다.
/pages/kakao-callback.vue
<template>
<div>
로그인 중 입니다...
</div>
</template>
<script>
export default {
async mounted () {
try {
// code 유무 체크
if (!this.$route.query.code) {
return this.$router.push('/')
}
console.log(`code : ${this.$route.query.code}`)
// 서버 로그인 요청(kakao 인증 코드 전달)
const body = {
code: this.$route.query.code,
domain: window.location.origin
}
const response = await this.$axios.$post(
'/auth/login', body, {}
)
console.log(response)
} catch (error) {
console.log(error)
}
}
}
</script>- 이제 프론트를 실행하고 테스트 해봅니다.
yarn dev- 카카오 로그인 버튼을 클릭합니다.
- 동의 화면이 나오고 동의 체크 후
- 크롬의 콘솔을 실행해보면 code 값이 찍힌 것을 확인할 수 있습니다.
백엔드 개발
- slider-api 프로젝트를 open 합니다.
- 포트 변경 - frontend에서 3000번 포트를 사용하고 있으므로, backend 포트를 3003으로 바꿔주겠습니다.
/src/main.ts
await app.listen(3003);- front의 호출 url도 http://localhost:3003으로 변경합니다.
/nuxt.config.js
axios: {
baseURL: 'http://localhost:3003'
},- 카카오 api 호출을 위해 axios 패키지를 추가합니다.
yarn add axios- generator로 auth module/controller/service를 생성합니다.
nest g module auth
nest g controller auth
nest g service auth- authController에 다음을 추가합니다.
src/auth/auth.controller.ts
import { Controller, Post, Body, Response, BadRequestException, UnauthorizedException } from '@nestjs/common';
import { AuthService } from './auth.service';
@Controller('auth')
export class AuthController {
constructor(
private authService: AuthService
){}
@Post('/login')
async login(@Body() body: any, @Response() res): Promise<any> {
try {
// 카카오 토큰 조회 후 계정 정보 가져오기
const { code, domain } = body;
if (!code || !domain) {
throw new BadRequestException('카카오 정보가 없습니다.');
}
const kakao = await this.authService.kakaoLogin({ code, domain });
console.log(`kakaoUserInfo : ${JSON.stringify(kakao)}`);
if (!kakao.id) {
throw new BadRequestException('카카오 정보가 없습니다.');
}
res.send({
user: kakao,
message: 'success',
});
} catch (e) {
console.log(e);
throw new UnauthorizedException();
}
}
}- authService에 다음을 추가합니다.
/src/auth/auth.service.ts
import { Injectable, UnauthorizedException } from '@nestjs/common';
import axios from 'axios';
import * as qs from 'qs';
@Injectable()
export class AuthService {
async kakaoLogin(options: { code: string; domain: string }): Promise<any> {
const { code, domain } = options;
const kakaoKey = '87073966cb41...';
const kakaoTokenUrl = 'https://kauth.kakao.com/oauth/token';
const kakaoUserInfoUrl = 'https://kapi.kakao.com/v2/user/me';
const body = {
grant_type: 'authorization_code',
client_id: kakaoKey,
redirect_uri: `${domain}/kakao-callback`,
code,
};
const headers = {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
};
try {
const response = await axios({
method: 'POST',
url: kakaoTokenUrl,
timeout: 30000,
headers,
data: qs.stringify(body),
});
if (response.status === 200) {
console.log(`kakaoToken : ${JSON.stringify(response.data)}`);
// Token 을 가져왔을 경우 사용자 정보 조회
const headerUserInfo = {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
Authorization: 'Bearer ' + response.data.access_token,
};
console.log(`url : ${kakaoTokenUrl}`);
console.log(`headers : ${JSON.stringify(headerUserInfo)}`);
const responseUserInfo = await axios({
method: 'GET',
url: kakaoUserInfoUrl,
timeout: 30000,
headers: headerUserInfo,
});
console.log(`responseUserInfo.status : ${responseUserInfo.status}`);
if (responseUserInfo.status === 200) {
console.log(
`kakaoUserInfo : ${JSON.stringify(responseUserInfo.data)}`,
);
return responseUserInfo.data;
} else {
throw new UnauthorizedException();
}
} else {
throw new UnauthorizedException();
}
} catch (error) {
console.log(error);
throw new UnauthorizedException();
}
}
}* kakaoKey는 kakao developers 사이트에서 생성한 RestAPI 키를 입력합니다.
- 브라우저에서 http://localhost:3000을 입력하고 로그인을 해보면 다음과 같이 CORS 오류를 만나게 됩니다.
- CORS를 해결하기 위해 main.ts에 설정을 추가합니다.
/src/main.ts
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
async function bootstrap() {
const app = await NestFactory.create(AppModule);
const whitelist = [
'http://localhost:3000'
];
app.enableCors({
origin: function (origin, callback) {
if (!origin || whitelist.indexOf(origin) !== -1) {
callback(null, true)
} else {
callback(new Error('Not allowed by CORS'))
}
},
allowedHeaders: '*',
methods: "GET,PUT,PATCH,POST,DELETE,UPDATE,OPTIONS",
credentials: true,
});
await app.listen(3003);
}
bootstrap();- 다시 브라우저에서 로그인을 시도합니다.
로그인이 완료되면 크롬 콘솔에서 다음과 같은 로그를 확인할 수 있습니다.
카카오 로그인이 완료되었습니다.
다음 시간에는 로그인에 JWT 인증을 추가하는 것을 진행합니다.
반응형
'Nestjs 활용 동영상강좌' 카테고리의 다른 글
| (풀스택) Node(Nest)와 Vue(Nuxt)로 사이트 만들기 - 08.AWS S3 설정 (0) | 2022.10.22 |
|---|---|
| (풀스택) Node(Nest)와 Vue(Nuxt)로 사이트 만들기 - 07.사용자 권한 관리 (0) | 2022.10.15 |
| (풀스택) Node(Nest)와 Vue(Nuxt)로 사이트 만들기 - 06.Front 로그인 (with Jwt Token) (0) | 2022.10.03 |
| (풀스택) Node(Nest)와 Vue(Nuxt)로 사이트 만들기 - 05.JWT인증 (0) | 2022.10.01 |
| (풀스택) Node(Nest)와 Vue(Nuxt)로 사이트 만들기 - 03.TypeORM 설정 (0) | 2022.09.13 |
| (풀스택) Node(Nest)와 Vue(Nuxt)로 사이트 만들기 - 02.프로젝트 생성 및 Repository 연결 (0) | 2022.09.12 |
| (풀스택) Node(Nest)와 Vue(Nuxt)로 사이트 만들기 - 01.강좌 소개 (0) | 2022.09.11 |
| 카카오 로그인(REST API)④ - Vue(nuxtjs) + Node(nestjs) (0) | 2022.07.03 |
