서론

이전의 디스코드 로그인 구현 한다음 포스팅한 게시글을 보고 다시 디스코드 로그인 구현을 해야할 일이 생겼고, 그때 작성했었던 포스트를 보니 내용이 부실하고 그당시 내용을 다시 이해하기가 어려웠습니다. 그래서 다시 한번 디스코드 로그인 구현을 해보고 이해한 내용을 정리해보려고 합니다.

1. 새로운 어플리케이션 만들기

Discord 어플리케이션주소

해당 링크로 이동 후 디스코드 로그인 하였을 경우 디스코드 개발자 포털 페이지가 화면에 나타납니다.

1. New Application 버튼을 누르고 서명 후 진행하였을 경우
2. My Applications 생성한 어플 아이콘이 나오게 됩니다.

2.OAuth2 설정하기

1. CLIENT_ID: 항상 화면에 표시됩니다.
2. CLIENT_SECRET: Reset Secret 버튼을 눌러야 확인할 수 있습니다. 이 값은 노출되지 않으므로 따로 저장해야 합니다.
3. Redirect URI: 사용자가 인증 후 리디렉션될 주소입니다. 여러 개 설정 가능하며 저장 시 Save Changes 버튼을 누릅니다.

OAuth2 인증 절차

사용자가 로그인 버튼 클릭 → 디스코드 인증 페이지로 이동 → 접근 승인 → 리디렉션 URI로 이동(쿼리 파라미터로 인증 코드 전달).

사용자에게서 받을 권한을 설정해줍니다.

디스코드 OAuth2 URL 권한(SCOPE) 목록 정리

1.사용자명과 , 아바타 , 이메일을 선택하였습니다.
2.만들어두었던 Redirects 목록에서 하나의 주소를 선택합니다.
3. 최종 url 이 생성됩니다.

디스코드 로그인 기능 / 로그인 정보 가져오기 코드

import React, { useEffect, useState } from 'react';
import axios from 'axios';
const clientId = '1133181841155829862';
const clientSecret = '발급받았던 시크릿키를 넣어줍니다.';
// 생성한 디스코드 로그인 페이지로 이동하는 함수
const handleLogin = () => {
  console.log('handle Discord Login');
  // 생성했던 최종 url 주소를 넣어줍니다.
  const discordAuthUrl = `https://discord.com/oauth2/authorize?client_id=1133181841155829862&response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2F&scope=identify+email`;
  window.location.href = discordAuthUrl;
};
// 디스코드 로그인한 유저 정보 가져오는 함수
const fetchDiscordUserData = async (code) => {
  const params = new URLSearchParams({
    client_id: clientId,
    client_secret: clientSecret,
    grant_type: 'authorization_code',
    code: code, // 로그인 후 돌아오는 url 뒤에 code정보를 사용합니다.
    redirect_uri: 'http://localhost:3000/', // 돌아올 redirect_url을 설정해줍니다.
    scope: 'identify email', // 개발자 포럼에서 요구했던 권한들을 적어줍니다.
  });
  try {
    const tokenResponse = await axios.post(
      'https://discord.com/api/oauth2/token',
      params.toString(),
      {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
      },
    );
    const accessToken = tokenResponse.data.access_token;
    const userResponse = await axios.get('https://discord.com/api/users/@me', {
      headers: {
        authorization: `Bearer ${accessToken}`,
      },
    });
    console.log('Discord User Data:', userResponse.data);
    const socialId = userResponse.data.id;
    const socialEmail = userResponse.data.email;
    console.log('socialId', socialId);
    console.log('socialEmail', socialEmail);
  } catch (error) {
    console.log('discord error', error);
  }
};
const DiscordLoginButton = () => {
  // 페이지 리다이렉트 후 code 값이 있으면 fetchDiscordUserData 함수 호출
  useEffect(() => {
    const urlParams = new URLSearchParams(window.location.search);
    const code = urlParams.get('code');
    if (code) {
      fetchDiscordUserData(code);
    }
  }, []);
  return (
    <div className="discord-login-button">
      <button onClick={handleLogin}>Login with Discord</button>
    </div>
  );
};
export default DiscordLoginButton;

파일 생성후 원하는 위치에서 import 후 사용합니다.

로그인 버튼 실행후(최종 url로 이동후)

1. 생성한 URL로 이동시 위와같은 화면이 출력됩니다.
2. 생성된 어플리케이션 이름, 접속되어있는 자신의 유저 네임, 추가적으로 받을 권한 목록등을 확인 할 수 있습니다.

계정 등록 완료후

위와같이 설정했던 리다이렉트로 주소로들어오며 url/code 정보가 전달되어 이동됩니다.
fetchDiscordUserData 에서 파라미터에 code를 포함한 정보를 보내고 등록된 유저 정보를 조회하여 가져옵니다.

조회된 데이터는 아래와 같은 형태를 하고 있습니다.

유저 정보 및 권한을 요청했던 이메일 같은 정보를 받아옵니다.
{
"id": "고유값",
"username": "toby113",
"avatar": "aacc7fb03b8c14627c29eb23a6bcbb8a",
"discriminator": "0",
"public_flags": 0,
"flags": 0,
"banner": null,
"accent_color": null,
"global_name": "상훈",
"avatar_decoration_data": null,
"banner_color": null,
"clan": null,
"primary_guild": null,
"mfa_enabled": false,
"locale": "ko",
"premium_type": 0,
"email": "유저메일정보",
"verified": true
}