《火拼24》系列教程一（上）：配置项目环境并实现用户登录

在上一篇公众号文章《》中，我们为大家梳理了《火拼24》项目开发的全流程大纲，将项目从最初构思到最终产品上线的一系列步骤清晰呈现。

选择 24 点这个基础且经典的数学玩法，是因为我们的初衷是要向开发者展示，如何借助 Unity Online Services（UOS）的能力，将一个基础的单机游戏原型，打造成一个可以上线，并且适合长线运营的完整的联网游戏。玩法本身并不是我们想展示的重点，因为我们知道开发者最不缺的，就是超酷的创意！开发者可以使用 Unity 实现游戏创意的从 0 到 1，而 UOS 则能让您的游戏充满生命力，陪伴您的游戏从 1 走到一万、十万、百万。

而今天，我们将正式开启《火拼24》系列教程的第一节内容！

接下来，就让我们进入本节教程的重点：配置项目环境并集成 Passport Login 来实现用户登录。这一步，是开启整个项目之旅的关键钥匙。它不仅能让我们的应用拥有一个简洁美观的启动界面，还能搭建起用户与应用的桥梁，实现安全便捷的登录功能，为后续游戏的开发和运营奠定坚实的基础。

教程视频

项目工程获取与学习指引

1. 初始项目工程下载

• 仓库地址：
  

https://cnb.cool/unity/uos/Rush24Tutorial/-/tree/lesson1-start

• 分支名称：lesson1-start 分支

• 分支说明：请先下载 lesson1-start分支的项目工程，该分支已完成单机闯关的基础功能，是本节学习的起点。

• 仓库地址：

https://cnb.cool/unity/uos/Rush24Tutorial/-/tree/lesson1-end

• 分支名称：lesson1-end 分支

• 分支说明：lesson1-end 分支包含本节所有功能的完整实现代码，建议在学习完成后参考或用于调试对照。

教程学习大纲

1. 下载项目工程，安装 UOS Launcher

2. 绑定 UOS App 并安装 Passport Login SDK

3. 使用 PassportUI 实现用户登录

教程操作步骤

1. 下载项目工程，安装 UOS Launcher

1.1 下载并打开项目工程

请先通过上面提供的 git 仓库链接，下载初始状态（lesson1-start 分支）的项目工程。

然后通过 Unity Hub，打开刚刚下载好的项目工程。在教程中，我们是使用Unity 2022.3.42 f1c1版本来打开项目工程的，该教程同样适用于团结引擎，请大家自行选择想要使用的版本来开始你的学习。

1.2 UOS Launcher 安装

在 Unity Editor 菜单栏中打开「Window -> Package Manager」，点击左上角的「+」，选择「Add package from git URL」；

然后输入UOS Launcher 的 git 地址，点击「Add」等待安装完成。

https://cnb.cool/unity/uos/UOSLauncher.git

请注意：该步骤要求当前环境已安装 git，如果还没安装过 git 的话，请先前往安装 git ，然后再通过 git 安装 UOS Launcher。

2. 绑定 UOS App 并安装 Passport Login SDK

2.1 UOS App 的信息绑定

温馨提示：大家可以参考之前的的公众号文章教程，来为你当前的项目绑定你创建好的 UOS App。

点击菜单栏「UOS -> Open Launcher」，就可以打开 UOS 的 App 信息配置窗口了。点击 Launcher 面板的「LinkApp」按钮，在弹出窗口中选择「By Unity project」，在「Select organization」这里选择一个自己的项目组织，然后在「Select project 」选项这里，我们选择「Create a new project 」，自行设置修改项目名字「Project name」。

教程中，我们就先选择绑定创建好的 Rush24 应用了。

2.2 开启 Passport 服务并安装 SDK

在 UOS Launcher 的下拉服务窗口列表中，找到「Passport Login」，点击「Enable」开启服务。

然后点击「Install SDK」，安装 Passport Login SDK。

2.3 导入 PassportUI 资源

在弹出的窗口中，点击「导入」按钮，来导入 PassportUI 资源。

3. 使用 PassportUI 实现用户登录

登录功能模块的 UI 界面和脚本，我们使用的是 UOS 的 Passport 服务为用户提供的示例模板，在之前点击导入「PassportUI」资源的时候已经导入过了，可以直接在项目中使用，也可以根据自己喜欢的 UI 风格，进行自定义调整界面。

3.1 创建登录控制的脚本

在 Login 脚本文件夹下，创建一个新的脚本 LoginController.cs，来实现 Passport 用户登录的功能。

在场景中创建一个空对象，命名为 LoginController，然后将刚才创建的脚本 LoginController.cs 挂载在当前空对象上。

在初始闯关状态时，我们是默认就会加载游戏的数据。但是，在这里我们会修改为先使用 Passport 实现登录功能后，再加载游戏的数据。所以，先将场景中的 LoadGameData 对象设置为隐藏状态，后面代码中会根据需要再激活的。

打开 LoginController.cs 脚本，添加代码。在 Start 方法中添加判断的代码，如果用户没有为当前项目绑定 UOS App 的话，给一个错误提示信息：

using UnityEngine;
using Unity.UOS.Common;
using Logger = TwentyFour.Scripts.Utilities.Logger;

namespace  Unity.UOS.TwentyFour
{
    public class LoginController : MonoBehaviour
    {        
        // Start is called before the first frame update
        void Start()
        {
            if (string.IsNullOrEmpty(Settings.AppID))
            {
                Logger.LogError("Empty App Info! Please open the menu in editor: UOS -> Open Launcher, and enter UOS App info. For more tutorial, open the menu in editor: Tutorial -> Show Tutorial.");
            }
        }
    }
}

3.2 初始化 PassportUI

在调用 Passport SDK 进行 UI 初始化的方法 Init 时，需要先传入配置 _config 和回调函数 _callback。

_config 是 Passport Login SDK 进行初始化时的相关配置：来设置是否自动旋转屏幕方向、是否通过自行调用 Login 函数启动登录面板，以及设置 UI 风格主题是深色还是浅色等等。

_callback 是 Passport Login SDK 的回调函数：Passport 中已经封装注册好了，在用户拒绝协议、完成登录、完成所有流程、用户登出这几个状态下的回调事件。

可以在「Passport登录」的文档手册上直接复制示例代码：

https://uos.unity.cn/doc/passport/login#createScript

复制过来代码后，修改为如下：

• 在 _config 中，会通过宏定义区分下，如果使用的是团结引擎或者 Unity 的话，在 WebGL 场景下分别为 UnityContainerId 赋值。主要作用是可以根据编译环境，自动切换 WebGL 场景下的容器 ID，方便代码在不同平台下的兼容和维护。

• 在 _callback 中，如果用户拒绝了协议，就退出游戏。也是使用宏定义区分下，是否在 Unity 编辑器中时，退出游戏的代码的不同处理。

using System.Collections;
using System.Collections.Generic;
using Unity.Passport.Runtime.UI;
using Unity.UOS.Common;
using UnityEngine;
using Logger = TwentyFour.Scripts.Utilities.Logger;
namespace  Unity.UOS.TwentyFour
{
    public class LoginController : MonoBehaviour
    {       
        // sdk 配置（Config 是 SDK 初始化时的配置）
        private readonly PassportUIConfig _config = new()
        {
            AutoRotation = true, // 是否开启自动旋转，默认值为 false。
            InvokeLoginManually = false, // 是否通过自行调用 Login 函数启动登录面板，默认值为 false。
            Theme = PassportUITheme.Dark, // 风格主题配置。
#if TUANJIE_1_0_OR_NEWER
            UnityContainerId = "tuanjie-container" // WebGL 场景下 Tuanjie 实例容器 Id。
#else
            UnityContainerId = "unity-container" // WebGL 场景下 Unity 实例容器 Id。
#endif
        };

        // sdk 回调
        private void _callback(PassportEvent e)
        {
            // event: 不同情况下的回调事件，详情可以参考下面的回调类型。
            switch (e)
            {
                case PassportEvent.RejectedTos:
                    Debug.Log("用户拒绝了协议");
                    //Quit game if TOS rejected
#if UNITY_EDITOR
                    UnityEditor.EditorApplication.isPlaying = false;
#else
                    Application.Quit();
#endif
                    break;
                case PassportEvent.LoggedIn:
                    Debug.Log("完成登录");
                    break;
                case PassportEvent.Completed:
                    Debug.Log("完成所有流程");
                    break;
                case PassportEvent.LoggedOut:
                    Debug.Log("用户登出");
                    break;
            }
        }

        //......
    }
}

然后在 LoginController.cs 脚本中添加登录的代码：

• 定义变量 coverPageHintText，用于在登录过程中显示提示信息。

• 启动协程 InitLogin，开始初始化登录过程。

• 设置 coverPageHintText 的文本为“正在...感应身份...”，向用户显示登录中的状态。

• 然后让协程暂停一帧，确保 UI 有时间更新显示后，调用 Login() 方法，正式开始登录流程。

• 在 Login 方法中，会先初始化 Passport SDK，然后调用 PassportUI.Init 方法来异步初始化 Passport UI 组件。

using System.Collections;
using System.Collections.Generic;
using Unity.Passport.Runtime;
using Unity.Passport.Runtime.UI;
using Unity.UOS.Common;
using UnityEngine;
using UnityEngine.UI;
using Logger = TwentyFour.Scripts.Utilities.Logger;

namespace  Unity.UOS.TwentyFour
{
    public class LoginController : MonoBehaviour
    {
        public Text coverPageHintText;

        //......

        // Start is called before the first frame update
        void Start()
        {
            if (string.IsNullOrEmpty(Settings.AppID))
            {
                Logger.LogError("Empty App Info! Please open the menu in editor: UOS -> Open Launcher, and enter UOS App info. For more tutorial, open the menu in editor: Tutorial -> Show Tutorial.");
            }
            StartCoroutine(InitLogin());
        }

        IEnumerator InitLogin()
        {          
            coverPageHintText.text = "正在...感应身份...";
            yield return null;

            //Init Passport Login UI 
            Login();
        }

        private async void Login()
        {
            await PassportSDK.Initialize();
            await PassportUI.Init(_config, _callback);
        }
    }
}

回到场景中，为 Inspector 面板上的 coverPageHintText 变量赋值：

3.3 运行测试 PassportUI 登录的效果

此时运行游戏后，弹出的输入框中可以输入你的手机号：

输入收到的短信验证码：

然后会需要进行实名身份认证：

所以当用户短信验证和实名认证通过后，会自动进入 PassportEvent.Completed 状态。会在 Console 控制台看到输出的日志信息：“完成所有流程”。

点击 Passport Login 旁边的「Developer Portal」按钮，可以进入 UOS 网页端的 Passport 模块来查看信息。

在 Passport 的「用户管理」页面，可以看到已创建的用户。

3.4 激活加载关卡数据的游戏对象

用户登录后，我们加载游戏数据进入闯关环节。所以需要先激活场景中的加载关卡数据的游戏对象 LoadGameData。

• 找到 LoginController.cs 脚本，定义加载数据的变量 loadGameData；

• 添加 GotoLoadingPage 方法，来激活场景中的 LoadGameData 游戏对象；

• 然后在 _callback 回调方法的 PassportEvent.Completed 状态下，调用方法 GotoLoadingPage。

namespace  Unity.UOS.TwentyFour
{
    public class LoginController : MonoBehaviour
    {
        public GameObject loadGameData;

        // sdk 回调
        private void _callback(PassportEvent e)
        {
            // event: 不同情况下的回调事件，详情可以参考下面的回调类型。
            switch (e)
            {
                //......
                case PassportEvent.Completed:
                    Debug.Log("完成所有流程");
                    GotoLoadingPage();
                    break;
            }
        }

        //......

        void GotoLoadingPage()
        {
            loadGameData.SetActive(true);
        }    
    }
}

在场景中，为 Inspector 面板上的 loadGameData 变量赋值：

此时也可以运行游戏进行测试下，看到登录成功后可以进行游戏闯关了。

3.5 修改 Passport 登录配置

在「登录配置」模块，点击选中「模拟短信验证」，这样验证码直接输入「111111」即可；取消选中「实名认证」，则暂时不再验证用户的身份信息。根据需要也可以自定义配置下用户协议：

然后我们再次点击运行项目，是会看到在弹出的窗口中询问是否接受协议的。点击「接受以上协议」后，会直接进入游戏主页面进行闯关的。

3.6 实现登出 Passport 账户

但是如果我们修改了 Passport 的登录配置后，想要重新验证下效果的话，可以选择先登出账号，然后再重新登录。

登出按钮为：

找到 MainScene 场景中的 UI 对象 PlayerInfoPanel 下的按钮 Button_LogOut，可以看到它身上已经绑定好的事件：点击按钮时会激活 Popup_Logout 面板。

在 Login 文件夹下，创建实现账户登出的脚本 LogoutController.cs。

脚本 LogoutController.cs 中代码如下：

PassportLogin SDK 是 UOS 提供的身份认证服务，用于管理用户登录状态（如设备登录、第三方账号关联等）。

• 通过 PassportLoginSDK 集成的 Logout() 方法，主动终止当前用户的登录会话。这一步会清除本地存储的用户凭证（如Token）、重置身份状态，并通知 Passport 服务端用户已登出。

using UnityEngine;
using Unity.Passport.Runtime;
using TwentyFour.Scripts.Gameplay.HomePage;

namespace TwentyFour.Scripts.Features.Player
{
    public class LogoutController : MonoBehaviour
    {
        public void Logout()
        {
            PassportLoginSDK.Identity.Logout();
            GameRouter.LoadStartScene();
        }
    }
}

接着会调用 GameRouter.cs 脚本中的加载初始场景的方法 LoadStartScene：

public static class GameRouter
{
    public static void LoadStartScene()
    {
        SceneManager.LoadScene(StartScene);
    }
}

然后找到 Popup_Logout 面板下的确认退出的按钮子对象 Button_OK，将 LogoutController.cs 脚本挂载到它身上。

同时，为 Button_OK 按钮选择绑定 LogoutController.cs 脚本中的 Logout 方法。

修改为以上设置后，记得将 PlayerInfoPanel 和 Popup_Logout 面板都恢复为默认的隐藏状态。

然后我们再次点击运行项目，退出账号重新登录时，在输入手机号的验证码页面，大家就可以使用 111111 了，也不再需要进行实名认证了。

下节教程预告

教程主题——《火拼24》系列教程一（下）：创建角色

《火拼24》下一篇教程：即将上线！会在现有功能的基础上，带大家完整实现「角色创建-服务端管理」流程，并添加了角色昵称的敏感词校验机制，帮你从源头规范游戏身份信息。

记得锁定更新，别错过每一步关键指南！

学习福利与兑换指南

我们为大家精心准备了一份学习福利哟——参与《火拼24》学习项目，在学习过程中所使用的云资源将全部免费！

那么，如何获取这份福利呢？以下是兑换流程：

• 关注「UOS游戏云服务」公众号，然后在公众号内发送消息「24点教程」，你将会收到《火拼24》教程专属兑换码：

• 接下来，打开 UOS App 网页端，进入「设置」页面，在页面右上角找到并点击「兑换福利」按钮。

• 在弹出的窗口中，输入你之前收到的《火拼24》教程专属兑换码，再点击「兑换福利」按钮就可以啦！

• 兑换成功后，在「概览」页面，你就能看到《火拼24》学习项目的相关说明，请大家仔细阅读哦！

寄语

是时候开启你的开发实践之旅了！

立即下载 《火拼24》第一节教程的分支代码，跟随教程搭建 Launcher 的启动界面，集成 Passport Login 安全登录系统！从经典 24 点玩法到完整联网游戏，每一步实践都是成长的勋章。

立即行动，解锁游戏开发的第一块基石——让《火拼24》成为你技术进阶的实战平台，见证从功能模块到完整产品的系统性蜕变！

Unity Online Services (UOS) 是一个专为游戏开发者设计的一站式游戏云服务平台，提供覆盖游戏全生命周期的开发、运营和推广支持。

了解更多 UOS 相关信息：

官网：https://uos.unity.cn

技术交流 QQ 群：823878269

Unity 官方微信

第一时间了解Unity引擎动向，学习进阶开发技能

每一个“点赞”、“在看”，都是我们前进的动力