在上一篇公眾號文章《》中，我們?yōu)榇蠹沂崂砹恕痘鹌?4》項目開發(fā)的全流程大綱，將項目從最初構(gòu)思到最終產(chǎn)品上線的一系列步驟清晰呈現(xiàn)。

選擇 24 點這個基礎(chǔ)且經(jīng)典的數(shù)學(xué)玩法，是因為我們的初衷是要向開發(fā)者展示，如何借助 Unity Online Services（UOS）的能力，將一個基礎(chǔ)的單機(jī)游戲原型，打造成一個可以上線，并且適合長線運營的完整的聯(lián)網(wǎng)游戲。玩法本身并不是我們想展示的重點，因為我們知道開發(fā)者最不缺的，就是超酷的創(chuàng)意！開發(fā)者可以使用 Unity 實現(xiàn)游戲創(chuàng)意的從 0 到 1，而 UOS 則能讓您的游戲充滿生命力，陪伴您的游戲從 1 走到一萬、十萬、百萬。

而今天，我們將正式開啟《火拼24》系列教程的第一節(jié)內(nèi)容！

接下來，就讓我們進(jìn)入本節(jié)教程的重點：配置項目環(huán)境并集成 Passport Login 來實現(xiàn)用戶登錄。這一步，是開啟整個項目之旅的關(guān)鍵鑰匙。它不僅能讓我們的應(yīng)用擁有一個簡潔美觀的啟動界面，還能搭建起用戶與應(yīng)用的橋梁，實現(xiàn)安全便捷的登錄功能，為后續(xù)游戲的開發(fā)和運營奠定堅實的基礎(chǔ)。

教程視頻

項目工程獲取與學(xué)習(xí)指引

1. 初始項目工程下載

• 倉庫地址：
  

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

• 分支名稱：lesson1-start 分支

• 分支說明：請先下載 lesson1-start分支的項目工程，該分支已完成單機(jī)闖關(guān)的基礎(chǔ)功能，是本節(jié)學(xué)習(xí)的起點。

• 倉庫地址：

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

• 分支名稱：lesson1-end 分支

• 分支說明：lesson1-end 分支包含本節(jié)所有功能的完整實現(xiàn)代碼，建議在學(xué)習(xí)完成后參考或用于調(diào)試對照。

教程學(xué)習(xí)大綱

1. 下載項目工程，安裝 UOS Launcher

2. 綁定 UOS App 并安裝 Passport Login SDK

3. 使用 PassportUI 實現(xiàn)用戶登錄

教程操作步驟

1. 下載項目工程，安裝 UOS Launcher

1.1 下載并打開項目工程

請先通過上面提供的 git 倉庫鏈接，下載初始狀態(tài)（lesson1-start 分支）的項目工程。

然后通過 Unity Hub，打開剛剛下載好的項目工程。在教程中，我們是使用Unity 2022.3.42 f1c1版本來打開項目工程的，該教程同樣適用于團(tuán)結(jié)引擎，請大家自行選擇想要使用的版本來開始你的學(xué)習(xí)。

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

請注意：該步驟要求當(dāng)前環(huán)境已安裝 git，如果還沒安裝過 git 的話，請先前往安裝 git ，然后再通過 git 安裝 UOS Launcher。

2. 綁定 UOS App 并安裝 Passport Login SDK

2.1 UOS App 的信息綁定

溫馨提示：大家可以參考之前的的公眾號文章教程，來為你當(dāng)前的項目綁定你創(chuàng)建好的 UOS App。

點擊菜單欄「UOS -> Open Launcher」，就可以打開 UOS 的 App 信息配置窗口了。點擊 Launcher 面板的「LinkApp」按鈕，在彈出窗口中選擇「By Unity project」，在「Select organization」這里選擇一個自己的項目組織，然后在「Select project 」選項這里，我們選擇「Create a new project 」，自行設(shè)置修改項目名字「Project name」。

教程中，我們就先選擇綁定創(chuàng)建好的 Rush24 應(yīng)用了。

2.2 開啟 Passport 服務(wù)并安裝 SDK

在 UOS Launcher 的下拉服務(wù)窗口列表中，找到「Passport Login」，點擊「Enable」開啟服務(wù)。

然后點擊「Install SDK」，安裝 Passport Login SDK。

2.3 導(dǎo)入 PassportUI 資源

在彈出的窗口中，點擊「導(dǎo)入」按鈕，來導(dǎo)入 PassportUI 資源。

3. 使用 PassportUI 實現(xiàn)用戶登錄

登錄功能模塊的 UI 界面和腳本，我們使用的是 UOS 的 Passport 服務(wù)為用戶提供的示例模板，在之前點擊導(dǎo)入「PassportUI」資源的時候已經(jīng)導(dǎo)入過了，可以直接在項目中使用，也可以根據(jù)自己喜歡的 UI 風(fēng)格，進(jìn)行自定義調(diào)整界面。

3.1 創(chuàng)建登錄控制的腳本

在 Login 腳本文件夾下，創(chuàng)建一個新的腳本 LoginController.cs，來實現(xiàn) Passport 用戶登錄的功能。

在場景中創(chuàng)建一個空對象，命名為 LoginController，然后將剛才創(chuàng)建的腳本 LoginController.cs 掛載在當(dāng)前空對象上。

在初始闖關(guān)狀態(tài)時，我們是默認(rèn)就會加載游戲的數(shù)據(jù)。但是，在這里我們會修改為先使用 Passport 實現(xiàn)登錄功能后，再加載游戲的數(shù)據(jù)。所以，先將場景中的 LoadGameData 對象設(shè)置為隱藏狀態(tài)，后面代碼中會根據(jù)需要再激活的。

打開 LoginController.cs 腳本，添加代碼。在 Start 方法中添加判斷的代碼，如果用戶沒有為當(dāng)前項目綁定 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

在調(diào)用 Passport SDK 進(jìn)行 UI 初始化的方法 Init 時，需要先傳入配置 _config 和回調(diào)函數(shù) _callback。

_config 是 Passport Login SDK 進(jìn)行初始化時的相關(guān)配置：來設(shè)置是否自動旋轉(zhuǎn)屏幕方向、是否通過自行調(diào)用 Login 函數(shù)啟動登錄面板，以及設(shè)置 UI 風(fēng)格主題是深色還是淺色等等。

_callback 是 Passport Login SDK 的回調(diào)函數(shù)：Passport 中已經(jīng)封裝注冊好了，在用戶拒絕協(xié)議、完成登錄、完成所有流程、用戶登出這幾個狀態(tài)下的回調(diào)事件。

可以在「Passport登錄」的文檔手冊上直接復(fù)制示例代碼：

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

復(fù)制過來代碼后，修改為如下：

• 在 _config 中，會通過宏定義區(qū)分下，如果使用的是團(tuán)結(jié)引擎或者 Unity 的話，在 WebGL 場景下分別為 UnityContainerId 賦值。主要作用是可以根據(jù)編譯環(huán)境，自動切換 WebGL 場景下的容器 ID，方便代碼在不同平臺下的兼容和維護(hù)。

• 在 _callback 中，如果用戶拒絕了協(xié)議，就退出游戲。也是使用宏定義區(qū)分下，是否在 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, // 是否開啟自動旋轉(zhuǎn)，默認(rèn)值為 false。
            InvokeLoginManually = false, // 是否通過自行調(diào)用 Login 函數(shù)啟動登錄面板，默認(rèn)值為 false。
            Theme = PassportUITheme.Dark, // 風(fēng)格主題配置。
#if TUANJIE_1_0_OR_NEWER
            UnityContainerId = "tuanjie-container" // WebGL 場景下 Tuanjie 實例容器 Id。
#else
            UnityContainerId = "unity-container" // WebGL 場景下 Unity 實例容器 Id。
#endif
        };

        // sdk 回調(diào)
        private void _callback(PassportEvent e)
        {
            // event: 不同情況下的回調(diào)事件，詳情可以參考下面的回調(diào)類型。
            switch (e)
            {
                case PassportEvent.RejectedTos:
                    Debug.Log("用戶拒絕了協(xié)議");
                    //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，用于在登錄過程中顯示提示信息。

• 啟動協(xié)程 InitLogin，開始初始化登錄過程。

• 設(shè)置 coverPageHintText 的文本為“正在...感應(yīng)身份...”，向用戶顯示登錄中的狀態(tài)。

• 然后讓協(xié)程暫停一幀，確保 UI 有時間更新顯示后，調(diào)用 Login() 方法，正式開始登錄流程。

• 在 Login 方法中，會先初始化 Passport SDK，然后調(diào)用 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 = "正在...感應(yīng)身份...";
            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 登錄的效果

此時運行游戲后，彈出的輸入框中可以輸入你的手機(jī)號：

輸入收到的短信驗證碼：

然后會需要進(jìn)行實名身份認(rèn)證：

所以當(dāng)用戶短信驗證和實名認(rèn)證通過后，會自動進(jìn)入 PassportEvent.Completed 狀態(tài)。會在 Console 控制臺看到輸出的日志信息：“完成所有流程”。

點擊 Passport Login 旁邊的「Developer Portal」按鈕，可以進(jìn)入 UOS 網(wǎng)頁端的 Passport 模塊來查看信息。

在 Passport 的「用戶管理」頁面，可以看到已創(chuàng)建的用戶。

3.4 激活加載關(guān)卡數(shù)據(jù)的游戲?qū)ο?/strong>

用戶登錄后，我們加載游戲數(shù)據(jù)進(jìn)入闖關(guān)環(huán)節(jié)。所以需要先激活場景中的加載關(guān)卡數(shù)據(jù)的游戲?qū)ο?LoadGameData。

• 找到 LoginController.cs 腳本，定義加載數(shù)據(jù)的變量 loadGameData；

• 添加 GotoLoadingPage 方法，來激活場景中的 LoadGameData 游戲?qū)ο螅?/p>

• 然后在 _callback 回調(diào)方法的 PassportEvent.Completed 狀態(tài)下，調(diào)用方法 GotoLoadingPage。

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

        // sdk 回調(diào)
        private void _callback(PassportEvent e)
        {
            // event: 不同情況下的回調(diào)事件，詳情可以參考下面的回調(diào)類型。
            switch (e)
            {
                //......
                case PassportEvent.Completed:
                    Debug.Log("完成所有流程");
                    GotoLoadingPage();
                    break;
            }
        }

        //......

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

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();
        }
    }
}

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