This example demonstrates how to use our free .NET App Security & Web API Service to implement user authentication based on simple, form-based authentication logic (login/password). A wizard helps you generate a ready-to-use authentication service. This service uses the Entity Framework Core ORM to access a database.
You can find more information about our Web API Service's access restrictions in the following resources:
Article: Create a Standalone Web API Application
Video: A 1-Click Solution for CRUD Web API with Role-based Access Control via EF Core & ASP.NET
SQL Server, if you run this solution on Windows.
-
Open the
WebAPIsolution. Run Visual Studio as an administrator so that the IDE can create the database as defined inappsettings.json. -
Choose the
WebApiitem in the debug dropdown menu. This selection will debug the project on the Kestrel web server.
If you prefer IIS Express to Kestrel, select IIS Express from the debug drop-down menu, and use an external text editor to add the following code to
.vs\MAUI_WebAPI\config\applicationhost.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>
-
Right-click the MAUI project, choose
Set as Startup Project, and select your emulator. Note that physical devices that are attached over USB do not allow you to access your machine's localhost. -
Right-click the
WebAPIproject and selectDebug > Start new instance. -
Right-click the
MAUIproject and selectDebug > Start new instance.
-
DevExpress Web API Service uses JSON Web Tokens (JWT) to authorize users. Call
WebAPI's Authenticate endpoint and pass a username and password to the endpoint from the .NET MAUI application. In this example, token generation logic is implemented in theWebAPIService.RequestTokenAsyncmethod: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)); }
Include the token in HttpClient.DefaultRequestHeaders.Authorization. All subsequent requests can then access private endpoints and data:
HttpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", await tokenResponse.Content.ReadAsStringAsync());
File to Look At: WebAPIService.cs
-
To create users and specify their passwords, use the
Updater.UpdateDatabaseAfterUpdateSchemamethod. You can modify a user's password directly in the database or use the full version of our XAF UI.File to Look At: Updater.cs
-
Use the TextEdit.StartIcon and PasswordEdit.StartIcon properties to display icons in the TextEdit and PasswordEdit controls.
<dxe:TextEdit LabelText="Login" StartIcon="editorsname" .../> <dxe:PasswordEdit LabelText="Password" StartIcon="editorspassword" .../>
File to Look At: LoginPage.xaml
-
To validate the PasswordEdit control's value, use the EditBase.HasError and EditBase.ErrorText inherited properties.
<dxe:PasswordEdit ... HasError="{Binding HasError}" ErrorText="{Binding ErrorText}"/>
File to Look At: 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 to Look At: LoginViewModel.cs
-
Specify the TextEdit.ReturnType inherited property to focus the PasswordEdit control after the TextEdit control's value is edited.
-
Bind the PasswordEdit.ReturnCommand property to the Login command to execute the command when a user enters the password:
<dxe:PasswordEdit ReturnCommand="{Binding LoginCommand}"/>
File to Look At: 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 to Look At: LoginViewModel.cs
Android emulator and iOS simulator request a certificate to access a service over HTTPS. In this example, we switch to HTTP in debug mode:
#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>This allows you to bypass the certificate check without the need to create a development certificate or implement HttpClient handlers.
For more information, please refer to Connect to local web services from Android emulators and iOS simulators.
We recommend that you use HTTP only when you develop/debug your application. In production, use HTTPS for security reasons.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent