깃허브 연동

제일 먼저 세팅해야하는건 OAuth App이다.
여기서 Client ID와 Client Secret을 받아 어느 홈페이지에서 사용할지, 또 인증 후에는 어느 URL로 콜백할지 미리 세팅 해주어야 한다.

나는 미리 만들어놓은 사이트로 홈페이지를 세팅하고 콜백 URL을 POST용 프론트엔드 URL로 설정하였다.

GET https://github.com/login/oauth/authorize

그후 프론트엔드에서 위 링크를 이용해서 받은 Client ID를 쿼리문으로 임시 인증 코드를 받았다.

이후 콜백 URL에서 JSON으로 POST로 임시 인증 코드를 백엔드로 보냈다.
이를 백엔드에서 처리한 이유는 필연적으로 ACESS CODE를 받는 과정에서 DB를 만져야하기 때문에 백엔드에서 처리하는게 맞기 때문이다.

@UseGuards(JwtAuthGuard)
  @Post('/github-oauth')
  async githubOauth(
    @Body() input: GithubOauthDto,
    @CurrentUser() user: User,
    @Res() res: Response,
  ) {
    const code = input.code;
    const client_id = process.env.GITHUB_CLIENT_ID;
    const client_secret = process.env.GITHUB_CLIENT_SECRET;
    const tokenResponse = await axios.post(
      'https://github.com/login/oauth/access_token',
      { client_id, code, client_secret },
      { headers: { Accept: 'application/json' } },
    );
    console.log('response', tokenResponse.data);
    const userId = user.id;
    console.log('userId', userId);
    const githubToken = new GithubToken();
    githubToken.user_id = userId;
    githubToken.provider = 'github';
    githubToken.provider_user_id = user.email;
    githubToken.access_token = tokenResponse.data.access_token;
    githubToken.connected_at = new Date();
    await this.githubTokenRepository.save(githubToken);
    return res.status(200).json({
      message: '깃허브 로그인 성공',
    });
  }

백엔드에서는 Github로 임시 인증 코드와 Client ID, Client Secret을 json으로 감싸서 보낸다. 이 정보를 통해 인증이 일어난 이후 Access code를 DB로 저장한다.

프론트엔드에서는 제대로 받았다는 표시가 오면 다시 마이페이지로 리다이렉션 해준다.

결론적으로

프론트엔드 -> Github -> 프론트엔드 -> 백엔드 -> Github -> 백엔드 -> 프론트엔드

의 순서로 진행되었다.

트러블 슈팅

배포에서 이메일 오류

// 이메일 인증
  @Get('/email-verify/:email/:verifyToken')
  async verifyEmail(
    @Param('email') email: string,
    @Param('verifyToken') verifyToken: string,
  ) {
    console.log('email', email);
    console.log('verifyToken', verifyToken);
    return await this.userService.verifyEmail(email, verifyToken);
  }

이메일 인증을 query로 보냈는데 이 query는 nginx에서 특정 세팅을 하지 않으면 오류가 나게 되어있었다. 때문에 이를 오류가 나지 않도록 세팅을 바꾸거나 @query를 @Param으로 바꿔주어야했다.

이 작업을 먼저 수행하였다.

콜백 주소 오류

콜백 주소를 잘못 설정해서 오류가 생겼다. 이를 고쳤다.