網易首頁 > 網易號 > 正文申請入駐

《火拼24》系列教程一（上）：配置項目環境并實現用戶登錄

2025-07-09 19:21:26　來源: Unity

上海舉報

分享至

在上一篇公眾號文章《》中，我們為大家梳理了《火拼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分支的項目工程，該分支已完成單機闖關的基礎功能，是本節學習的起點。

2.完整示例工程參考

倉庫地址：

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引擎動向，學習進階開發技能

每一個“點贊”、“在看”，都是我們前進的動力

特別聲明：以上內容(如有圖片或視頻亦包括在內)為自媒體平臺“網易號”用戶上傳并發布，本平臺僅提供信息存儲服務。

Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.