当前位置: 首页 > article >正文

H5接入Steam 获取用户数据案例

官方文档地址

1.注册 Steam API Key:

  • 你需要一个 Steam Web API Key,可以在 Steam API Key 页面 获取。
  • https://steamcommunity.com/dev/apikey

2.使用 OpenID 登录:

  • 实现 Steam OpenID 登录,以便用户通过 Steam 账户登录你的应用。

3.获取玩家数据:

  • 使用 GetPlayerSummaries 方法获取玩家信息。
https://api.steampowered.com/ISteamUser/GetPlayerSummaries/v2/?key=YOUR_API_KEY&steamids=STEAM_ID

4.创建API服务:

// src/api.js
import axios from 'axios';

const API_KEY = 'YOUR_API_KEY';
const BASE_URL = 'https://api.steampowered.com';

export const getPlayerData = async (steamId) => {
  try {
    const response = await axios.get(`${BASE_URL}/ISteamUser/GetPlayerSummaries/v2/`, {
      params: {
        key: API_KEY,
        steamids: steamId,
      },
    });
    return response.data.response.players[0];
  } catch (error) {
    console.error('Error fetching player data:', error);
    throw error;
  }
};

5.组件内调用:

<template>
  <div v-if="player">
    <h1>{{ player.personaname }}</h1>
    <img :src="player.avatar" alt="Avatar">
  </div>
  <div v-else>
    Loading...
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { getPlayerData } from './api';

export default {
  setup() {
    const player = ref(null);

    onMounted(async () => {
      try {
        player.value = await getPlayerData('STEAM_ID');
      } catch (error) {
        console.error(error);
      }
    });

    return { player };
  },
};
</script>

http://www.kler.cn/a/297322.html

相关文章:

  • redis分布式锁和lua脚本
  • VM kali2023挂载共享文件夹
  • Python 检测人脸筛选指定尺寸人脸图片
  • UI自动化-元素动作WebElement源码类
  • 标题:探索 HTML 与 JavaScript 实现的选项卡切换效果
  • 已解决:javax.xml.datatype.DatatypeConfigurationException 异常的正确解决方法,亲测有效!!!
  • 【软件设计】常用设计模式--工厂模式
  • React 事件系统解析
  • Optuna的使用
  • 探索 Web Vibration API 震动反馈:为网页增添触觉反馈
  • win的使用
  • 算法工程师重生之第二天(长度最小的子数组 螺旋矩阵II 区间和 开发商购买土地 总结 )
  • 嵌入式Linux学习笔记-C语言编译过程
  • 智能对决:提示词攻防中的AI安全博弈
  • 8、用户行为数据同步
  • 数学建模常见模型(下)
  • 高精度蓝光三维扫描仪用于小型精密零部件3D检测
  • 本地搭建 Whisper 语音识别模型
  • 美股开户网:iPhone 16系列今年出货预估上调至8800~8900万部
  • 类与结构体实例(Class和Struct)——C#学习笔记