實作「使用Discord登入」

• 「Discord の ID でログイン」を実装する(Oauth2) - Qiita

1. 於 Discord Developer Portal 登錄應用

a. 取得 「Client ID」和「Client Secert」

1. 登入 Discord Developer Portal
2. 「New Application」
3. 取名，本文範例取為 OAuth Verify
   • 此名稱會顯示於授權頁面上
   • 「Create」
4. 資訊頁右方的 Client ID 和 Client Secert 之後會用到

b. 建立 OAuth 用的網址

1. 點擊左側的「OAuth2」分頁
2. 點擊右側的「Add Redirect」，輸入驗證完後重導向的網址
   • 也就是要用於驗證登入的網址
   • 本文實作範例的網址就是此頁面連結：
     • https://f6bfb5.github.io/login-with-discord
3. 勾選下方「SCOPE」（索取的資訊欄位）裡的
   • 「identify」（Discord 的 ID）
   • 「email」
4. 就可於頁面下方取得認證用的連結
   • 例：https://discord.com/api/oauth2/authorize?client_id=[CLIENT ID]&redirect_uri=[REDIRECT URL]&response_type=code&scope=[SCOPE]

2. 從認證連結取得「code」

• 使用認證連結登入
  • 重導向到結果頁面後，網址上會多出一個回傳的 code 參數

3. 使用「code」取得「access token」

• 使用這個 code 送出請求
  • 取得 access_token，才能擁有存取資料的權限

a. 傳送 POST 請求到 Discord API

curl -X POST
     -H "Content-Type:application/x-www-form-urlencoded"
     -d "client_id=[CLIENT ID]
     &client_secret=[CLIENT SECRET]
     &grant_type=authorization_code
     &code=[CODE]
     &redirect_uri=[REDIRECT URL]（要與認證 URL 相同）"
     https://discordapp.com/api/oauth2/token

b. 若成功就可取得 access token

{
  "access_token": [ACCESS TOKEN],
  "expires_in": 604800,
  "refresh_token": [REFRESH TOKEN],
  "scope": [SCOPE],
  "token_type": "Bearer"
}

• code 為一次性使用，同一個 code 無法進行第二次存取
• access token 的有效期限為 604800 秒＝一個禮拜
  • 若有更新需求，須使用回傳內容中的 refresh token 重新送出請求

4. 使用「access token」取得使用者資料

a. 傳送 GET 請求到 Discord API

curl -H "Authorization: Bearer [ACCESS TOKEN]"
     https://discordapp.com/api/users/@me

b. 若成功就可取得相關資料

{
   "id": [Discord ID],
   "username": [使用者名稱],
   "avatar": [大頭貼 ID],
   "discriminator": [使用者編號]（在名稱#後面的數字）,
   "public_flags": 0,
   "flags": 0,
   "email": [信箱],
   "verified": true,
   "locale": [使用語言],
   "mfa_enabled": false
}

• 搭配頭像網址取得圖片
  • https://cdn.discordapp.com/avatars/[Discord ID]/[大頭貼 ID]

5. 使用 refresh token 重新取得 access token

a. 傳送 POST 請求到 Discord API

curl -X POST
     -H "Content-Type:application/x-www-form-urlencoded"
     -d "client_id=[CLIENT ID]
     &client_secret=[CLIENT SECRET]
     &grant_type=refresh_token
     &refresh_token=[REFRESH TOKEN]"
     https://discordapp.com/api/oauth2/token

b. 若成功就可取得 access token

{
   "access_token": [ACCESS TOKEN],
   "expires_in": 604800,
   "refresh_token": [REFRESH TOKEN],
   "scope": [SCOPE],
   "token_type": "Bearer"
}

範例

以下示範透過此方式，取得你的 Discord ID 與大頭貼圖片。

Login with Discord