이번에 연구실 홈페이지를 만들어 보면서, 로그인 관련 기능은 OAuth를 통해 구현하라는 과제가 주어졌다.
따라서, 개념부터 알아보자!
OAuth는 인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의 자신들의 정보에 대해 웹사이트나 애플리케이션의 접근 권한을 부여할 수 있는 공통적인 수단으로서 사용되는, 접근 위임을 위한 개방형 표준이다.
위키 백과에 나와있는 개념이지만, 너무 어렵다!
쉽게 얘기하면 ID, 비밀 번호를 따로 입력하여 가입하지 않아도 원래 있던 소셜 미디어나 웹 사이트를 이용해 로그인을 할 수 있게 하는 기능이다.
클릭 한 번만으로도 로그인이 가능하고, Facebook이나 네이버 등 웹 사이트가 제공하는 기능과 API를 사용할 수 있다는 장점이 있다.
위의 사진은 인프런(강의 웹 사이트)으로, 하단에 OAuth가 적용된 것을 볼 수 있다.
OAuth를 통한 로그인 다이어그램
우선, OAuth가 어떻게 돌아가는지 부터 알아야 한다.
카카오, 네이버, 깃랩 등은 추후에 학습하며 추가적으로 구현해볼 예정이고, 구글부터 알아보자!
Nest.js 프로젝트를 생성하고, 필요한 패키지들을 인스톨한다.
npm install @nestjs/cli
npx nest new [프로젝트 명]
npm install --save @nestjs/passport passport passport-google-oauth20
아래의 주소로 접속한다.
새 프로젝트 생성 클릭
프로젝트 이름 정하기
.env
환경 설정 파일 생성
GOOGLE_CLIENT_ID=[클라이언트 ID]
GOOGLE_SECRET=[클라이언트 보안 비밀번호]
Passport
를 사용해 google 로그인을 적용하기 위한Strategy
를 작성
import { Injectable } from '@nestjs/common';
import { PassportStrategy } from '@nestjs/passport';
import { Strategy } from 'passport-google-oauth20';
@Injectable()
export class GoogleStrategy extends PassportStrategy(Strategy, 'google') {
constructor() {
super({
clientID:
'클라이언트 ID', // CLIENT_ID
clientSecret: '클라이언트 보안 비밀번호', // CLIENT_SECRET
callbackURL: '리디렉트 URI', // redirect_uri
passReqToCallback: true,
scope: ['profile'], // 가져올 정보들
});
}
async validate(
request: any,
accessToken: string,
refreshToken: string,
profile,
done: any,
) {
try {
console.log(profile);
const jwt = 'placeholderJWT';
const user = {
jwt,
};
done(null, user);
} catch (err) {
console.error(err);
done(err, false);
}
}
}
로그인과 관련된
Controller
import { Controller, Get, UseGuards, Res, Req } from '@nestjs/common';
import { AuthGuard } from '@nestjs/passport';
@Controller('auth')
export class AuthController {
@Get('google')
@UseGuards(AuthGuard('google'))
async googleLogin(): Promise<void> {
}
@Get('google/callback')
@UseGuards(AuthGuard('google'))
async googleLoginCallback(@Req() req, @Res() res): Promise<void> {
const jwt: string = req.user.jwt;
if (jwt) res.redirect('http://localhost:3000/login/success/' + jwt);
else res.redirect('http://localhost:3000/login/failure');
}
@Get('protected')
@UseGuards(AuthGuard('jwt'))
protectedResource() {
return 'JWT is working!';
}
}
localhost:3000/auth/google
로 접속한 결과
→ 정상적으로 로그인 페이지가 실행되는 것을 볼 수 있다!
꼼꼼하게 정리를 잘했네요