在游戏开发中,玩家身份验证和登录是一个重要的环节。PlayFab提供了一个即插即用的后端服务,可以自动根据需要进行扩展,并提供用户认证和多人匹配等内置服务。通过避免从头开始构建这些解决方案,游戏开发者和工作室可以将更多时间投入到游戏的开发和功能添加上。
对于严肃的多人游戏来说,理解玩家身份至关重要。然而,向游戏中添加账户和登录功能通常需要时间,并且涉及到托管一个包含玩家信息的安全数据库。
在本文中,将为游戏创建一个单独的前端,向Web应用程序中添加用户账户注册和登录功能,使用PlayFab客户端SDK。PlayFab API可以在不需要单独的用户账户后端和数据库的情况下识别玩家。要跟随本教程,需要了解一些Java知识。如果还没有阅读过,建议在继续本教程之前先阅读它。
要按照本指南操作,需要一个PlayFab账户,并且需要在计算机上安装以下软件:
让创建一个简单的静态网页,作为玩家登录和注册的用户界面。然后,可以将这个静态Web应用程序托管在任何地方——比如CDN——如果喜欢的话。由于PlayFab处理了这方面的事务,所以这个应用程序不需要数据库或后端服务器处理。这个页面也将是多人游戏的入口点。
首先,创建一个名为PlayFabApp的新项目文件夹,并在Visual Studio Code中打开它。然后,在VS Code中打开终端,使用键盘快捷键Ctrl + `。将其初始化为Node.js项目,使用npm init。可以使用提示中的默认值。
接下来,安装webwebweb模块来创建一个非常简单的Web服务器,使用npm install webwebweb在终端中进行安装。然后,创建一个新的index.js文件,包含以下代码行以在端口8080(或选择的任何端口)上运行服务器:
require("webwebweb").Run(8080);
现在,在同一项目文件夹中创建一个index.html文件。让将该文件设置为一个基本的HTML网页模板,包括PlayFab客户端SDK,如下所示:
以下是一个HTML模板的示例:
PlayFab玩家身份验证示例
要验证正确配置了本地前端服务器,请运行node index.js来启动服务器。当从Web浏览器打开http://localhost:8080时,应该能看到模板网页。
需要向这个页面添加一些用户界面(UI)元素,允许玩家注册账户或使用之前创建的账户登录。
首先,向页面的主体中添加两个输入元素。这些元素将允许用户添加电子邮件地址和密码:
同时,添加两个按钮,其点击事件处理函数将调用接下来要创建的两个函数:一个用于登录,一个用于注册。
接下来,让在脚本部分定义游戏标题ID(例如,3EE2B)作为一个变量,以便在代码中轻松引用。
const titleId = "YOUR-TITLE-ID";
然后,让创建两个辅助函数用于代码。一个将处理PlayFab API调用的回调,另一个将在网页上显示调试文本日志消息:
// 处理来自playfab的响应
function onPlayFabResponse(response, error) {
if (response) {
logLine("Response: " + JSON.stringify(response));
}
if (error) {
logLine("Error: " + JSON.stringify(error));
}
}
function logLine(message) {
var textnode = document.createTextNode(message);
document.body.appendChild(textnode);
var br = document.createElement("br");
document.body.appendChild(br);
}
最后,需要创建两个点击事件处理函数。这些函数将使用PlayFab SDK调用相应的PlayFab API,使用电子邮件和密码值,如下所示:
function loginBtn() {
logLine("尝试PlayFab登录");
PlayFabClientSDK.LoginWithEmailAddress({
TitleId: titleId,
Email: document.getElementById("email").value,
Password: document.getElementById("password").value,
RequireBothUsernameAndEmail: false,
}, onPlayFabResponse);
}
function registerBtn() {
logLine("尝试PlayFab注册");
PlayFabClientSDK.RegisterPlayFabUser({
TitleId: titleId,
Email: document.getElementById("email").value,
Password: document.getElementById("password").value,
RequireBothUsernameAndEmail: false,
}, onPlayFabResponse);
}
完整的页面代码应该如下所示:
PlayFab玩家身份验证示例
打开这个Web应用程序http://localhost:8080。将能够使用电子邮件地址和密码注册玩家账户。该账户也将显示在PlayFab仪表板的“玩家”部分。
PlayFab还支持许多流行的平台,供玩家连接他们的账户,包括Google、Facebook和Twitch。玩家甚至可以将多个第三方账户链接到一个PlayFab登录名下。
假设也想启用像Google这样的现有平台的玩家登录,这可以帮助吸引用户——特别是那些不太可能创建新账户的用户。在这种情况下,建议查看完整的支持平台列表。