如何使用Discord OAuth2在网站显示用户头像及关联多HTML文件

Discord用户头像展示调整 #

• 现有代码已能正常拉取用户信息，仅缺失头像字段的解构、拼接与页面渲染逻辑，修改步骤如下：
  • 从接口返回的用户数据对象中，除已获取的username、discriminator字段外，额外解构出用户IDid、头像哈希值avatar两个字段
  • 按照Discord公开的头像资源规则拼接访问地址：
    • 若avatar值为空（用户未设置自定义头像），按照默认头像规则生成对应路径
    • 若存在自定义头像，使用用户ID、头像哈希值拼接自定义头像路径，可通过参数控制图片尺寸
  • 调整原有页面信息区的渲染逻辑，清空原有的纯文本用户名内容，新增圆形头像图片元素，与用户名文本并排展示

修改后的前端接口回调代码参考：

.then(response => {
  console.log(response);
  // 新增解构头像相关字段
  const { username, discriminator, id, avatar } = response;
  // 拼接头像访问路径
  let avatarPath;
  if (!avatar) {
    avatarPath = `/embed/avatars/${(BigInt(id) >> 22n) % 6n}.png`;
  } else {
    avatarPath = `/avatars/${id}/${avatar}.png?size=128`;
  }
  // 获取原有信息展示容器
  const infoContainer = document.getElementById('info');
  // 清空原有纯文本内容
  infoContainer.textContent = '';
  // 新建头像元素
  const avatarEl = document.createElement('img');
  avatarEl.src = `https://cdn.discordapp.com${avatarPath}`;
  avatarEl.style.cssText = 'width:40px;height:40px;border-radius:50%;margin-right:8px;vertical-align:middle;';
  // 向容器中追加头像与用户名
  infoContainer.appendChild(avatarEl);
  infoContainer.append(`${username}#${discriminator}`);
})

注意：如果本地测试时出现头像资源加载失败，可检查接口返回的avatar字段值是否正常，确认拼接的路径与Discord公开资源规则一致即可。

关联多HTML文件的实现 #

• 现有后端逻辑仅对根路径/返回index.html，要关联第二个HTML文件，无需改动原有授权逻辑，做两处简单调整即可：
  • 第一步将需要关联的第二个HTML文件，放在与后端服务代码同层级的根目录下，例如命名为profile.html
  • 第二步在Express路由中新增对应路径的文件返回规则：

// 原有根路径的授权逻辑完全保留，不做修改
app.get('/', async (req, res) => {
  // 现有授权代码完全复用
});
// 新增第二个HTML文件的路由规则
app.get('/profile', (req, res) => {
  res.sendFile('profile.html', { root: '.' });
});

• 前端页面跳转时直接使用相对路径配置链接即可，无需额外跨域处理：

<a href="/profile">查看个人详情</a>

• 如果后续需要关联更多静态资源（HTML、CSS、图片、前端JS文件），可直接使用Express内置的静态资源中间件统一配置，避免重复编写路由：

// 在app初始化、路由注册前加入即可
app.use(express.static('public'));

所有静态资源直接放在public文件夹下即可被服务正常访问。

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