使用者登入：建立起動頁面，判斷存取權仗是否存在，決定需要導航到哪個頁面

在上一個動手實作練習中，[用者登入：透過呼叫 Web API 成功取得存取權杖後，進行檔案讀寫操作]，對於這個專案中，一旦取得通過身分驗證的存取權杖之後，將會得到一個 [LoginResponseDto] 之 JSON 序列化的字串，透過 .NET MAUI 內建的檔案系統協助程式 API，使用此 API 所提供的可以取得 [應用程式資料目錄] 路徑功能，便可以得到此應用程式在此行動中裝置內專屬的讀寫檔案路徑，為什麼稱之為專屬呢？這是因為這個目錄下的所有檔案，僅限於該應用程式可以來存取，別的應用程式是無法來讀寫的。

有了可以讀寫檔案的根目錄路徑之後，便可以使用 .NET BCL API 的 [File.ReadAllTextAsync 方法] 或 [File.WriteAllTextAsync 方法] 來進行文字內容的讀取與寫入需求，這也就表示了，可以把 JWT 物件或者其他 JSON 物件(這兩者都是文字內容)寫入到檔案內，若下次重新啟動這個應用程式之後，便可以重新從檔案中將這些內容讀取出來，以便可以在應用程式內繼續來使用。

在實際應用環境下，一旦成功通過身分驗證之後，取得了存取權杖之後，用戶端的程式需要將這個存取權杖儲存到本機環境內，不論這個 App 是否有重新啟動，日後都可以再將存取權杖重新讀取出來，用來呼叫受到保護的遠端 RESTful Web API。

現在要繼續接著上一個練習專案，接下來看看如何進行這樣需求的程式設計

建立 Home 首頁 View & ViewModel

打開命令提示字元視窗
切換到該專案目錄下 (例如： C:\Vulcan\Projects\MA49\MA47\MA47 )
請在命令提示字元視窗內輸入 dotnet new MVVMItem --namespace MA47 --view-name Home
這個命令將會在這個專案內的 Views 資料夾內產生 HomePage.xaml / HomePage.xaml.cs 這個 View 檔案
另外，會在 ViewModels 資料夾內，產生 HomePageViewModel.cs 這個 ViewModel 檔案
這兩個 View 與 ViewModel 檔案，都已經有預設一些內容在裡面

建立 Splash 啟動頁面 View & ViewModel

打開命令提示字元視窗
切換到該專案目錄下 (例如： C:\Vulcan\Projects\MA49\MA47\MA47 )
請在命令提示字元視窗內輸入 dotnet new MVVMItem --namespace MA47 --view-name Splash
這個命令將會在這個專案內的 Views 資料夾內產生 SplashPage.xaml / SplashPage.xaml.cs 這個 View 檔案
另外，會在 ViewModels 資料夾內，產生 SplashPageViewModel.cs 這個 ViewModel 檔案
這兩個 View 與 ViewModel 檔案，都已經有預設一些內容在裡面

針對剛剛建立的 View 與 ViewModel 對 IoC 容器進行註冊

一般來說，當建立一個新的 View 或者 ViewModel 之後，就需要在 DI 容器內宣告這兩個型別，以便日後可以進行導航與注入之用
在專案根目錄下，找到並且打開 [MauiProgram.cs] 檔案
找到 container.RegisterForNavigation<MainPage, MainPageViewModel>(); 敘述
在該敘述下方加入底下程式碼

container.RegisterForNavigation<SplashPage, SplashPageViewModel>();
container.RegisterForNavigation<HomePage, HomePageViewModel>();

修正此專案啟動之後，要先顯示 SplashPage 頁面

原先此 App 啟動之後，將會顯示 [MainPage] 頁面，該頁面在此專案將會設計為讓使用者可以輸入帳號與密碼之用
因此，需要將此 App 啟動之後，先顯示此次要建立的 [SplashPage] 頁面，並且在此頁面中設計一段商業邏輯程式碼，判斷 JWT 資訊是否存在，決定接下來要導航到哪個頁面內。
找到 NavigateAsync("NavigationPage/MainPage") 程式碼
修正此程式碼為 NavigateAsync("/SplashPage")
這表示此 App 啟動之後，第一個要顯示的頁面是具有導航工具列的 [SplashPage] 頁面

設計 SplashPageViewModel 程式碼

打開專案內 [ViewModels] 資料夾內找到並且打開 [SplashPageViewModel.cs] 檔案
此檔案內的現在程式碼如下

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

namespace MA47.ViewModels;

public partial class SplashPageViewModel : ObservableObject, INavigatedAware
{
    #region Field Member
    private readonly INavigationService navigationService;
    #endregion

    #region Property Member
    #endregion

    #region Constructor
    public SplashPageViewModel(INavigationService navigationService)
    {
        this.navigationService = navigationService;
    }
    #endregion

    #region Method Member
    #region Command Method
    #endregion

    #region Navigation Event
    public void OnNavigatedFrom(INavigationParameters parameters)
    {
    }

    public void OnNavigatedTo(INavigationParameters parameters)
    {
    }
    #endregion

    #region Other Method
    #endregion
    #endregion
}

使用底下程式碼替換掉現在程式碼

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using MA47.Dtos.Models;
using Newtonsoft.Json;

namespace MA47.ViewModels;

// 使用 dotnet new MVVMItem --namespace MA47 --view-name Splash 產生出來
public partial class SplashPageViewModel : ObservableObject, INavigatedAware
{
    #region Field Member
    private readonly INavigationService navigationService;
    #endregion

    #region Property Member
    [ObservableProperty]
    string currentStatus = "請稍後，正在啟動中";
    #endregion

    #region Constructor
    public SplashPageViewModel(INavigationService navigationService)
    {
        this.navigationService = navigationService;
    }
    #endregion

    #region Method Member
    #region Command Method
    #endregion

    #region Navigation Event
    public void OnNavigatedFrom(INavigationParameters parameters)
    {
    }

    public async void OnNavigatedTo(INavigationParameters parameters)
    {
        await Task.Delay(5000);
        var result = await CheckJWTStatusAsync();
        if (result)
        {
            CurrentStatus = $"發現 JWT，切換到首頁";
            await Task.Delay(2000);
            await navigationService.NavigateAsync("/NavigationPage/HomePage");
        }
        else
        {
            CurrentStatus = $"沒有發現 JWT，準備要登入";
            await Task.Delay(2000);
            await navigationService.NavigateAsync("/MainPage");
        }
    }
    #endregion

    #region Other Method
    async Task<bool> CheckJWTStatusAsync()
    {
        string filename = Path.Combine(FileSystem.Current.AppDataDirectory,
            "LoginResponse.dat");
        try
        {
            LoginResponseDto responseDto;
            string responseDtoContext = await File.ReadAllTextAsync(filename);
            responseDto = JsonConvert.DeserializeObject<LoginResponseDto>(responseDtoContext);
            if (responseDto != null && responseDto.Token != null)
                return true;
            else
                return false;
        }
        catch (Exception ex)
        {
            return false;
        }
    }
    #endregion
    #endregion
}

這裡使用 [ObservableProperty] 宣告 string currentStatus = "請稍後，正在啟動中" 成為一個可用於資料綁定的字串物件
新增一個非同步方法 async Task<bool> CheckJWTStatusAsync()，用來判斷此該 App 是否擁有一個 JWT 物件，若有，則會回傳 true，否則將會回傳 false
這個方法將會來嘗試讀取 [LoginResponse.dat] 裡面內容，並且嘗試將此 JSON 物件來反序列化成為一個 .NET 物件，並且此派給 [responseDto] 變數
若 responseDto.Token 有內容，表示現在這個 App 可以取得上次獲得的 JWT 物件，否則就表示此時該 App 沒有擁有任何 JWT 物件
在 [OnNavigatedTo] 導航事件內，也要加入呼叫剛剛設計的 [CheckJWTStatusAsync()] 方法，依據回傳結果，來判斷要切換到哪個頁面
為了要能夠看到這一連串的動作，這裡將會故意使用 [Task.Delay] 方法來延遲一段時間，並且在螢幕上顯示一段文字，表示這段程式碼現在處理到哪個段落
若發現到有 JWT 存在，將會使用 await navigationService.NavigateAsync("/NavigationPage/HomePage"); 敘述，導航到 [HomePage] 頁面，將會進入與開始用這個 App。
這裡使用到的 navigationService 將會是透過相依性注入來取得的物件，這個物件將會用於頁面導航用途
若沒有發現到 JWT 存在，將會使用 await navigationService.NavigateAsync("/MainPage"); 敘述，導航到 [MainPage] 頁面，讓使用者要進行帳號與密碼的輸入，進行身分驗證工作。

設計 SplashPage XAML 標記

打開專案內 [Views] 資料夾內找到並且打開 [SplashPage.xaml] 檔案
使用底下 XMAL 宣告標記替換掉原先的內容

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MA47.Views.SplashPage"
             xmlns:viewModel="clr-namespace:MA47.ViewModels"
             x:DataType="viewModel:SplashPageViewModel"
             BackgroundColor="LightGreen">

    <Grid>
        <Label Text="{Binding CurrentStatus}"
               FontSize="36" FontAttributes="Bold"
               HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
    </Grid>

</ContentPage>

在 ContentPage 項目內，使用 [BackgroundColor] 屬性，宣告這個頁面的背景顏色為 [LightGreen]
在此頁面的內容屬性 [Content Property] 內，使用一個 [Grid] 版面配置項目
在此項目內，加入一個 [Label] 項目，宣告 [Text] 這個要顯示文字內容屬性，將會透過 {Binding ...} 這樣的標記延伸語法，宣告 [Text] 這個屬性，將會與 ViewModel 內的 [CurrentStatus] 屬性進行資料綁定。

設計 HomePageViewModel 程式碼

打開專案內 [ViewModels] 資料夾內找到並且打開 [HomePageViewModel.cs] 檔案
使用底下程式碼替換掉現在的 C# 程式碼

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using Newtonsoft.Json;
using System.Xml.Linq;

namespace MA47.ViewModels;

// 使用 dotnet new MVVMItem --namespace MA47 --view-name Home 產生出來
public partial class HomePageViewModel : ObservableObject, INavigatedAware
{
    #region Field Member
    private readonly INavigationService navigationService;
    #endregion

    #region Property Member
    #endregion

    #region Constructor
    public HomePageViewModel(INavigationService navigationService)
    {
        this.navigationService = navigationService;
    }
    #endregion

    #region Method Member
    #region Command Method
    [RelayCommand]
    async Task LogoutAsync()
    {
        await RemoveJwtAsync();
        await navigationService.NavigateAsync("/MainPage");
    }
    #endregion

    #region Navigation Event
    public void OnNavigatedFrom(INavigationParameters parameters)
    {
    }

    public void OnNavigatedTo(INavigationParameters parameters)
    {
    }
    #endregion

    #region Other Method
    async Task RemoveJwtAsync()
    {
        string filename = Path.Combine(FileSystem.Current.AppDataDirectory,
            "LoginResponse.dat");
        try
        {
            File.Delete(filename);
        }
        catch (Exception ex)
        {
        }
    }
    #endregion
    #endregion
}

在這個 ViewModel 內，將會透 [RelayCommand] 屬性宣告用法，宣告 async Task LogoutAsync() 成為一個可用於命令綁定的物件
這裡將會透過 Microsoft MVVM Toolkit 套件提供之原始碼自動產生功能，產生出一個 [LogoutCommand] 物件，而這個物件因為實作了 [ICommand] 介面，因此，可以用於 XAML 內的 [Command] 命令綁定屬性內，用來進行將 XAML 內的命令與 ViewModel 內的方法綁定在一起。
在 [LogoutAsync()] 方法內，將會呼叫 [RemoveJwtAsync] 這個方法，從這個方法名稱可以看出，此方法將會提供將本機中儲存的 JWT 檔案內容，進行刪除掉，如此，下次重新開啟 App 之後，就會因為找不到此檔案，判斷此 App 現在沒有持有 JWT 物件。
接著將會執行 await navigationService.NavigateAsync("/MainPage"); 敘述，使用絕對導航的方式，切換到 [HomePage] 這個頁面內。
這裡也新增一個 [RemoveJwtAsync()] 方法，使用 [File.Delete(filename)] API，嘗試要將存放 JWT 物件的檔案進行刪除。

設計 HomePage XAML 標記

打開專案內 [Views] 資料夾內找到並且打開 [HomePage.xaml] 檔案
使用底下 XMAL 宣告標記替換掉原先的內容

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             Title="MA50|判斷是否有權仗決定導航頁面"
             x:Class="MA47.Views.HomePage"
             xmlns:viewModel="clr-namespace:MA47.ViewModels"
             x:DataType="viewModel:HomePageViewModel">

    <Grid>
        <Button Text="登出"
                HorizontalOptions="Center" VerticalOptions="Center"
                Command="{Binding LogoutCommand}"
                />
    </Grid>

</ContentPage>

在這個 [HomePage] 頁面內，很單純的加入一個 [Button] 按鈕到頁面內
該按鈕將會透過 [Command] 屬性與 ViewModel 內的 [LogoutCommand] 這個物件進行資料綁定在一起
一旦使用者在螢幕上點擊此按鈕之後，將會觸發與執行 ViewModel 內的 [LogoutAsync] 方法，並且嘗試將儲存 JWT 物件的檔案刪除掉，接著，導航切換到可以輸入帳號與密碼的 [MainPage] 頁面內

設計 MainPageViewModel 程式碼

打開專案內 [ViewModels] 資料夾內找到並且打開 [MainPageViewModel.cs] 檔案
找到 Login() 方法程式碼所在地方
在 Login() 方法內找到 Message = $"Token:{responseDto.Token}"; 敘述
在這個敘述之後，加入底下程式碼

await Task.Delay(5000);
await navigationService.NavigateAsync("/NavigationPage/HomePage");

找到這個類別的建構式 Constuctor
搜尋這個類別內有這個文字 public MainPageViewModel()
將這個建構式程式碼，使用底下程式碼來進行替換

private readonly INavigationService navigationService;
public MainPageViewModel(INavigationService navigationService)
{
    this.navigationService = navigationService;
}

在這個建構式內，加入一個建構式參數，其型別為 [INavigationService]的 navigationService 參數
這個參數將會透過 DI 容器進行建構式注入的方式來取得
最後，使用使用 this.navigationService = navigationService; 敘述，將這個建構式參數指派給這個 [this.navigationService] 類別欄位成員

執行結果

切換到 [Android Emulator] 模式，選擇一個適合的模擬器，開始執行此專案
若為第一次開始執行此專案的時候，將會先看到此畫面
因為沒有發現到 JWT 資訊，便會顯示此畫面
接著，就會看到要使用者身分驗證的畫面
請在帳號與密碼欄位輸入正確的使用者憑證，再點選 [登入] 按鈕，就會看到底下成功登入後取得 JWT 存取權杖的畫面
合法的使用者憑證為
帳號：god
密碼：123
通過身分驗證後，就會切換到首頁頁面
在首頁頁面內，點選 [登出] 按鈕

C# .NET Blazor MAUI Xamarin Research

2023年2月2日星期四

.NET MAUI 使用者登入：建立起動頁面，判斷存取權仗是否存在，決定需要導航到哪個頁面

使用者登入：建立起動頁面，判斷存取權仗是否存在，決定需要導航到哪個頁面

建立 Home 首頁 View & ViewModel

建立 Splash 啟動頁面 View & ViewModel

針對剛剛建立的 View 與 ViewModel 對 IoC 容器進行註冊

修正此專案啟動之後，要先顯示 SplashPage 頁面

設計 SplashPageViewModel 程式碼

設計 SplashPage XAML 標記

設計 HomePageViewModel 程式碼

設計 HomePage XAML 標記

設計 MainPageViewModel 程式碼

執行結果

2023年2月2日 星期四

.NET MAUI 使用者登入：建立起動頁面，判斷存取權仗是否存在，決定需要導航到哪個頁面

使用者登入：建立起動頁面，判斷存取權仗是否存在，決定需要導航到哪個頁面

建立 Home 首頁 View & ViewModel

建立 Splash 啟動頁面 View & ViewModel

針對剛剛建立的 View 與 ViewModel 對 IoC 容器進行註冊

修正此專案啟動之後，要先顯示 SplashPage 頁面

設計 SplashPageViewModel 程式碼

設計 SplashPage XAML 標記

設計 HomePageViewModel 程式碼

設計 HomePage XAML 標記

設計 MainPageViewModel 程式碼

執行結果

2023年2月2日星期四