[Discord] 인증용 웹페이지 구현

 

디스코드 > 개발자 > 애플리케이션 > OAuth2 > URL Generator
아래 URL의 '애플리케이션ID'를 변경하세요.

https://discord.com/developers/applications/애플리케이션ID/oauth2/url-generator

Discord Developer Portal — API Docs for Bots and Developers

 

필요한 SCOPES를 선택하고 Redirect URL을 선택하면 Generated URL이 나와요.

 

html 페이지를 만들어요.

<a
  id="login"
  style="display: none"
  href="https://discord.com/api/oauth2/authorize?client_id=101295..."
  >Sign In</a
>
<script>
  function getParam(sname) {
    var params = location.search.substr(location.search.indexOf('?') + 1)
    var sval = ''
    params = params.split('&')
    for (var i = 0; i < params.length; i++) {
      temp = params[i].split('=')
      if ([temp[0]] == sname) {
        sval = temp[1]
      }
    }
    return sval
  }

  window.onload = () => {
    const code = getParam('code')
    if (!code) {
      return (document.getElementById('login').style.display = 'block')
    }

    // code here
  }
</script>

 

html 페이지에 접속하면 Sign In 버튼이 보이고 디스코드 로그인 후 동일한 페이지로 code가 들어와요.

 

Node.js에서 아래와 같이 이용할 수 있어요.

const formData = new URLSearchParams()
formData.append('client_id', process.env.DISCORD_CLIENT_ID)
formData.append('client_secret', process.env.DISCORD_CLIENT_SECRET)
formData.append('grant_type', 'authorization_code')
formData.append('redirect_uri', process.env.REDIRECT_URI)
formData.append('scope', 'identify')
formData.append('code', code)

const res: any = await axios.post(`${process.env.DISCORD_API_HOST}/oauth2/token`, formData, {
  headers: { 'Content-type': 'application/x-www-form-urlencoded' },
})

const infoResponse: any = await axios.get(`${process.env.DISCORD_API_HOST}/users/@me`, {
  headers: {
    authorization: `Bearer ${res.data.access_token}`,
  },
})

 

 

 

 

 

영어, 중국어 공부중이신가요?

홈스쿨 교재. 한 권으로 가족 모두 할 수 있어요!

한GLO 미네르바에듀 : 네이버쇼핑 스마트스토어