ToB企服应用市场:ToB评测及商务社交产业平台
标题:
H5接入Steam 获取用户数据案例 使用 OpenID 登录绑定公司APP账户 steam公开
[打印本页]
作者:
tsx81428
时间:
2025-1-1 08:36
标题:
H5接入Steam 获取用户数据案例 使用 OpenID 登录绑定公司APP账户 steam公开
官方文档地址
1.注册 Steam API Key：
你必要一个 Steam Web API Key，可以在 Steam API Key 页面 获取。
https://steamcommunity.com/dev/apikey
这里开辟做demo用自己steam账户的就好，后续上线要用公司的账户
2.使用 OpenID 登录：
实现 Steam OpenID 登录，以便用户通过 Steam 账户登录你的应用。
例如网易Buff的登录，带参跳转到steam登录页，登岸成功后steam会自动回调并返回用户数据
这一步可以配景对接OpenID 给一个完整的登岸链接，H5负责
跳转该链接登录、响应steam回调
和
绑定检测
等
https://steamcommunity.com/openid/login?openid.ns=【openid.ns】&openid.mode=【openid.mode】&openid.return_to=【openid.return_to】&openid.realm=【openid.realm】&openid.identity=【openid.identity】&openid.claimed_id=【openid.claimed_id】
openid.ns //这个参数指定OpenID协议的命名空间（Namespace），它是用来确定OpenID协议版本的。例如，openid.ns=http://specs.openid.net/auth/2.0 表示使用的是OpenID 2.0协议。
openid.mode 这个参数指示OpenID提供商（Provider）应执行的操作类型。常见的模式包括：
checkid_setup: 请求OpenID认证（用户大概必要手动确认）。
checkid_immediate: 请求OpenID认证，但不必要用户干预，适用于自动登录场景。
id_res: OpenID认证成功后的响应模式。
cancel: 用户取消了认证过程。
setup_needed: 用户必要设置其OpenID标识。
failure: OpenID认证失败。
openid.return_to 这个参数指定OpenID认证完成后返回的URL地址。当认证过程结束时，用户会被重定向回这个URL。
openid.realm 这个参数指定了依靠方（Relying Party）的应用范围或信任域。它通常与用户的登录会话相关联，表明哪些站点被以为是可信的。
openid.identity 这个参数包含了用户渴望使用的OpenID标识符。如果用户没有明白提供一个标识符，那么这个值大概会指向用户的默认OpenID提供商。
openid.claimed_id 这个参数表示用户声称拥有的OpenID标识符。它通常是用户提供的URL，指向他们的OpenID标识。如果用户提供了openid.identity，则openid.claimed_id通常是指定的标识符。
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>
复制代码
6.接口返回
以我自己的steami【76561199022526231】为例：
页面
steam登录 https://steamcommunity.com/login/home/?goto=
steam登录后个人信息页：https://steamcommunity.com/profiles/76561199022526231
steam公开个人信息功能页 https://steamcommunity.com/profiles/76561199022526231/edit/settings
API
主动获取他人资料的官方：https://api.steampowered.com/ISteamUser/GetPlayerSummaries/v2/?key=【Steamworks Web API 】&steamids=76561199022526231
steamid - 用户64位ID
communityvisibilitystate - int型，资料可见模式 1 = 隐私 2 = 仅好友可见 3 = 用户好友的好友也可见 4 = 只对登录Steam的用户可见 5 = 公开，任何人可见
profilestate - 如果为1，该用户填写了自己的资料
personaname - 用户昵称
lastlogoff - unix时间格式，上次在线时间
profileurl - 用户Steam社区资料地址
avatar - 32*32图像
avatarmedium - 64*64图像
avatarfull - 184*184图像
personastate - 用户状态 0 - 不在线 （如果资料为隐私也是云云） 1 - 在线 2 - 忙碌 3 - 离开 4 - 苏息？Snooze 5 - 寻找交易中 6 - 寻找游戏中
commentpermission - 如果出现，代表任何人都可以评论
realname - 真实姓名
timecreated - UNIX时间形式，建号？（the profile was created）时间
loccountrycode - ISO 3166 代码，用户所在国家
locstatecode - 可变代码长度，用户所在州
loccityid - 一串INT型Steam内部ID，代表所在都会
gameid - 如果用户在游戏中，这会是以String形式的游戏APP ID（DOTA2是570）
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)
Powered by Discuz! X3.4
