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>