65.9K
CodeProject 正在变化。 阅读更多。
Home

不要从头开始构建游戏，第 2 部分：使用 Azure PlayFab 添加玩家登录身份验证

Raphael Mun
starIconstarIconstarIconstarIconstarIcon

5.00/5 (1投票)

2021 年 11 月 24 日

CPOL

4分钟阅读

viewsIcon

6128

在本篇文章中，我将向您展示如何为您的游戏添加 PlayFab 玩家认证。

在本系列的上一篇文章中，我们探讨了 将游戏打包然后部署到 Azure PlayFab 服务器。这个开箱即用的游戏后端可以根据需要自动扩展，并提供用户认证和多人匹配等内置服务。当游戏开发者和工作室避免从头开始构建这些解决方案时，他们可以将更多时间投入到开发和为游戏添加功能上。

严肃的多人游戏需要了解玩家身份。然而，为游戏添加账户和登录功能通常需要时间和托管一个包含玩家信息的安全数据库。

在本篇文章中，我们将为我们的游戏构建一个独立的客户端，并使用 PlayFab 客户端 SDK 为 Web 应用程序添加用户账户注册和登录。PlayFab API 可以在不需要单独的用户账户后端和数据库的情况下识别玩家。您需要了解一些 Java 才能继续本教程。而且，如果您还没有阅读过，我建议您在继续本教程之前，先阅读 第一篇文章。

要求

要学习本指南，您需要一个 PlayFab 帐户，并在您的计算机上安装以下软件

  • Node.js
  • Visual Studio Code

创建静态 Web 应用

让我们创建一个简单的静态网页，作为玩家登录和注册的用户界面。然后，您可以将此静态 Web 应用托管在任何地方——例如 CDN。该应用程序不需要数据库或后端服务器处理，因为 PlayFab 会处理这方面。此页面也将是我们系列 最后一篇文章 中多人游戏的入口点。

首先，创建一个名为 PlayFabApp 的新项目文件夹，并在 Visual Studio Code 中打开它。

然后，使用快捷键 Ctrl + ` 直接在 VS Code 中打开终端。使用 npm init 将其初始化为 Node.js 项目。您可以沿用提示的默认值。

接下来，通过在终端中运行 npm install webwebweb 来安装 webwebweb 模块，以创建一个非常简单的 Web 服务器。然后，创建一个新的 index.js 文件，并添加以下代码行，以在端口 8080（或您选择的任何端口）上运行服务器。

require( "webwebweb" ).Run( 8080 );

现在，在此项目文件夹中创建一个 index.html 文件。让我们将该文件设置为一个基本的 HTML 网页模板，其中包含 PlayFab 客户端 SDK，如下所示。

<!DOCTYPE html>
<html>
<head>
    <!-- Load PlayFab Client JavaScript SDK -->
    <script src="https://download.playfab.com/PlayFabClientApi.js"></script>
</head>
<body>
    <p>PlayFab Player Auth Example</p>
    <script>
        // TODO: You Code Here
    </script>
</body>
</html>

然后，要验证您是否正确配置了本地前端服务器，请运行 node index.js 来启动服务器。当您在 Web 浏览器中打开 https://:8080 时，应该会看到模板网页。

添加 PlayFab 玩家账户创建和登录

我们需要在此页面中添加一些用户界面 (UI) 元素，允许玩家注册账户或使用已创建的账户登录。

首先，在页面的 body 中添加两个输入元素。这些元素将允许用户输入电子邮件地址和密码。

<input type="text" id="email" />
<input type="password" id="password" />

另外，添加两个按钮，并使用 on-click 事件处理程序调用我们接下来将创建的两个函数：一个用于登录，一个用于注册。

<button onclick="loginBtn();">Login</button>
<button onclick="registerBtn();">Register</button>

接下来，让我们将游戏标题 ID（例如，3EE2B）定义为脚本部分中的一个变量，以便在代码中轻松引用。

const titleId = "YOUR-TITLE-ID";

然后，让我们创建两个辅助函数供我们在代码中使用。一个将处理 PlayFab API 调用回调，另一个将在网页上显示调试文本日志消息。

// Handles response from 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 );
}

最后，剩下要做的就是创建两个 on-click 事件处理程序函数。这些函数使用 PlayFab SDK，通过电子邮件和密码值调用相应的 PlayFab API，如下所示。

function loginBtn() {
    logLine( "Attempting PlayFab Sign-in" );
    PlayFabClientSDK.LoginWithEmailAddress({
        TitleId: titleId,
        Email: document.getElementById( "email" ).value,
        Password: document.getElementById( "password" ).value,
        RequireBothUsernameAndEmail: false,
    }, onPlayFabResponse);
}


function registerBtn() {
    logLine( "Attempting PlayFab Registration" );
    PlayFabClientSDK.RegisterPlayFabUser({
        TitleId: titleId,
        Email: document.getElementById( "email" ).value,
        Password: document.getElementById( "password" ).value,
        RequireBothUsernameAndEmail: false,
    }, onPlayFabResponse);
}

就这样，您现在可以在静态 Web 应用程序上拥有账户创建和登录功能了。

完整的页面代码看起来应该像这样。

<!DOCTYPE html>
<html>
<head>
    <!-- Load PlayFab Client JavaScript SDK -->
    <script src="https://download.playfab.com/PlayFabClientApi.js"></script>
</head>
<body>
    <p>PlayFab Player Auth Example</p>
    <input type="text" id="email" />
    <input type="password" id="password" />
    <button onclick="loginBtn();">Login</button>
    <button onclick="registerBtn();">Register</button>
    <script>
        const titleId = "YOUR-TITLE-ID";


        // Handles response from 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 );
        }


        function loginBtn() {
            logLine( "Attempting PlayFab Sign-in" );
            PlayFabClientSDK.LoginWithEmailAddress({
                TitleId: titleId,
                Email: document.getElementById( "email" ).value,
                Password: document.getElementById( "password" ).value,
                RequireBothUsernameAndEmail: false,
            }, onPlayFabResponse);
        }


        function registerBtn() {
            logLine( "Attempting PlayFab Registration" );
            PlayFabClientSDK.RegisterPlayFabUser({
                TitleId: titleId,
                Email: document.getElementById( "email" ).value,
                Password: document.getElementById( "password" ).value,
                RequireBothUsernameAndEmail: false,
            }, onPlayFabResponse);
        }
    </script>
</body>
</html>

在 https://:8080 打开此 Web 应用程序。您将能够使用电子邮件地址和密码注册玩家账户。该账户也会显示在 PlayFab 控制面板的 Players 部分。

旁注：使用第三方平台账户登录

PlayFab 还支持许多流行的平台供玩家连接账户，包括 Google、Facebook 和 Twitch。玩家甚至可以 将多个第三方账户链接 到一个 PlayFab 登录。

如果您也想启用玩家使用 Google 等现有平台登录，这可以帮助吸引用户——尤其是那些不太可能创建新账户的用户。在这种情况下，我建议查看支持的 平台特定认证 的完整列表。此外，最好通过一个教程来了解如何实现这一点，例如 使用 Google 和 HTML5 设置 PlayFab 认证。

旁注：账户恢复

PlayFab 账户还支持账户恢复功能，以防您的玩家忘记密码。但是，要做到这一点，账户需要链接电子邮件地址。

您可以使用 SendAccountRecoveryEmail API 向玩家发送账户恢复电子邮件。如果您希望使用电子邮件模板，请务必阅读 本指南。

下一步是什么？

做得好！您可以使用 PlayFab 为任何 Web 应用程序或游戏添加玩家账户。您还了解到可以将不同的社交平台账户链接到单个 PlayFab 账户。正如在 上一系列文章 中讨论的那样，使用 PlayFab 认证还可以方便地在控制台中获得更好的用户统计数据和分析。

在接下来的 本系列的最后一篇文章 中，我们将把我们的两个游戏组件结合起来，使玩家能够登录并开始匹配。然后，玩家可以进入贪吃蛇游戏对战，争夺贪吃蛇游戏冠军的荣誉。

© . All rights reserved.