메인 콘텐츠로 건너뛰기

모바일 SDKs .NET MAUI 앱

이 저장소는 Casdoor 인증을 OpenID Connect로 보여주기 위한 .NET MAUI 앱과 .NET MAUI 라이브러리를 포함하고 있습니다.

시연

안드로이드

안드로이드

Windows

윈도우

요구 사항

  • 당신의 기기에 .NET 7 SDK가 설치되어 있어야 합니다.
  • 당신의 목표 플랫폼에 필요한 자산들은 여기에서 설명되어 있습니다.
  • Windows용 Visual Studio 2022 17.3 또는 Mac용 Visual Studio 2022 17.4 (선택사항)

시작하기

단계 1: MAUI 애플리케이션 생성

당신의 MAUI 애플리케이션을 생성하세요.

단계 2: 참조 추가

프로젝트에 Casdoor.MauiOidcClient 참조를 추가하세요.

단계 3: Casdoor 클라이언트 추가

서비스에 CasdoorClient를 싱글톤으로 추가하세요.

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: 안드로이드 플랫폼 지원

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를 눌러 시작하세요.