Contoh ini menggunakan layanan API keamanan & web. NET kami gratis untuk mengimplementasikan otentikasi dan akses data berbasis peran. Kami menjalankan wizard bawaan untuk menghasilkan layanan otentikasi yang siap digunakan. Layanan ini menggunakan inti Entity Framework untuk mengakses database. Aplikasi .net Maui mengirimkan permintaan ke layanan API Web untuk mendapatkan atau memodifikasi data.

Jika Anda baru mengenal Layanan Keamanan & API Web DevExpress .NET, Anda mungkin ingin meninjau sumber daya berikut:
Buat Aplikasi API Web Standalone
Solusi 1-klik untuk CRUD Web API dengan kontrol akses berbasis peran melalui EF Core & ASP.NET
SQL Server, jika Anda menjalankan solusi ini di Windows.
Jalankan Visual Studio sebagai Administrator dan buka solusinya. Hak istimewa administrator memungkinkan IDE membuat database saat Anda menjalankan proyek layanan web.
Pilih WebAPI di menu drop-down debug . Pilihan ini memungkinkan Kestrel saat server web untuk debug berjalan.

Jika Anda lebih suka IIS Express ke Kestrel, pilih IIS Express di menu drop-down Debug . Gunakan editor teks eksternal untuk menambahkan kode berikut ke .vsMAUI_WebAPIconfigapplicationhost.config :
< sites >
< site name = " WebSite1 " id = " 1 " serverAutoStart = " true " >
<!-* ... -->
< bindings >
< binding protocol = " http " bindingInformation = " *:65201:* " />
< binding protocol = " https " bindingInformation = " *:44317:* " />
< binding protocol = " https " bindingInformation = " *:44317:localhost " />
< binding protocol = " http " bindingInformation = " *:65201:localhost " />
</ bindings >
</ site >
<!-* ... -->
</ sites > Klik kanan Proyek MAUI , pilih Set as Startup Project , dan pilih Emulator Anda. Perhatikan bahwa perangkat fisik yang terpasang di atas USB tidak dapat mengakses localhost mesin Anda.
Klik kanan proyek WebAPI dan pilih Debug > Start new instance .
Klik kanan Proyek MAUI dan pilih Debug > Start new instance .
Layanan API Web DevExpress menggunakan JSON Web Tokens (JWT) untuk mengotorisasi pengguna. Untuk mendapatkan token, lulus nama pengguna dan kata sandi ke titik akhir yang otentikasi . Dalam contoh ini, logika generasi token diimplementasikan dalam metode WebAPIService.RequestTokenAsync :
private async Task < HttpResponseMessage > RequestTokenAsync ( string userName , string password ) {
return await HttpClient . PostAsync ( $ " { ApiUrl } Authentication/Authenticate" ,
new StringContent ( JsonSerializer . Serialize ( new { userName , password = $ " { password } " } ) , Encoding . UTF8 ,
ApplicationJson ) ) ;
}Sertakan token di httpclient.defaultrequestheaders.authorisasi. Semua permintaan selanjutnya kemudian dapat mengakses titik akhir dan data pribadi:
HttpClient . DefaultRequestHeaders . Authorization = new AuthenticationHeaderValue ( "Bearer" , await tokenResponse . Content . ReadAsStringAsync ( ) ) ;File untuk dilihat: webapiservice.cs
Kami mengimplementasikan titik akhir kustom berikut di layanan WebApi :
Titik akhir CandeletePost memungkinkan Anda untuk mengirim permintaan dari perangkat seluler ke layanan dan memeriksa apakah pengguna saat ini dapat menghapus posting. Ini memungkinkan Anda untuk menampilkan/menyembunyikan tombol Hapus di UI.
File untuk dilihat: updater.cs
Titik akhir CurrentAser mengembalikan informasi tentang pengguna yang diautentikasi.
File untuk dilihat: updater.cs
Titik akhir getAuthorimage mengambil gambar penulis dengan ID pengguna.
File untuk dilihat: updater.cs
Titik akhir GetPostimage mengambil gambar melalui ID pos.
File untuk dilihat: updater.cs
Metode Updater.UpdateDatabaseAfterUpdateSchema menghasilkan pengguna dan menentukan kredensial login mereka. Anda dapat memodifikasi kata sandi pengguna secara langsung di database. Catatan: Kerangka aplikasi .NET Cross-Platform kami (XAF UI) memungkinkan Anda untuk dengan cepat membangun desktop atau Web UI yang mengakses database yang sama.
File untuk dilihat: updater.cs
Objek PermissionPolicyRole di kelas Updater menambahkan izin pengguna. Cuplikan kode berikut memanggil metode AddObjectPermissionFromLambda untuk mengonfigurasi peran "penampil" (izinkan pengguna untuk membaca posting yang dipublikasikan):
role . AddObjectPermissionFromLambda ( SecurityOperations . Read , p => p . IsPublished , SecurityPermissionState . Allow ) ;File untuk dilihat: updater.cs
Metode AddTypePermissionsRecursively memodifikasi hak istimewa untuk peran "editor" (Alex, Antony, dan Dennis). Metode ini menambahkan izin crud (buat, baca, perbarui, hapus) untuk jenis Post :
role . AddTypePermissionsRecursively < Post > ( SecurityOperations . Read | SecurityOperations . Write | SecurityOperations . Create | SecurityOperations . DeleteObject , SecurityPermissionState . Allow ) ;File untuk dilihat: updater.cs
Gunakan properti TextEdit.Starticon dan kata sandi.
< dxe : TextEdit LabelText = " Login " StartIcon = " editorsname " .../>
< dxe : PasswordEdit LabelText = " Password " StartIcon = " editorspassword " .../>File untuk dilihat: loginpage.xaml
Untuk memvalidasi input pengguna dalam kontrol kata sandi, gunakan editbase.haserror dan editbase.errortext Properti yang diwariskan.
< dxe : PasswordEdit ... HasError = " {Binding HasError} " ErrorText = " {Binding ErrorText} " />File untuk dilihat: loginpage.xaml
public class LoginViewModel : BaseViewModel {
// ...
string errorText ;
bool hasError ;
// ...
public string ErrorText {
get => errorText ;
set => SetProperty ( ref errorText , value ) ;
}
public bool HasError {
get => hasError ;
set => SetProperty ( ref hasError , value ) ;
}
async void OnLoginClicked ( ) {
/// ...
string response = await DataStore . Authenticate ( userName , password ) ;
if ( ! string . IsNullOrEmpty ( response ) ) {
ErrorText = response ;
HasError = true ;
return ;
}
HasError = false ;
await Navigation . NavigateToAsync < SuccessViewModel > ( ) ;
}
}File untuk dilihat: LoginViewModel.cs
Tentukan properti warisan TextEdit.ReturnType untuk memfokuskan kontrol kata sandi setelah nilai kontrol TextEdit diedit.
Gunakan properti kata sandi .
< dxe : PasswordEdit ReturnCommand = " {Binding LoginCommand} " />File untuk dilihat: loginpage.xaml
public class LoginViewModel : BaseViewModel {
// ...
public LoginViewModel ( ) {
LoginCommand = new Command ( OnLoginClicked ) ;
SignUpCommand = new Command ( OnSignUpClicked ) ;
PropertyChanged +=
( _ , __ ) => LoginCommand . ChangeCanExecute ( ) ;
}
// ...
public Command LoginCommand { get ; }
public Command SignUpCommand { get ; }
// ...
}File untuk dilihat: LoginViewModel.cs
Kami mengaktifkan caching gambar dalam proyek ini. Untuk mencapai itu, kami perlu mengidentifikasi gambar dengan URI mereka. Untuk membuat URI, kami menggunakan multibinding yang memperoleh nama host dan penulis/post ID. Untuk informasi tambahan tentang caching gambar, lihat dokumentasi Maui.
< dx : DXImage >
< dx : DXImage .Source>
< MultiBinding StringFormat = " {}{0}PublicEndpoint/PostImage/{1} " >
< Binding Source = " {x:Static webService:WebAPIService.ApiUrl} " />
< Binding Path = " PostId " />
</ MultiBinding >
</ dx : DXImage .Source>
</ dx : DXImage >File untuk dilihat: itemspage.xaml
Android Emulator dan iOS Simulator meminta sertifikat untuk mengakses layanan melalui HTTPS. Dalam contoh ini, kami beralih ke HTTP dalam mode debug:
#if ! DEBUG
app . UseHttpsRedirection ( ) ;
#endif< network-security-config >
< domain-config cleartextTrafficPermitted = " true " >
< domain includeSubdomains = " true " >10.0.2.2</ domain >
</ domain-config >
</ network-security-config >< key >NSAppTransportSecurity</ key >
< dict >
< key >NSAllowsLocalNetworking</ key >
< true />
</ dict >Ini memungkinkan Anda untuk melewati pemeriksaan sertifikat tanpa perlu membuat sertifikat pengembangan atau mengimplementasikan penangan httpclient.
Untuk informasi lebih lanjut, silakan merujuk ke Connect ke Layanan Web Lokal dari Emulator Android dan Simulator iOS.
Kami menyarankan Anda menggunakan HTTP hanya saat Anda mengembangkan/men -debug aplikasi Anda. Dalam produksi, gunakan HTTPS untuk alasan keamanan.
(Anda akan diarahkan ke DevExpress.com untuk mengirimkan tanggapan Anda)