• 카테고리

    질문 & 답변
  • 세부 분야

    백엔드

  • 해결 여부

    해결됨

refreshToken cookie에 저장할때에 템플릿 리터럴 사용하는 부분에서의 질문

23.06.20 16:22 작성 조회수 325

0

 //auth.service.ts

import { Injectable, UnprocessableEntityException } from '@nestjs/common';
import { UsersService } from '../users/users.service';
import * as bcrypt from 'bcrypt';
import { JwtService } from '@nestjs/jwt';
import {
  IAuthServiceGetAccessToken,
  IAuthServiceLogin,
  IAuthServiceSetRefreshToken,
} from './interfaces/auth-service.interface';

@Injectable()
export class AuthService {
  constructor(
    private readonly userService: UsersService, //
    private readonly jwtService: JwtService,
  ) {}

  async login({ email, password, context }: IAuthServiceLogin) {
    // 1. 이메일이 일치하는 유저를 DB에서 찾기
    const user = await this.userService.findOneByEmail({ email });
    // 2. 일치하는 유저가 없으면?! 에러 던지기!!!
    if (!user)
      throw new UnprocessableEntityException('존재하지 않는 이메일입니다.');
    // 3. 일치하는 유저가 있지만, 비밀번호가 틀렸다면?!
    const isAuth = await bcrypt.compare(password, user.password);
    if (!isAuth) throw new UnprocessableEntityException('틀린 암호입니다.');
    // 4. refreshToken(=JWT)을 만들어서 브라우저 쿠키에 저장해서 보내주기
    this.setRefreshToken({ user, context });

    // 5. 일치하는 유저도 있고, 비밀번호도 맞았다면?!
    //    => accessToken(=JWT)을 만들어서 브라우저에 전달하기
    return this.getAccessToken({ user });
  }

  getAccessToken({ user }: IAuthServiceGetAccessToken): string {
    return this.jwtService.sign(
      { sub: user.id },
      {
        secret: process.env.JWT_SECRET_KEY,
        expiresIn: process.env.JWT_ACCESS_TOKEN_EXPIRE,
      },
    );
  }

  setRefreshToken({ user, context }: IAuthServiceSetRefreshToken): void {
    const refreshToken = this.jwtService.sign(
      { sub: user.id },
      {
        secret: process.env.JWT_REFRESH_SECRET_KEY,
        expiresIn: process.env.JWT_REFRESH_TOKEN_EXPIRE,
      },
    );

    //개발환경
    context.res.setHeader(
      'set-Cookie',
      `refreshToken=${refreshToken}; path=/;`,
    );

    // 배포환경
    // context.res.setHeader('set-Cookie', `refreshToken=${refreshToken}; path=/; domain=.mybacksite.com; SameSite=None; Secure; httpOnly`);
    // context.res.setHeader('Access-Control-Allow-Origin', 'https://myfrontsite.com');
  }
}

 

리프레쉬 토큰을 생성하는 과정에서 개발환경에 사용하는

context.res.setHeader(
      'set-Cookie',
      `refreshToken=${refreshToken}; path=/;`,
    );

이 코드에 'refreshToken'의 이름을 <한글>로 사용하게되면 graphql로 API테스트를 할때 read에 대한 에러를 발생시키더라구요.

쿠키의 이름을 바꿔서 생성하려고 했는데 한글로 생성이 되지 않는거는 nodejs의 기본 특성인걸까요!?

참고이미지로 아래에 이미지를 붙여봅니다~

궁금해요~~~ 이런내용들은 nodejs 공식문서에서 제가 잘 못찾는건지 궁금합니다. 공식문서에도 있을것 같아서 찾아보려고했는데 잘 못찾겠더라구요ㅠㅜ..

스크린샷 2023-06-20 오후 4.21.11.png

 

답변 2

·

답변을 작성해보세요.

1

안녕하세요! zeler1004님!

해당 문제는 nodejs와는 상관이 없습니다!
또한, graphql과도 상관이 없습니다!
마지막으로, 쿠키에서 한글을 사용하지 못하는 것도 아니예요!

다만, 문제는 http 통신으로 브라우저 <==> API서버간 데이터를 주고받기 위해서 header에 한글이 들어가면 안됩니다.

따라서, 보여주신 부분에서는 API서버 => 브라우저 전송시 에러가 발생하였지만,
그 반대의 경우인, 브라우저 => API서버도 header에 한글을 넣어서 전송할 수 없습니다!^^

 

zeler1004님의 프로필

zeler1004

질문자

2023.06.27

깔끔한 정리와 답변 감사합니다 :)

1

인프런 AI 인턴님의 프로필

인프런 AI 인턴

2023.06.22

안녕하세요, 인프런 AI 인턴이에요.

해당 코드는 NestJS 프레임워크를 사용하여 구현된 코드인 것 같습니다. 코드를 보면, SetRefreshToken 메서드를 사용하여 refreshToken (JWT 토큰)을 생성하고, 이를 쿠키에 저장하여 전달하는 것을 확인할 수 있습니다.

그리고 refreshToken을 쿠키에 저장할 때, 템플릿 리터럴을 사용하지 않고도 저장이 가능합니다. 다음은 refreshToken을 쿠키에 저장하는 예시 코드입니다.

res.cookie('refreshToken', refreshToken, { httpOnly: true, path: '/auth/refresh_token' });

여기서 ‘refreshToken’은 키 값, refreshToken은 생성한 JWT 토큰 값입니다. ‘httpOnly: true’는 자바스크립트로 쿠키에 접근하지 못하도록 하는 옵션입니다.

더 자세한 내용은 NestJS와 JWT 토큰, 쿠키에 대해 공부하시면 도움이 되실 거 같아요. 감사합니다 :)

zeler1004님의 프로필

zeler1004

질문자

2023.06.27

감사합니다 :)