GeoSaffer.com

Implementing Authentication in a .NET 9 MAUI Blazor Hybrid App (SSR)

dfouche8 — Wed, 20 Nov 2024 08:00:12 +0000

Implementing Authentication in a .NET 9 MAUI Blazor Hybrid App (SSR)

This guide provides detailed steps to implement a basic username and password authentication system in a .NET 9 MAUI Blazor Hybrid app using the new Blazor Web App template with a .Shared project. The authentication system accounts for the limitations of server-side rendering (SSR) in Blazor Server applications and uses platform-specific authentication services.

Project Structure Overview
Prerequisites
Step-by-Step Implementation
Additional Considerations
- Persisting Authentication State
- Enhancing Security
Conclusion

Project Structure Overview

Your solution will consist of three projects:

YourApp.Web: The Blazor Server (Web) application.
YourApp.Mobile: The MAUI Blazor Hybrid (Mobile) application.
YourApp.Shared: Contains shared components, pages, and services.

Prerequisites

.NET 9 SDK: Ensure that you have the .NET 9 SDK installed.
Visual Studio 2022 (17.12 or later): For project creation and development.
MAUI Workload: Install the MAUI workload for cross-platform development.
Install the following Nuget Packages
- - In the .SharedProject
    - Microsoft.AspNetCore.Authorization (9.0.0)
    - Microsoft.AspNetCore.Components.Authorization (9.0.0)
    - Microsoft.AspNetCore.Components.Web (9.0.0)
    - Microsoft.Maui.Essentials (9.0.10)

Step-by-Step Implementation

Create a New Solution

Open Visual Studio 2022.
Create a New Project:
- Template: Search for Blazor Web App.
- Project Name: Enter YourApp.Web.
- Solution Name: Enter YourApp.
Add a MAUI Blazor App:
- Right-click on the solution in Solution Explorer.
- Select Add > New Project.
- Choose .NET MAUI Blazor App.
- Project Name: Enter YourApp.Mobile.
Add a Class Library for Shared Code:
- Right-click on the solution.
- Select Add > New Project.
- Choose Class Library.
- Project Name: Enter YourApp.Shared.
Add References:
- In YourApp.Web and YourApp.Mobile, add a reference to YourApp.Shared.
Set Up the Projects:
- Ensure all projects target .NET 9.
- Update the .csproj files if necessary.

Add some global usings for razor pages

In YourApp.Shared, open and edit _Imports.razor and add the following usings:

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop

@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization;

@using YourApp.Shared.Layout
@using YourApp.Shared.Pages
@using YourApp.Shared.Services

Implement Platform-Specific Authentication Services

Due to the limitations of server-side rendering (SSR) in Blazor Server applications, we’ll implement platform-specific authentication services to handle authentication differently in the web and mobile applications.

Create an Interface for Authentication

In YourApp.Shared/Services, create ICustomAuthenticationService.cs:


// YourApp.Shared/Services/ICustomAuthenticationService.cs
using System.Security.Claims;
using System.Threading.Tasks;

namespace YourApp.Shared.Services
{
    public interface ICustomAuthenticationService
    {
        Task SignInAsync(string username);
        Task SignOutAsync();
        Task GetCurrentUserAsync();
    }
}

Implement the Authentication Service for Blazor Server

In YourApp.Web/Services, create ServerAuthenticationService.cs:


// YourApp.Web/Services/ServerAuthenticationService.cs
using System.Security.Claims;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Authentication;
using Microsoft.AspNetCore.Http;
using YourApp.Shared.Services;

namespace YourApp.Web.Services
{
    public class ServerAuthenticationService : ICustomAuthenticationService
    {
        private readonly IHttpContextAccessor _httpContextAccessor;

        public ServerAuthenticationService(IHttpContextAccessor httpContextAccessor)
        {
            _httpContextAccessor = httpContextAccessor;
        }

        public async Task SignInAsync(string username)
        {
            var claims = new[] { new Claim(ClaimTypes.Name, username) };
            var identity = new ClaimsIdentity(claims, "Cookies");
            var principal = new ClaimsPrincipal(identity);

            await _httpContextAccessor.HttpContext.SignInAsync("Cookies", principal);
        }

        public async Task SignOutAsync()
        {
            await _httpContextAccessor.HttpContext.SignOutAsync("Cookies");
        }

        public Task GetCurrentUserAsync()
        {
            var user = _httpContextAccessor.HttpContext.User;
            return Task.FromResult(user);
        }
    }
}

Update `Program.cs` in the Web Project

Configure authentication services in YourApp.Web/Program.cs:


// YourApp.Web/Program.cs
using Microsoft.AspNetCore.Authentication.Cookies;
using Microsoft.AspNetCore.Components.Authorization;
using YourApp.Shared.Services;
using YourApp.Web.Services;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();

// Configure cookie authentication
builder.Services.AddAuthentication("Cookies")
    .AddCookie("Cookies", options =>
    {
        options.LoginPath = "/login";
    });

builder.Services.AddAuthorizationCore();

// Register IHttpContextAccessor
builder.Services.AddHttpContextAccessor();

// Register the server-specific authentication service
builder.Services.AddScoped();

// Register the custom AuthenticationStateProvider
builder.Services.AddScoped();

// Register UserService
builder.Services.AddScoped();

var app = builder.Build();

// Configure the HTTP request pipeline.
app.UseStaticFiles();
app.UseRouting();

app.UseAuthentication();
app.UseAuthorization();

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();

Create `ServerAuthenticationStateProvider`

In YourApp.Web/Services, create ServerAuthenticationStateProvider.cs:


// YourApp.Web/Services/ServerAuthenticationStateProvider.cs
using Microsoft.AspNetCore.Components.Authorization;
using System.Security.Claims;
using System.Threading.Tasks;
using YourApp.Shared.Services;

namespace YourApp.Web.Services
{
    public class ServerAuthenticationStateProvider : AuthenticationStateProvider
    {
        private readonly ICustomAuthenticationService _authenticationService;

        public ServerAuthenticationStateProvider(ICustomAuthenticationService authenticationService)
        {
            _authenticationService = authenticationService;
        }

        public override async Task GetAuthenticationStateAsync()
        {
            var user = await _authenticationService.GetCurrentUserAsync();
            return new AuthenticationState(user);
        }
    }
}

Implement the Authentication Service for MAUI

In YourApp.Shared/Services, create CustomAuthenticationService.cs:


// YourApp.Shared/Services/CustomAuthenticationService.cs
using System.Security.Claims;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components.Authorization;

namespace YourApp.Shared.Services
{
    public class CustomAuthenticationService : ICustomAuthenticationService
    {
        private readonly CustomAuthenticationStateProvider _authStateProvider;

        public CustomAuthenticationService(CustomAuthenticationStateProvider authStateProvider)
        {
            _authStateProvider = authStateProvider;
        }

        public async Task SignInAsync(string username)
        {
            await _authStateProvider.SignInAsync(username);
        }

        public async Task SignOutAsync()
        {
            await _authStateProvider.SignOutAsync();
        }

        public async Task GetCurrentUserAsync()
        {
            var authState = await _authStateProvider.GetAuthenticationStateAsync();
            return authState.User;
        }
    }
}

Adjust `CustomAuthenticationStateProvider` for MAUI

In YourApp.Shared/Services, update CustomAuthenticationStateProvider.cs:


// YourApp.Shared/Services/CustomAuthenticationStateProvider.cs
using System.Security.Claims;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components.Authorization;
using Microsoft.Maui.Storage;

namespace YourApp.Shared.Services
{
    public class CustomAuthenticationStateProvider : AuthenticationStateProvider
    {
        private const string AuthDataKey = "authData";
        private ClaimsPrincipal _currentUser;

        public override async Task GetAuthenticationStateAsync()
        {
            if (_currentUser != null)
            {
                return new AuthenticationState(_currentUser);
            }

            string username = await SecureStorage.Default.GetAsync(AuthDataKey);

            if (!string.IsNullOrWhiteSpace(username))
            {
                var identity = new ClaimsIdentity(new[]
                {
                    new Claim(ClaimTypes.Name, username)
                }, "apiauth_type");

                _currentUser = new ClaimsPrincipal(identity);
            }
            else
            {
                _currentUser = new ClaimsPrincipal(new ClaimsIdentity());
            }

            return new AuthenticationState(_currentUser);
        }

        public async Task SignInAsync(string username)
        {
            await SecureStorage.Default.SetAsync(AuthDataKey, username);

            var identity = new ClaimsIdentity(new[]
            {
                new Claim(ClaimTypes.Name, username)
            }, "apiauth_type");

            _currentUser = new ClaimsPrincipal(identity);

            NotifyAuthenticationStateChanged(GetAuthenticationStateAsync());
        }

        public async Task SignOutAsync()
        {
            SecureStorage.Default.Remove(AuthDataKey);

            _currentUser = new ClaimsPrincipal(new ClaimsIdentity());

            NotifyAuthenticationStateChanged(GetAuthenticationStateAsync());
        }
    }
}

Register Services in the MAUI Project

In YourApp.Mobile/MauiProgram.cs, register the authentication services:


// YourApp.Mobile/MauiProgram.cs
using Microsoft.AspNetCore.Components.Authorization;
using Microsoft.Extensions.DependencyInjection;
using YourApp.Shared.Services;

namespace YourApp.Mobile
{
    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();

            builder
                .UseMauiApp()
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                });

            builder.Services.AddMauiBlazorWebView();

    #if DEBUG
            builder.Services.AddBlazorWebViewDeveloperTools();
    #endif

            builder.Services.AddAuthorizationCore();

            // Register the custom authentication services
            builder.Services.AddScoped();
            builder.Services.AddScoped(provider =>
                provider.GetRequiredService());

            builder.Services.AddScoped();

            // Register UserService
            builder.Services.AddScoped();

            return builder.Build();
        }
    }
}

Implement a Simple User Store

Create UserService.cs in YourApp.Shared/Services:


// YourApp.Shared/Services/UserService.cs
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace YourApp.Shared.Services
{
    public class UserService
    {
        private List _users = new List
        {
            new UserCredential { Username = "user1", Password = "password1", Role = "User" },
            new UserCredential { Username = "admin", Password = "admin123", Role = "Admin" }
        };

        public Task AuthenticateUserAsync(string username, string password)
        {
            var user = _users.FirstOrDefault(u => u.Username == username && u.Password == password);
            return Task.FromResult(user);
        }
    }

    public class UserCredential
    {
        public string Username { get; set; }
        public string Password { get; set; }
        public string Role { get; set; }
    }
}

Create `Login.razor`

In YourApp.Shared/Pages, create Login.razor:


@page "/login"
@using YourApp.Shared.Services
@inject ICustomAuthenticationService AuthService
@inject UserService UserService
@inject NavigationManager NavigationManager

Login

@if (!string.IsNullOrEmpty(ErrorMessage))
{
    @ErrorMessage
}


    
    

    
        Username:
        
    
    
        Password:
        
    
    


@code {
    private LoginModel loginModel = new LoginModel();
    private string ErrorMessage;

    private async Task HandleLogin()
    {
        var user = await UserService.AuthenticateUserAsync(loginModel.Username, loginModel.Password);
        if (user != null)
        {
            await AuthService.SignInAsync(user.Username);
            NavigationManager.NavigateTo("/");
        }
        else
        {
            ErrorMessage = "Invalid username or password.";
        }
    }

    public class LoginModel
    {
        public string Username { get; set; }
        public string Password { get; set; }
    }
}

Create `Logout.razor`

In YourApp.Shared/Pages, create Logout.razor:


@page "/logout"
@using YourApp.Shared.Services
@inject ICustomAuthenticationService AuthService
@inject NavigationManager NavigationManager

Logging out...

@code {
    protected override async Task OnInitializedAsync()
    {
        await AuthService.SignOutAsync();
        NavigationManager.NavigateTo("/");
    }
}

Protect Pages with Authorization

Create a Protected Page

Create ProtectedPage.razor in YourApp.Shared/Pages:


@page "/protected"
@using Microsoft.AspNetCore.Authorization
@attribute [Authorize]
@inject ICustomAuthenticationService AuthService

Protected Page

Welcome, @userName!

@code {
    private string userName;

    protected override async Task OnInitializedAsync()
    {
        var user = await AuthService.GetCurrentUserAsync();
        userName = user.Identity?.Name;
    }
}

In YourApp.Shared/Shared, update NavMenu.razor:


@inject AuthenticationStateProvider AuthenticationStateProvider
@implements IDisposable


    
        Home
        @if (isAuthenticated)
        {
            Protected Page
            Logout (@userName)
        }
        else
        {
            Login
        }
    


@code {
    private bool isAuthenticated;
    private string userName;
    private AuthenticationState authenticationState;

    protected override async Task OnInitializedAsync()
    {
        authenticationState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
        UpdateAuthenticationState(authenticationState);

        AuthenticationStateProvider.AuthenticationStateChanged += OnAuthenticationStateChanged;
    }

    private void UpdateAuthenticationState(AuthenticationState authState)
    {
        var user = authState.User;
        isAuthenticated = user.Identity?.IsAuthenticated ?? false;
        userName = user.Identity?.Name;
        StateHasChanged();
    }

    private void OnAuthenticationStateChanged(Task task)
    {
        InvokeAsync(async () =>
        {
            var authState = await task;
            UpdateAuthenticationState(authState);
        });
    }

    public void Dispose()
    {
        AuthenticationStateProvider.AuthenticationStateChanged -= OnAuthenticationStateChanged;
    }
}

Adjust Routing in `Routes.razor`

In YourApp.Shared, update Routes.razor:


@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Routing


    
        
            
                
                    @if (context.User.Identity.IsAuthenticated)
                    {
                        You are not authorized to access this resource.
                    }
                    else
                    {
                        You are not authenticated. Please log in.
                    }
                
                
                    Authorizing...
                
            
        
        
            
                Sorry, there's nothing at this address.
            
        
    


@code {
    [CascadingParameter]
    private Task authenticationStateTask { get; set; }

    private AuthenticationState context => authenticationStateTask.Result;
}

Test the Application

Run the Web App

Start the Web Project (YourApp.Web).
Navigate to a Protected Page: Visit /protected.
Verify Redirection: You should see a message indicating you are not authenticated.
Log In: Navigate to /login and use user1 / password1.
Access Protected Content: You should now see the protected page.

Run the Mobile App

Start the Mobile Project (YourApp.Mobile).
Repeat the Steps: Perform the same steps as above to verify authentication on mobile.

Additional Considerations

Persisting Authentication State

In the MAUI app, authentication state is persisted using SecureStorage. In the Blazor Server app, authentication state is managed via cookies using ASP.NET Core’s authentication mechanisms.

Enhancing Security

Password Hashing: Implement hashing for passwords instead of storing them in plain text.
Use HTTPS: Ensure your web application uses HTTPS to encrypt data in transit.
Input Validation: Validate all user inputs to prevent injection attacks.
External Authentication Providers: Consider integrating with OAuth or OpenID Connect for robust authentication.

Conclusion

By following these steps, you’ve successfully implemented a basic authentication system in your .NET 9 MAUI Blazor Hybrid app that accounts for the limitations of server-side rendering in Blazor Server applications. This setup allows you to:

Understand Platform-Specific Authentication: Manage authentication appropriately in both web and mobile environments.
Share Code Effectively: Use the .Shared project to share components and services between web and mobile apps.
Prepare for Future Enhancements: Lay the groundwork for integrating more secure and complex authentication mechanisms in the future.

Next Steps:

Implement Secure Authentication: Consider integrating OAuth or OpenID Connect for robust authentication.
Role-Based Authorization: Utilize roles to manage user access to different parts of the application.
UI/UX Improvements: Enhance the user interface for better usability and aesthetics.

How to Implement and Use Google Translate API in C#

dfouche8 — Tue, 19 Nov 2024 08:00:38 +0000

How to Implement and Use Google Translate API in C#

Welcome to this step-by-step tutorial on integrating the Google Translate API into your C# applications. Whether you’re building a multilingual application, need to translate user-generated content, or simply want to explore translation capabilities, this guide will help you get started.

Prerequisites
Setting Up Google Cloud Translation API
Creating a C# Project
Writing the Code
Running the Application
Handling Common Issues
Conclusion

1. Prerequisites

Google Cloud Account: You’ll need a Google Cloud account. If you don’t have one, you can create it here.
Basic Knowledge of C#: Familiarity with C# and .NET development.
Visual Studio: Install [Visual Studio](https://visualstudio.microsoft.com/) or any other C# IDE of your choice.

2. Setting Up Google Cloud Translation API

Before you can use the Google Translate API, you need to set it up in your Google Cloud account.

a. Create a New Project

Go to the [Google Cloud Console](https://console.cloud.google.com/).
Click on the project dropdown at the top and select New Project.
Enter a project name and click Create.

b. Enable the Translation API

Within your project in the Google Cloud Console, navigate to APIs & Services > Library.
Search for “Cloud Translation API“.
Select it and click Enable.

c. Create Service Account Credentials

Go to APIs & Services > Credentials.
Click on Create Credentials and select Service Account.
Enter a service account name and description, then click Create.
Assign the role Project > Editor (or a more restrictive role if preferred) and click Continue.
Click Done.
Find your newly created service account in the list, click the three dots on the right, and select Create key.
Choose JSON as the key type and click Create. A JSON file will download to your computer. Keep this file secure!

Note: Do not expose your service account credentials publicly. Treat them like passwords.

3. Creating a C# Project

Open Visual Studio.
Click on Create a new project.
Select Console App (.NET Core) or Console App (.NET Framework) based on your preference and click Next.
Enter a project name (e.g., GoogleTranslateDemo) and click Create.

4. Writing the Code

Now, you’ll write the C# code to interact with the Google Translate API.

a. Install Required NuGet Packages

To use the Google Translate API, you need to install the Google.Cloud.Translation.V2 package.

In Visual Studio, right-click on your project in the Solution Explorer and select Manage NuGet Packages….
Go to the Browse tab, search for Google.Cloud.Translation.V2, select it, and click Install.

b. Add the Service Account Key

Copy the downloaded JSON key file into your project directory.
In Visual Studio, right-click on the JSON file in the Solution Explorer, select Properties, and set Copy to Output Directory to Copy if newer.

c. Implement the Translation Logic

Replace the content of Program.cs with the following code:

using System;
using Google.Cloud.Translation.V2;

namespace GoogleTranslateDemo
{
    class Program
    {
        static void Main(string[] args)
        {
            // Set the environment variable for authentication
            // Replace 'path-to-your-json-key-file.json' with the actual path
            Environment.SetEnvironmentVariable("GOOGLE_APPLICATION_CREDENTIALS", "path-to-your-json-key-file.json");

            // Create a client
            TranslationClient client = TranslationClient.Create();

            // Example text
            string text = "Hello, how are you today?";

            // Detect language
            var detection = client.DetectLanguage(text);
            Console.WriteLine($"Detected Language: {detection.Language} (Confidence: {detection.Confidence:P})");

            // Translate text to Spanish
            var translation = client.TranslateText(text, "es");
            Console.WriteLine($"\nTranslated Text to Spanish: {translation.TranslatedText}");

            // Translate text from Spanish back to English
            string spanishText = translation.TranslatedText;
            var translatedBack = client.TranslateText(spanishText, "en", "es");
            Console.WriteLine($"\nTranslated Back to English: {translatedBack.TranslatedText}");
        }
    }
}

d. Understanding the Code

Authentication: The environment variable GOOGLE_APPLICATION_CREDENTIALS is set to the path of your JSON key file. This allows the application to authenticate with Google Cloud.
TranslationClient: This client is used to interact with the Translation API.
DetectLanguage: Detects the language of the provided text.
TranslateText: Translates the provided text to the specified target language.

Note: Ensure that the path to your JSON key file is correct. You can use an absolute path or a relative path based on your project structure.

5. Running the Application

Save all your changes in Visual Studio.
Press F5 or click on Start to run the application.

Expected Output:


Detected Language: en (Confidence: 99.00%)

Translated Text to Spanish: Hola, ¿cómo estás hoy?

Translated Back to English: Hello, how are you today?

6. Handling Common Issues

a. Authentication Errors

If you encounter authentication errors, ensure that:

The GOOGLE_APPLICATION_CREDENTIALS environment variable points to the correct JSON key file.
The service account has the necessary permissions to use the Translation API.

b. Quota Exceeded

Google Cloud Translation API has usage quotas. If you exceed these quotas:

Check your [Google Cloud Quotas](https://console.cloud.google.com/iam-admin/quotas).
Consider requesting a quota increase if necessary.

c. Encoding Issues

If translations appear as question marks (????), ensure that:

Your console supports UTF-8 encoding.
Use fonts that support the characters of the target language.

Tip: For better security, avoid hardcoding the path to your JSON key file. Instead, set the environment variable outside the application or use secure secret management.

7. Conclusion

Congratulations! You’ve successfully integrated the Google Translate API into your C# application. This setup allows you to detect languages and translate text between multiple languages seamlessly.

Feel free to explore more features of the Google Cloud Translation API, such as batch translations, glossary support, and more to enhance your application’s multilingual capabilities.

If you encounter any issues or have questions, refer to the official [Google Cloud Translation API Documentation](https://cloud.google.com/translate/docs) or seek help from the community.

Implementing Authentication in a .NET 9 MAUI Blazor Hybrid App

dfouche8 — Mon, 18 Nov 2024 03:24:04 +0000

Implementing Authentication in a .NET 9 MAUI Blazor Hybrid App

This guide provides detailed steps to implement a basic username and password authentication system in a .NET 9 MAUI Blazor Hybrid app using the new Blazor Web App template with a .Shared project. The authentication system uses a simple in-memory user store for demonstration purposes.

Project Structure Overview
Prerequisites
Step-by-Step Implementation
Additional Considerations
- Persisting Authentication State
- Enhancing Security
Conclusion

Project Structure Overview

Your solution will consist of three projects:

YourApp.Web: The Blazor Web App project.
YourApp.Mobile: The MAUI Blazor Hybrid project.
YourApp.Shared: Contains shared components, pages, and services.

Prerequisites

.NET 9 SDK: Ensure that you have the .NET 9 SDK installed.
Visual Studio 2022 (17.7 or later): For project creation and development.
MAUI Workload: Install the MAUI workload for cross-platform development.
Install the following Nuget Packages
- - In the .SharedProject
    - Microsoft.AspNetCore.Authorization (9.0.0)
    - Microsoft.AspNetCore.Components.Authorization (9.0.0)
    - Microsoft.AspNetCore.Components.Web (9.0.0)
    - Microsoft.Maui.Essentials (9.0.10)

Step-by-Step Implementation

Create a New Solution

Open Visual Studio 2022.
Create a New Project:
- Template: Search for Blazor Web App.
- Project Name: Enter YourApp.Web.
- Solution Name: Enter YourApp.
Add a MAUI Blazor App:
- Right-click on the solution in Solution Explorer.
- Select Add > New Project.
- Choose .NET MAUI Blazor App.
- Project Name: Enter YourApp.Mobile.
Add a Class Library for Shared Code:
- Right-click on the solution.
- Select Add > New Project.
- Choose Class Library.
- Project Name: Enter YourApp.Shared.
Add References:
- In YourApp.Web and YourApp.Mobile, add a reference to YourApp.Shared.
Set Up the Projects:
- Ensure all projects target .NET 9.
- Update the .csproj files if necessary.

Add some global usings for razor pages

In YourApp.Shared, open and edit _Imports.razor and add the following usings:

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop

@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization;

@using YourApp.Shared.Layout
@using YourApp.Shared.Pages
@using YourApp.Shared.Services

Implement the Authentication State Provider

Create `CustomAuthenticationStateProvider`

In YourApp.Shared, create a new folder called Services and add the following class:


// YourApp.Shared/Services/CustomAuthenticationStateProvider.cs
using Microsoft.AspNetCore.Components.Authorization;
using System.Security.Claims;
using System.Threading.Tasks;

namespace YourApp.Shared.Services
{
    public class CustomAuthenticationStateProvider : AuthenticationStateProvider
    {
        private ClaimsPrincipal _anonymous = new ClaimsPrincipal(new ClaimsIdentity());
        private ClaimsPrincipal _currentUser;

        public override Task GetAuthenticationStateAsync()
        {
            return Task.FromResult(new AuthenticationState(_currentUser ?? _anonymous));
        }

        public void SignIn(string username)
        {
            var identity = new ClaimsIdentity(new[]
            {
                new Claim(ClaimTypes.Name, username)
            }, "apiauth_type");

            _currentUser = new ClaimsPrincipal(identity);
            NotifyAuthenticationStateChanged(GetAuthenticationStateAsync());
        }

        public void SignOut()
        {
            _currentUser = _anonymous;
            NotifyAuthenticationStateChanged(GetAuthenticationStateAsync());
        }
    }
}

Register the Authentication State Provider

In YourApp.Web/Program.cs:


using YourApp.Shared.Services;
using Microsoft.AspNetCore.Components.Authorization;

var builder = WebApplication.CreateBuilder(args);

// Register services
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();

builder.Services.AddScoped();
builder.Services.AddScoped(provider =>
    provider.GetRequiredService());
builder.Services.AddAuthorizationCore();

var app = builder.Build();

// Configure middleware
app.UseStaticFiles();
app.UseRouting();

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();

In YourApp.Mobile/MauiProgram.cs:


using YourApp.Shared.Services;
using Microsoft.AspNetCore.Components.Authorization;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();

        builder.UseMauiApp();

        // Register services
        builder.Services.AddMauiBlazorWebView();
#if DEBUG
        builder.Services.AddBlazorWebViewDeveloperTools();
#endif

        builder.Services.AddScoped();
        builder.Services.AddScoped(provider =>
            provider.GetRequiredService());
        builder.Services.AddAuthorizationCore();

        return builder.Build();
    }
}

Implement a Simple User Store

Create UserService.cs in YourApp.Shared/Services:


// YourApp.Shared/Services/UserService.cs
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace YourApp.Shared.Services
{
    public class UserService
    {
        private List _users = new List
        {
            new UserCredential { Username = "user1", Password = "password1", Role = "User" },
            new UserCredential { Username = "admin", Password = "admin123", Role = "Admin" }
        };

        public Task AuthenticateUserAsync(string username, string password)
        {
            var user = _users.FirstOrDefault(u => u.Username == username && u.Password == password);
            return Task.FromResult(user);
        }
    }

    public class UserCredential
    {
        public string Username { get; set; }
        public string Password { get; set; }
        public string Role { get; set; }
    }
}

Register UserService in both Program.cs and MauiProgram.cs:


builder.Services.AddScoped();

Create `Login.razor`

In YourApp.Shared/Pages:


@page "/login"
@using YourApp.Shared.Services
@inject CustomAuthenticationStateProvider AuthStateProvider
@inject UserService UserService
@inject NavigationManager NavigationManager

Login

@if (!string.IsNullOrEmpty(ErrorMessage))
{
    @ErrorMessage
}


    
    

    
        Username:
        
    
    
        Password:
        
    
    


@code {
    private LoginModel loginModel = new LoginModel();
    private string ErrorMessage;

    private async Task HandleLogin()
    {
        var user = await UserService.AuthenticateUserAsync(loginModel.Username, loginModel.Password);
        if (user != null)
        {
            AuthStateProvider.SignIn(user.Username);
            NavigationManager.NavigateTo("/");
        }
        else
        {
            ErrorMessage = "Invalid username or password.";
        }
    }

    public class LoginModel
    {
        public string Username { get; set; }
        public string Password { get; set; }
    }
}

Create `Logout.razor`

In YourApp.Shared/Pages:


@page "/logout"
@inject CustomAuthenticationStateProvider AuthStateProvider
@inject NavigationManager NavigationManager

Logging out...

@code {
    protected override void OnInitialized()
    {
        AuthStateProvider.SignOut();
        NavigationManager.NavigateTo("/");
    }
}

Protect Pages with Authorization

Create a Protected Page

Create ProtectedPage.razor in YourApp.Shared/Pages:


@page "/protected"
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@attribute [Authorize]
@inject AuthenticationStateProvider AuthenticationStateProvider

Protected Page

Welcome, @userName!

@code {
    private string userName;

    protected override async Task OnInitializedAsync()
    {
        var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
        var user = authState.User;
        userName = user.Identity?.Name;
    }
}

Ensure Required Packages Are Installed

Add the following NuGet packages to YourApp.Shared:

Microsoft.AspNetCore.Authorization
Microsoft.AspNetCore.Components.Authorization

In YourApp.Shared/Shared, update NavMenu.razor:


@inject AuthenticationStateProvider AuthenticationStateProvider
@implements IDisposable


    
        Home
        @if (isAuthenticated)
        {
            Protected Page
            Logout (@userName)
        }
        else
        {
            Login
        }
    


@code {
    private bool isAuthenticated;
    private string userName;
    private AuthenticationState authenticationState;

    protected override async Task OnInitializedAsync()
    {
        authenticationState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
        UpdateAuthenticationState(authenticationState);

        AuthenticationStateProvider.AuthenticationStateChanged += OnAuthenticationStateChanged;
    }

    private void UpdateAuthenticationState(AuthenticationState authState)
    {
        var user = authState.User;
        isAuthenticated = user.Identity?.IsAuthenticated ?? false;
        userName = user.Identity?.Name;
        StateHasChanged();
    }

    private void OnAuthenticationStateChanged(Task task)
    {
        InvokeAsync(async () =>
        {
            var authState = await task;
            UpdateAuthenticationState(authState);
        });
    }

    public void Dispose()
    {
        AuthenticationStateProvider.AuthenticationStateChanged -= OnAuthenticationStateChanged;
    }
}

Adjust Routing in `Routes.razor`

In YourApp.Shared, update Routes.razor:


@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Routing


    
        
            
                
                    @if (context.User.Identity.IsAuthenticated)
                    {
                        You are not authorized to access this resource.
                    }
                    else
                    {
                        
                    }
                
                
                    Authorizing...
                
            
        
        
            
                Sorry, there's nothing at this address.
            
        
    


@code {
    [CascadingParameter]
    private Task authenticationStateTask { get; set; }

    private AuthenticationState context => authenticationStateTask.Result;
}

Create `RedirectToLogin.razor`

In YourApp.Shared/Components:


@inject NavigationManager NavigationManager

@code {
    protected override void OnInitialized()
    {
        var returnUrl = Uri.EscapeDataString(NavigationManager.Uri);
        NavigationManager.NavigateTo($"/login?returnUrl={returnUrl}");
    }
}

Test the Application

Run the Web App

Start the Web Project (YourApp.Web).
Navigate to a Protected Page: Visit /protected.
Verify Redirection: You should be redirected to the login page.
Log In: Use user1 / password1.
Access Protected Content: You should now see the protected page.

Run the Mobile App

Start the Mobile Project (YourApp.Mobile).
Repeat the Steps: Perform the same steps as above to verify authentication on mobile.

Additional Considerations

Persisting Authentication State

To persist authentication state across sessions, modify the CustomAuthenticationStateProvider to use secure storage.

Implementing Secure Storage

Update CustomAuthenticationStateProvider.cs:


using Microsoft.JSInterop;
using System.Text.Json;
using Microsoft.Maui.Storage;

public class CustomAuthenticationStateProvider : AuthenticationStateProvider
{
    private readonly IJSRuntime _jsRuntime;
    private const string _authDataKey = "authData";
    private ClaimsPrincipal _currentUser;

    public CustomAuthenticationStateProvider(IJSRuntime jsRuntime = null)
    {
        _jsRuntime = jsRuntime;
    }

    public override async Task GetAuthenticationStateAsync()
    {
        if (_currentUser != null)
        {
            return new AuthenticationState(_currentUser);
        }

        string authDataJson = null;

#if ANDROID || IOS || WINDOWS
        authDataJson = await SecureStorage.Default.GetAsync(_authDataKey);
#else
        if (_jsRuntime != null)
        {
            authDataJson = await _jsRuntime.InvokeAsync("localStorage.getItem", _authDataKey);
        }
#endif

        if (!string.IsNullOrWhiteSpace(authDataJson))
        {
            var authData = JsonSerializer.Deserialize(authDataJson);
            var identity = new ClaimsIdentity(new[]
            {
                new Claim(ClaimTypes.Name, authData.Username)
            }, "apiauth_type");

            _currentUser = new ClaimsPrincipal(identity);
        }
        else
        {
            _currentUser = new ClaimsPrincipal(new ClaimsIdentity());
        }

        return new AuthenticationState(_currentUser);
    }

    public async void SignIn(string username)
    {
        var identity = new ClaimsIdentity(new[]
        {
            new Claim(ClaimTypes.Name, username)
        }, "apiauth_type");

        _currentUser = new ClaimsPrincipal(identity);

        var authData = new AuthData { Username = username };
        var authDataJson = JsonSerializer.Serialize(authData);

#if ANDROID || IOS || WINDOWS
        await SecureStorage.Default.SetAsync(_authDataKey, authDataJson);
#else
        if (_jsRuntime != null)
        {
            await _jsRuntime.InvokeVoidAsync("localStorage.setItem", _authDataKey, authDataJson);
        }
#endif

        NotifyAuthenticationStateChanged(GetAuthenticationStateAsync());
    }

    public async void SignOut()
    {
        _currentUser = new ClaimsPrincipal(new ClaimsIdentity());

#if ANDROID || IOS || WINDOWS
        SecureStorage.Default.Remove(_authDataKey);
#else
        if (_jsRuntime != null)
        {
            await _jsRuntime.InvokeVoidAsync("localStorage.removeItem", _authDataKey);
        }
#endif

        NotifyAuthenticationStateChanged(GetAuthenticationStateAsync());
    }

    private class AuthData
    {
        public string Username { get; set; }
    }
}

Enhancing Security

Password Hashing: Implement hashing for passwords instead of storing them in plain text.
Use HTTPS: Ensure your web application uses HTTPS to encrypt data in transit.
Input Validation: Validate all user inputs to prevent injection attacks.

Conclusion

By following these steps, you’ve successfully implemented a basic authentication system in your .NET 9 MAUI Blazor Hybrid app using the new Blazor Web App template with a .Shared project. This setup allows you to:

Understand the Basics: Gain insights into how authentication works in Blazor and MAUI.
Share Code: Use the .Shared project to share components and services between web and mobile apps.
Prepare for Future Enhancements: Lay the groundwork for integrating more secure and complex authentication mechanisms in the future.

Next Steps:

Implement Secure Authentication: Consider integrating OAuth or OpenID Connect for robust authentication.
Role-Based Authorization: Utilize roles to manage user access to different parts of the application.
UI/UX Improvements: Enhance the user interface for better usability and aesthetics.

Feel free to customize this guide further or reach out if you have any questions or need additional assistance!

Bluetooth Thermometer app – some new added features.

dfouche8 — Mon, 04 Jan 2021 22:07:02 +0000

Here is a video on the added features of the Bluetooth thermometer app

https://youtu.be/z5OnSWrEYCc

Drone Photos

dfouche8 — Sat, 27 Jun 2020 22:51:34 +0000

Bluetooth Low Energy Thermometer

dfouche8 — Thu, 26 Dec 2019 08:56:50 +0000

You can create your own Bluetooth Low Energy Thermometer by just using a few components.

Some things you will need: 1. Arduino (Uno, Nano or Micro) We will be using the Uno for this demo.

2. AT-09/HM-10 module

3. DS18B20 thermal sensor

4. Some wires for connecting them (male to male, male to female and female to female)

5. a 4.7k resistor 6. an Android or iPhone

7. and finally the Arduino IDE from Here

Connecting all components

Connect everything up as shown in the diagram below, the connections are the same for HC-05 and AT-09

Required Libraries

Make sure to import the OneWire or 18b20 Library from Dallas Instruments

The Code to Run the project

Copy and paste the following code into your Arduino IDE or into the IDE of your choice

// Include the libraries
#include  
#include 

// Data wire goes to pin 2 on the Arduino 
#define ONE_WIRE_BUS 2 

// Setup a oneWire instance
OneWire oneWire(ONE_WIRE_BUS); 

// Pass the oneWire reference to Dallas Temperature. 
DallasTemperature sensors(&oneWire);

void setup(void) 
{ 
 // start serial port with a baudrate of 9600 
 Serial.begin(9600); 
 Serial.println("Temperature Demo started"); 
 // Start up the sensor library 
 sensors.begin(); 
} 

void loop(void) 
{ 
  //request temprature
 sensors.requestTemperatures(); 
 // get the first sensors data 
 Serial.print(sensors.getTempCByIndex(0));  
 // finalize the string
 Serial.println("\r\n");
 //wait for 1 second before it reads again
 delay(1000); 
}

Click the Verify button to make sure there are no code errors and if it’s successful Click the Upload.

When the upload is successful, the program will start running on the Arduino.

Testing

When the upload is successful, open your serial monitor by pressing “Ctrl+Shft+M” If everything is working as expected you should see an output on the serial monitor every second.

Connecting to your Bluetooth Device

Once you have verified that the Arduino is getting data from your ds18b20, you are ready to connect your phone to your Bluetooth Module.

Download our app from the Google Play Store. Once the app is installed, connect it to the (AT-09) with your app by selecting the device from the list.

Once you have selected the device tap the connect button top right and it will connect to it and you should shortly start seeing the data updating on the app.

Bluetooth Low Energy Thermometer App

dfouche8 — Wed, 18 Dec 2019 10:04:20 +0000

The Bluetooth LE thermometer app was created as a nice display of the data from my Bluetooth Low Energy Thermometer electronic project. The app uses Ble (Bluetooth Low Energy) to connect to an AT-09 or HM-10 low energy device or similar. Once the app is connected to the Bluetooth LE thermometer device, it will start listening for serial data.

The Bluetooth LE thermometer app has a text display with a Graphical Thermometer on the thermometer page. On the Graph page, it has a text display as well as a Graphical Graph showing the last 30 data points collected from the Bluetooth Thermometer.

You can make your own Bluetooth Thermometer using the AT-09 /HM-10 Bluetooth Low Energy module and connect it to an Arduino via the UART/Serial connections. Have a look at the Bluetooth Low Energy Thermometer electronics project to see how you can make your own BLE thermometer.

Bluetooth Thermometer App

dfouche8 — Sat, 30 Nov 2019 09:32:22 +0000

The Bluetooth thermometer app was created as a nice display of the data from my Bluetooth Thermometer electronic project.

The app uses legacy Bluetooth and therefore is only available on Android as iOS does not support it. This means that you can NOT connect to any Ble (Bluetooth Low Energy) device as it will not be picked up by the app. If you require an app for BLE please have a look at our Bluetooth LE Thermometer app.

Once the app is connected to the Bluetooth thermometer it will start listening for a decimal string ending with “\r\n” as the termination characters and will update the display as it receives data from the Bluetooth Thermometer.

At this point, the app only supports “\r\n” as termination characters, but we do have plans to add other termination strings if people request it.

The Bluetooth Thermometer App has a text display as well as a Graphical Thermometer on the thermometer page. On the Graph page, it has a text display as well as a Graphical Graph display showing the last 30 data points collected from the Bluetooth Thermometer.

You can make your own Bluetooth Thermometer using the HC-05 Bluetooth Module and connect it to an Arduino via the UART/Serial connections. Have a look at the Bluetooth Thermometer electronics project to see how you can make your own.

Bluetooth Thermometer

dfouche8 — Wed, 30 Oct 2019 08:13:37 +0000

You can create your own Bluetooth Thermometer by just using a few components.

Some things you will need:
1. Arduino (Uno, Nano or Micro)
We will be using the Uno for this demo.

2. HC-05 module

3. DS18B20 thermal sensor

4. Some wires for connecting them
(male to male, male to female and female to female)

5. a 4.7k resistor

6. an Android phone

7. and finally the Arduino IDE from Here

Connecting all components

Connect everything up as shown in the diagram below

Required Libraries

Make sure to import the OneWire or 18b20 Library from Dallas Instruments

The Code to Run the project

Copy and paste the following code into your Arduino IDE or into the IDE of your choice

// Include the libraries
#include  
#include 

// Data wire goes to pin 2 on the Arduino 
#define ONE_WIRE_BUS 2 

// Setup a oneWire instance
OneWire oneWire(ONE_WIRE_BUS); 

// Pass the oneWire reference to Dallas Temperature. 
DallasTemperature sensors(&oneWire);

void setup(void) 
{ 
 // start serial port with a baudrate of 9600 
 Serial.begin(9600); 
 Serial.println("Temperature Demo started"); 
 // Start up the sensor library 
 sensors.begin(); 
} 

void loop(void) 
{ 
  //request temprature
 sensors.requestTemperatures(); 
 // get the first sensors data 
 Serial.print(sensors.getTempCByIndex(0));  
 // finalize the string
 Serial.println("\r\n");
 //wait for 1 second before it reads again
 delay(1000); 
}

Click the Verify button to make sure there are no code errors
and if it’s successful Click the Upload.

When the upload is successful, the program will start running on the Arduino.

Testing

When the upload is successful, open your serial monitor by pressing “Ctrl+Shft+M”

If everything is working as expected you should see an output on the serial monitor every second.

Connecting to your Bluetooth Device

Once you have verified that the Arduino is getting data from your ds18b20, you are ready to connect your phone to your Bluetooth Module.

Download our app from the Google Play Store.

Once the app is installed, pair your Bluetooth Device(HC-05) with your phone.

Open the app on your phone and have a look for the paired device that you have just added to your phone and select it from the list.

Once you have selected the device it will connect to it and you should shortly start seeing the data updating on the app.

Summer is here!

dfouche8 — Tue, 23 Oct 2018 01:59:57 +0000

GeoSaffer.com

Implementing Authentication in a .NET 9 MAUI Blazor Hybrid App (SSR)

Implementing Authentication in a .NET 9 MAUI Blazor Hybrid App (SSR)

Table of Contents

Project Structure Overview

Prerequisites

Step-by-Step Implementation

Create a New Solution

Add some global usings for razor pages

Implement Platform-Specific Authentication Services

Create an Interface for Authentication

Implement the Authentication Service for Blazor Server

Update Program.cs in the Web Project

Create ServerAuthenticationStateProvider

Implement the Authentication Service for MAUI

Adjust CustomAuthenticationStateProvider for MAUI

Register Services in the MAUI Project

Implement a Simple User Store

Build Login and Logout Components

Create Login.razor

Login

Create Logout.razor

Logging out...

Protect Pages with Authorization

Create a Protected Page

Protected Page

Update the Navigation Menu

Adjust Routing in Routes.razor

Test the Application

Run the Web App

Run the Mobile App

Additional Considerations

Persisting Authentication State

Enhancing Security

Conclusion

How to Implement and Use Google Translate API in C#

How to Implement and Use Google Translate API in C#

Table of Contents

1. Prerequisites

2. Setting Up Google Cloud Translation API

a. Create a New Project

b. Enable the Translation API

c. Create Service Account Credentials

3. Creating a C# Project

4. Writing the Code

a. Install Required NuGet Packages

b. Add the Service Account Key

c. Implement the Translation Logic

d. Understanding the Code

5. Running the Application

Expected Output:

6. Handling Common Issues

a. Authentication Errors

b. Quota Exceeded

c. Encoding Issues

7. Conclusion

Implementing Authentication in a .NET 9 MAUI Blazor Hybrid App

Implementing Authentication in a .NET 9 MAUI Blazor Hybrid App

Table of Contents

Project Structure Overview

Prerequisites

Step-by-Step Implementation

Create a New Solution

Add some global usings for razor pages

Implement the Authentication State Provider

Create CustomAuthenticationStateProvider

Register the Authentication State Provider

Implement a Simple User Store

Build Login and Logout Components

Create Login.razor

Login

Create Logout.razor

Logging out...

Protect Pages with Authorization

Create a Protected Page

Protected Page

Ensure Required Packages Are Installed

Update the Navigation Menu

Adjust Routing in Routes.razor

Create RedirectToLogin.razor

Update `Program.cs` in the Web Project

Create `ServerAuthenticationStateProvider`

Adjust `CustomAuthenticationStateProvider` for MAUI

Create `Login.razor`

Create `Logout.razor`

Adjust Routing in `Routes.razor`

Create `CustomAuthenticationStateProvider`

Create `Login.razor`

Create `Logout.razor`

Adjust Routing in `Routes.razor`

Create `RedirectToLogin.razor`