如何获取Discord头像与用户名并自动同步展示到个人网站

前置准备 #

• 打开Discord客户端设置，开启开发者模式，右键自己的头像复制用户ID，留存备用。
• 在Discord开发者平台创建应用并添加Bot，获取Bot访问令牌，注意该令牌属于敏感信息，禁止对外泄露。

核心实现逻辑 #

Discord API不支持前端直接跨域请求，且直接在前端传递Bot令牌会有泄露风险，所以必须通过后端/Serverless函数代理请求。

后端代理接口示例（Node.js + Express） #

const express = require('express');
const fetch = require('node-fetch');
const app = express();

// 替换为你自己的Discord用户ID
const USER_ID = '你的用户ID';
// 替换为你自己的Bot令牌，禁止硬编码到前端
const BOT_TOKEN = '你的Bot令牌';

app.get('/api/discord-info', async (req, res) => {
  // 允许跨域请求，根据你的站点域名调整即可
  res.setHeader('Access-Control-Allow-Origin', '*');
  try {
    const apiRes = await fetch(`https://discord.com/api/v10/users/${USER_ID}`, {
      headers: { 'Authorization': `Bot ${BOT_TOKEN}` }
    });
    const userData = await apiRes.json();
    // 仅返回必要的公开信息
    res.json({
      username: userData.username,
      discriminator: userData.discriminator,
      avatar: `https://cdn.discordapp.com/avatars/${USER_ID}/${userData.avatar}.png?size=256`
    });
  } catch (e) {
    res.status(500).json({ msg: '获取用户信息失败' });
  }
});

app.listen(3000, () => console.log('代理服务已启动'));

前端渲染示例 #

<!-- 展示容器 -->
<div class="discord-card">
  <img id="avatar" alt="Discord头像">
  <span id="username"></span>
</div>

<script>
// 页面加载时拉取信息
window.addEventListener('load', async () => {
  try {
    const res = await fetch('/api/discord-info');
    const data = await res.json();
    document.getElementById('avatar').src = data.avatar;
    // 新用户名格式不带#后缀，做兼容处理
    const showName = data.discriminator === '0' ? data.username : `${data.username}#${data.discriminator}`;
    document.getElementById('username').innerText = showName;
  } catch (err) {
    // 加载失败的兜底逻辑
    document.getElementById('username').innerText = '用户信息加载失败';
  }
})
</script>

注意：如果你使用的是静态站点，可以用对应部署平台的Serverless函数替代独立后端服务，实现逻辑完全一致。不要在前端代码中直接暴露Bot令牌，否则可能导致你的应用权限被恶意调用。

内容的提问来源于stack exchange，提问作者user14156367