ข้ามไปยังเนื้อหาหลัก

Mobile SDKs .NET MAUI App

ที่เก็บนี้มีแอปพลิเคชัน .NET MAUI และไลบรารี .NET MAUI เพื่อการสาธิตการตรวจสอบสิทธิ์ของ Casdoor โดย OpenID Connect

การสาธิต​

Android​

Android

Windows​

Windows

ความต้องการ​

  • .NET 7 SDK ติดตั้งบนเครื่องของคุณ
  • ทรัพย์สินที่จำเป็นสำหรับแพลตฟอร์มเป้าหมายของคุณ ตามที่อธิบายไว้ ที่นี่
  • Visual Studio 2022 สำหรับ Windows 17.3 หรือ Visual Studio 2022 สำหรับ Mac 17.4 (ไม่จำเป็น)

เริ่มต้นใช้งาน​

ขั้นตอนที่ 1: สร้างแอปพลิเคชัน MAUI​

สร้าง แอปพลิเคชัน MAUI ของคุณ

ขั้นตอนที่ 2: เพิ่มการอ้างอิง​

เพิ่มการอ้างอิงไปยัง Casdoor.MauiOidcClient ในโปรเจกต์ของคุณ

ขั้นตอนที่ 3: เพิ่มลูกค้า Casdoor​

เพิ่ม CasdoorClient เป็น singleton ในบริการ

builder.Services.AddSingleton(new CasdoorClient(new()
{
    Domain = "<your domain>",
    ClientId = "<your client>",
    Scope = "openid profile email",

#if WINDOWS
    RedirectUri = "http://localhost/callback"
#else
    RedirectUri = "casdoor://callback"
#endif
}));

ขั้นตอนที่ 4: ออกแบบ UI​

เพิ่มโค้ดไปยังไฟล์ MainPage

MainPage.xaml

<?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="Casdoor.MauiOidcClient.Example.MainPage">

    <ScrollView>
        <VerticalStackLayout>

            <StackLayout
                x:Name="LoginView">
                <Button 
                    x:Name="LoginBtn"
                    Text="Log In"
                    SemanticProperties.Hint="Click to log in"
                    Clicked="OnLoginClicked"
                    HorizontalOptions="Center" />

                <WebView x:Name="WebViewInstance" />
            </StackLayout>

            <StackLayout
                x:Name="HomeView"
                IsVisible="false">             

                <Label
                Text="Welcome to .NET Multi-platform App UI"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to dot net Multi-platform App UI"
                FontSize="18"
                HorizontalOptions="Center" />

                <Button
                x:Name="CounterBtn"
                Text="Click me"
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnCounterClicked"
                HorizontalOptions="Center" />

                <Label 
                x:Name="NameLabel"
                Text=""
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="User's name"
                FontSize="18"
                HorizontalOptions="Center" />

                <Label 
                x:Name="EmailLabel"
                Text=""
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="User's email"
                FontSize="18"
                HorizontalOptions="Center" />           

                <Button 
                x:Name="LogoutBtn"
                Text="Log Out"
                SemanticProperties.Hint="Click to log out"
                Clicked="OnLogoutClicked"
                HorizontalOptions="Center" />

            </StackLayout>
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

MainPage.cs

namespace Casdoor.MauiOidcClient.Example
{
    public partial class MainPage : ContentPage
    {
        int count = 0;
        private readonly CasdoorClient client;
        private string accessToken;
        public MainPage(CasdoorClient client)
        {
            InitializeComponent();
            this.client = client;

#if WINDOWS
    client.Browser = new WebViewBrowserAuthenticator(WebViewInstance);
#endif
        }

        private void OnCounterClicked(object sender, EventArgs e)
        {
            count++;

            if (count == 1)
                CounterBtn.Text = $"Clicked {count} time";
            else
                CounterBtn.Text = $"Clicked {count} times";

            SemanticScreenReader.Announce(CounterBtn.Text);
        }

        private async void OnLoginClicked(object sender, EventArgs e)
        {
            var loginResult = await client.LoginAsync();
            accessToken = loginResult.AccessToken;
            if (!loginResult.IsError)
            {
                NameLabel.Text = loginResult.User.Identity.Name;
                EmailLabel.Text = loginResult.User.Claims.FirstOrDefault(c => c.Type == "email")?.Value;            

                LoginView.IsVisible = false;
                HomeView.IsVisible = true;
            }
            else
            {
                await DisplayAlert("Error", loginResult.ErrorDescription, "OK");
            }
        }

        private async void OnLogoutClicked(object sender, EventArgs e)
        {
            var logoutResult = await client.LogoutAsync(accessToken);


            if (!logoutResult.IsError)
            {
                HomeView.IsVisible = false;
                LoginView.IsVisible = true;
                this.Focus();
            }
            else
            {
                await DisplayAlert("Error", logoutResult.ErrorDescription, "OK");
            }
        }
    }
}

ขั้นตอนที่ 5: สนับสนุนแพลตฟอร์ม Android​

ปรับเปลี่ยนไฟล์ AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application android:allowBackup="true" android:icon="@mipmap/appicon" android:roundIcon="@mipmap/appicon_round" android:supportsRtl="true"></application>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.INTERNET" />
    <queries>
        <intent>
            <action android:name="android.support.customtabs.action.CustomTabsService" />
        </intent>
    </queries>
</manifest>

ขั้นตอนที่ 6: เปิดใช้งานแอปพลิเคชัน​

Visual Studio: กด Ctrl + F5 เพื่อเริ่มต้น