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>