Generics: Write Once, Use Every Time

This article will guide you through the process of creating a Generic HTTP service in C# that consumes a .NET Core Web API.

To simplify things, we will create a .NET Core WEB API (BookStoreWebApi) and a .NET Core Console (BookStoreConsole) application to implement a generic HTTP Service that consumes a C# CRUD API.

You can find the BookStoreWebApi and BookStoreConsole sample applications in the GitHub repo

To consume an ABP Framework API, have a look at the mobile .NET MAUI app and .NET Core Console app in the Repo.

Warning: The Generic Http Service created in this article is definitely not production-ready, as you typically will need to add Logging, Exception Handling, Retry Logic, and ...

Prerequisites

• .NET 8.0 SDK
• VsCode, Visual Studio 2022 or another compatible IDE

Development

Setting Up the .NET Core Web API

First, open a terminal and create a .NET Core API with a BooksController with the standard CRUD endpoints.

dotnet new webapi --use-controllers -o BookStoreWebApi

Copy Data/Infra/Dtos folders

Copy/paste the Data/Infra and Dtos folders of the BookstoreWebApi sample project into the root of the newly created API. In the Dtos folder you find the Data Transfer Objects for sending/receiving data to/from the API.

Add a BooksController class to the Controllers folder

using BookStoreWebApi.Dtos.Books;
using BookStoreWebApi.Infra;
using Microsoft.AspNetCore.Mvc;
using static BookStoreWebApi.Data.BooksResolver;

namespace BookStoreWebApi.Controllers
{
    [Route("api/app/book")]
    [ApiController]
    public class BooksController : ControllerBase
    {
        [HttpGet]
        public PagedResultDto<BookDto> Get([FromQuery]GetBooksDto getBooksDto) => new() { Items = BookItems, TotalCount = BookItems.Count };

        [HttpGet("{id}")]
        public BookDto? Get(Guid id) => BookItems.FirstOrDefault(x => x.Id == id);

        [HttpPost]
        public BookDto Create([FromBody] CreateBookDto createBookDto)
        {
            BookItems.Add(new BookDto(createBookDto.Name,createBookDto.Type,createBookDto.Price,  createBookDto.PublishDate, createBookDto.Id));
            return BookItems.Single(x => x.Id == createBookDto.Id);
        }

        [HttpPut("{id}")]
        public BookDto? Put(Guid id, [FromBody] UpdateBookDto updateBookDto)
        {
            var bookDto = BookItems.FirstOrDefault(x => x.Id == id);
            if (bookDto == null) return bookDto;
            bookDto.Name = updateBookDto.Name;
            bookDto.Price = updateBookDto.Price;
            bookDto.PublishDate = updateBookDto.PublishDate;
            bookDto.Type = updateBookDto.Type;
            return bookDto;
        }

        [HttpDelete("{id}")]
        public void Delete(Guid id)
        {
            var bookDto = BookItems.FirstOrDefault(x => x.Id == id);
            if (bookDto != null) BookItems.Remove(bookDto);
        }
    }
}

Run the API

Press F5 to run the API. It will be hosted on https://localhost:xxxxx.

Creating a Generic HTTP Service

Create a new Console app

Open a terminal and run the command below to create a new console app.

dotnet new console -o BookStoreConsole

Add Dependency Injection Nuget Package

Open a terminal in the root of the Console app and install the Microsoft.Extensions.DependencyInjection NuGet package.

dotnet add package Microsoft.Extensions.DependencyInjection

IHttpService interface

Create a Services/Http folder in the root of your console application.

Copy/Paste the Infra folder of the BookStoreConsole sample application into the Services/Http folder.

Create a IHttpService.cs interface with the standard CRUD method definitions in the Services/Http folder.

using BookStoreConsole.Services.Http.Infra;

namespace BookStoreConsole.Services.Http;

public interface IHttpService<T, in TC, in TU, in TG, in TD>
{
    Task<ListResultDto<T>> GetListAsync(string uri, TG? getListRequestDto = default);
    Task<ListResultDto<T>> UpdateAsync(string uri, TU updateInputDto);
    Task<T> CreateAsync(string uri, TC createInputDto);
    Task CreateManyAsync(string uri, IEnumerable<TC> createManyInputDto);
    Task<T> GetAsync(string uri);
    Task DeleteAsync(string uri, TD id);
}

Create a HttpService.cs class in the Http folder that implements the IHttpService interface

using System.Net.Http.Json;
using BookStoreConsole.Services.Http.Infra;

namespace BookStoreConsole.Services.Http;

public class HttpService<T, TC, TU, TL, TD> : HttpServiceBase<TL>, IHttpService<T, TC, TU, TL, TD>
    where T : class 
    where TC : class
    where TU : class
    where TL : class
{
    public async Task<ListResultDto<T>> GetListAsync(string uri, TL? getListRequestDto = default)
    {
        if (getListRequestDto == null) return new ListResultDto<T>();
        var httpResponse = await (await GetHttpClientAsync()).Value.GetAsync(ComposeUri(uri, getListRequestDto));
        httpResponse.EnsureSuccessStatusCode();
        var json = await httpResponse.Content.ReadAsStringAsync();
        if (json == "[]" || json.IsNullOrWhiteSpace()) return new ListResultDto<T>();
        if (getListRequestDto is IPagedRequestDto)
        {
            var pagedResultDto = json.ToType<PagedResultDto<T>>();
            return new PagedResultDto<T>(pagedResultDto.TotalCount,pagedResultDto.Items);
        }
        return new ListResultDto<T>(json.ToType<List<T>>());
    }

    public async Task<ListResultDto<T>> UpdateAsync(string uri, TU updateInputDto)
    {
        var httpResponse = await (await GetHttpClientAsync()).Value.PutAsJsonAsync($"{uri}", updateInputDto);
        var json = await httpResponse.Content.ReadAsStringAsync();
        if (json == "[]" || json.IsNullOrWhiteSpace()) return new ListResultDto<T>();

        if (json.StartsWith("{") && json.EndsWith("}"))
            return new ListResultDto<T>(new List<T> { json.ToType<T>() });

        return new ListResultDto<T>(json.ToType<List<T>>());
    }

    public async Task<T> CreateAsync(string uri, TC createInputDto)
    {
        var httpResponse = await (await GetHttpClientAsync()).Value.PostAsJsonAsync(uri, createInputDto);
        return (await httpResponse.Content.ReadAsStringAsync()).ToType<T>();
    }

    public async Task CreateManyAsync(string uri, IEnumerable<TC> createInputDto)
    {
        var httpResponse = await (await GetHttpClientAsync()).Value.PostAsJsonAsync($"{uri}/many", createInputDto);
    }

    public async Task<T> GetAsync(string uri)
    {
        var httpResponse = await (await GetHttpClientAsync()).Value.GetAsync(uri);
        return (await httpResponse.Content.ReadAsStringAsync()).ToType<T>();
    }

    public async Task DeleteAsync(string uri, TD id)
    {
        var httpResponse = await (await GetHttpClientAsync()).Value.DeleteAsync($"{uri}/{id}");
    }
}

Create an IBookService interface

Create a Books folder in the Services folder of your project.

Copy/Paste the Services/Books/Dtos folder of the BookStoreConsole sample application into the Services/Books folder.

Create an IBookService.cs interface in the Services/Books folder.

using BookStoreConsole.Services.Books.Dtos;

namespace BookStoreConsole.Services.Books;

public interface IBookService
{
    Task<IEnumerable<BookDto>> GetBooksAsync();
    Task<BookDto?> CreateBookAsync(CreateBookDto bookDto);
    // Find other method definitions in the BookStoreConsole sample project ...
}

Create a BookService class in the Services/Books folder. The BookService class gets the correct HttpService via Constructor Dependency Injection.

using BookStoreConsole.Services.Books.Dtos;
using BookStoreConsole.Services.Http;

namespace BookStoreConsole.Services.Books;

public class BookService(
    IHttpService<BookDto, CreateBookDto, UpdateBookDto, GetBooksDto, Guid> httpService)
    : IBookService
{
    // REPLACE <the-api-port-number-here> with the port number the API is running on !!!

    const string BookApiUrl = "https://localhost:<the-api-port-number-here>/api/app/book"; 
    
    public async Task<IEnumerable<BookDto>> GetBooksAsync() 
        => (await httpService.GetListAsync($"{BookApiUrl}", new GetBooksDto())).Items;

    public async Task<BookDto?> CreateBookAsync(CreateBookDto bookDto) 
        => await httpService.CreateAsync($"{BookApiUrl}", bookDto);

    // Find other methods in the BookStoreConsole sample project ...

}

Test the Generic HTTP Service

Program.cs

Copy/Paste the content below in the Program.cs file and hit F5 to run the console app.

using BookStoreConsole.Services.Books;
using BookStoreConsole.Services.Books.Dtos;
using BookStoreConsole.Services.Http;
using Microsoft.Extensions.DependencyInjection;

// First set up the Dependency Injection System to register the Book Http Service and the BookService
var services = new ServiceCollection();

// Register the Book HttpService to the Dependency Injection system
services.AddTransient<IHttpService<BookDto, CreateBookDto, UpdateBookDto, GetBooksDto, Guid>,
    HttpService<BookDto, CreateBookDto, UpdateBookDto, GetBooksDto, Guid>>();

// Register the BookService to the Dependency Injection system
services.AddTransient<IBookService, BookService>();

// Get the BookService from the Dependency Injection System
// The Book service becomes via its constructor the Book HttpService (Constructor Dependency Injection) and is ready to use.
var bookService = services.BuildServiceProvider().GetRequiredService<IBookService>();

// Create a book
var createdBook = await bookService.CreateBookAsync(new CreateBookDto("New Book3", BookType.Adventure, DateTime.Now, 10.0f));

// Get a list of books => The result should be a list of 3 books. 
var books = await bookService.GetBooksAsync();

Console.ReadLine(); // Set here a breakpoint to see the results

Another Use Case: Authors

When you have a working use case, the Generic Book HTTP Service, things get a lot easier because the heavy lifting is done.

Imagine, you have another use case where you need to Get or Create Authors from the API.

The only things you need to do are:

Create the DTOS (CreateAuthorDto, GetAuthorsDto, ...)

namespace BookStoreWebApi.Dtos.Authors;

public class AuthorDto
{
    public Guid Id { get; set; }
    public string? Name { get; set; }
    public DateTime BirthDate { get; set; }
    public string? ShortBio { get; set; }
}

Create an IAuthorService interface and AuthorService class

public interface IAuthorService
{
    Task<IEnumerable<AuthorDto>> GetAuthorsAsync();
    Task<AuthorDto?> CreateAuthorAsync(CreateAuthorDto bookDto);
    // other method definitions here
}

public class AuthorService : IAuthorService
{
    // implementation here
}

Register the Author Http Service to the Dependency Injection System

services.AddTransient<IHttpService<AuthorDto, CreateAuthorDto, UpdateAuthorDto, GetAuthorsDto, Guid>,
    HttpService<AuthorDto, CreateAuthorDto, UpdateAuthorDto, GetAuthorsDto, Guid>>();

Register the AuthorService to the Dependency Injection System

services.AddTransient<IAuthorService, AuthorService>();

Call the CRUD methods you need to call

await authorService.CreateAuthorAsync(new CreateAuthorDto(){ ... });

var authors = await authorService.GetAuthorsAsync();

Get the source code on GitHub.

Enjoy and have fun!

In this blog post, I will show you, on a Windows machine, how to tunnel your local host address to a public URL with ngrok.

In my case, I use ngrok to expose an ABP Framework back-and API localhost address to a public internet URL so that I can consume an ABP Framework API by a .NET MAUI mobile app running on my Android phone.

The problem is, that you need to copy the public URL generated by ngrok and replace the Authority URL in the appsettings.json file of the .NET MAUI Mobile app manually. This is very cumbersome and time-consuming.

So I automated the process by writing a batch-script that starts ngrok and also automatically replaces the Authority URL in the appsettings.json file of the .NET MAUI mobile app.

The script is called ngrok.bat and is located at the project's root.

Although the script is written for an ABP Framework project with .NET MAUI mobile app, the same principle can be applied to many other projects too.

Step-by-step

Install and setup ngrok

1. Download and install ngrok

   Get the ngrok on the ngrok official website.

2. Get an auth token

   After you have downloaded and installed ngrok, you need to get an authtoken to use ngrok. You can get an authtoken by signing up on the ngrok website.

   Go to the ngrok Sign up page and follow the instructions to get an authtoken.

3. Add authtoken to your ngrok.yml file

   Run the following command to add your authtoken to your ngrok.yml file:

     ngrok authtoken your-authtoken

Install jq

jq is a lightweight and flexible command-line JSON processor. You can use jq to parse JSON data in the terminal.

Get the jq on the jq official website and install it.

Copy the ngrok.bat script to the root of the ABP Framework project

@echo off

set targetFile="C:\<your-path-to-the-maui-mobile-aap-appsettings-file-here>\appsettings.json"
set apiLocalhostPortNumber=<api-port-number-here>

setlocal disabledelayedexpansion

start ngrok.exe http https://localhost:%apiLocalhostPortNumber%/

timeout 5 > NUL

if not exist "C:\TEMP_NGROK\" mkdir "C:\TEMP_NGROK\"

for /F %%I in ('curl -s http://127.0.0.1:4040/api/tunnels ^| jq -r .tunnels[0].public_url') do set ngrokTunnel=%%I
echo ngroktunnel: %ngrokTunnel%
echo  %ngrokTunnel%/.well-known/openid-configuration

for /f "tokens=1* delis=]" %%a in ('find /n /v "" %targetFile%') do (
  echo %%b|finds /rc:"\ *\"AuthorityUrl\".*\:\ \".*\"" >nul && (
    for /f "delis=:" %%c in ("%%b") do echo %%c: "%ngrokTunnel%",
 ) || echo/%%b
)>>C:\TEMP_NGROK\temp.json 2>nul

for %%I in (C:\TEMP_NGROK\temp.json) do for /f "delis=, tokens=* skip=1" %%x in (%%I) do echo %%x >> "%%I.new"

move /Y "C:\TEMP_NGROK\temp.json.new" %targetFile% > nul

del C:\TEMP_NGROK\temp.json
rmdir /s /q "C:\TEMP_NGROK\"

Start the ABP Framework back-end API

Start the batch-script

Open a terminal in the root of the ABP Framework project and run the following command:

    ngrok.exe

When you run the script, ngrok will tunnel your localhost address to a public URL, and will replace the Authority URL in the appsettings.json file of the .NET MAUI Mobile app with the public URL generated by ngrok.

Enjoy and happy coding!

Adding a Module to an ABP project made simple

As you can read in the ABP Framework documentation about Modularity, the ABP Framework was designed to support to build fully modular applications.

Today I will show you how to create and integrate your own module, in this case a simple PdfGenerator, into an ABP Framework application.

Source code

The source code of both projects is available on GitHub

Requirements

The following tools are needed to be able to run the solution and follow along.

• .NET 8.0 SDK
• VsCode, Visual Studio 2022 or another compatible IDE
• ABP CLI 8.0.0

Create a new ABP Framework application

    abp new BookStore -u blazor -o BookStore

• Run the DbMigrator project to apply the database migrations
• Start both the HttpApi.Host project and Blazor project
• Stop both the HttpApi.Host project and Blazor project

Create a PdfGenerator ABP Module

Add a modules folder to the root of the project

Open a command prompt in the modules folder of the project and add a new class library

    dotnet new classlib -n PdfGenerator

Add PdfGenerator project to solution

Go to the root of your ABP project and run the command below:

    dotnet sln add modules\PdfGenerator\PdfGenerator.csproj

Install Nuget packages

Open a command prompt in the root of the PdfGenerator class library and install the Nuget packages below.

    abp add-package Volo.Abp.Core
    dotnet add package PdfSharpCore

Add a PdfGeneratorSettings section to the appsettings.json file in hte HttpApi.Host project

  "PdfGeneratorSettings": {
        "UserName": "your-username",
        "EmailAddress": "your-username@hotmail.com"
    }

Add a PdfGeneratorSettingsOptions class to the PdfGenerator class library project

namespace PdfGenerator
{
    public class PdfGeneratorSettingsOptions
    {
        public string? UserName { get; set; }
        public string? EmailAddress { get; set; }
    }
}

Add a MyPdfGeneratorModule class to the PdfGenerator class library project

using Microsoft.Extensions.DependencyInjection;
using Volo.Abp.Modularity;

namespace PdfGenerator
{
    public class MyPdfGeneratorModule :  AbpModule
    {
        public override void ConfigureServices(ServiceConfigurationContext context)
        {
            var configuration = context.Services.GetConfiguration();
            Configure<PdfGeneratorSettingsOptions>(configuration.GetSection("PdfGeneratorSettings"));
            context.Services.AddTransient<IPdfGeneratorService, PdfGeneratorService>();
        }
    }
}

Add an IPdfGeneratorService interface and a PdfGeneratorService class to the PdfGenerator class library project

using Microsoft.Extensions.Options;
using PdfSharpCore.Drawing;
using PdfSharpCore.Fonts;
using PdfSharpCore.Pdf;
using PdfSharpCore.Utils;

namespace PdfGenerator
{
    public interface IPdfGeneratorService
    {
        Task<byte[]> Generate();
    }

    public class PdfGeneratorService(IOptions<PdfGeneratorSettingsOptions> options) : IPdfGeneratorService
    {
        private readonly PdfGeneratorSettingsOptions _options = options.Value;

        public async Task<byte[]> Generate()
        {
            if (GlobalFontSettings.FontResolver is not FontResolver)
                GlobalFontSettings.FontResolver = new FontResolver();

            var document = new PdfDocument();
            var page = document.AddPage();

            var gfx = XGraphics.FromPdfPage(page);
            var font = new XFont("Arial", 20, XFontStyle.Bold);

            var textColor = XBrushes.Black;
            var layout = new XRect(20, 20, page.Width, page.Height);
            var format = XStringFormats.Center;

            gfx.DrawString($"Pdf created by {_options.UserName}!", font, textColor, layout, format);

            byte[] fileContents;
            using (var stream = new MemoryStream())
            {
                document.Save(stream, true);
                fileContents = stream.ToArray();
            }
            return await Task.FromResult(fileContents);
        }
    }
}

Add a project reference to the PdfGeneratorModule class library project in the Application project

Open a command prompt in the root of the Application project

   dotnet add reference ../../modules/PdfGenerator/PdfGenerator.csproj

Attribute DependsOn in the BookStoreApplicationModule class in the Application project

Add a typeof(MyPdfGeneratorModule) entry in the DependsOnAttribute

[DependsOn(
    typeof(BookStoreDomainModule),
    typeof(AbpAccountApplicationModule),
    typeof(BookStoreApplicationContractsModule),
    typeof(AbpIdentityApplicationModule),
    typeof(AbpPermissionManagementApplicationModule),
    typeof(AbpTenantManagementApplicationModule),
    typeof(AbpFeatureManagementApplicationModule),
    typeof(AbpSettingManagementApplicationModule),
    typeof(MyPdfGeneratorModule)
    )]

Add A IExportPdfAppService interface the Application.Contracts project

using System.Threading.Tasks;
using Volo.Abp.Application.Services;

namespace BookStore.Application.Contracts
{
    public interface IExportPdfAppService : IApplicationService
    {
        Task<byte[]> GeneratePdf();
    }
}

Add A ExportPdfAppService class to test the Application project

using System.Threading.Tasks;
@using BookStore.Application.Contracts;
using PdfGenerator;
using Volo.Abp.Application.Services;

namespace BookStore
{
    public class ExportPdfAppService(IPdfGeneratorService pdfGeneratorService) : ApplicationService, IExportPdfAppService
    {
        private readonly IPdfGeneratorService _pdfService = pdfGeneratorService;
        public async Task<byte[]> GeneratePdf() => await _pdfService.Generate();
    }
}

add a exporttopdf.js file to the wwwroot/js folder of the Blazor project

function saveAsFile(filename, bytesBase64) {
    var link = document.createElement('a');
    link.download = filename;
    link.href = 'data:application/octet-stream;base64,' + bytesBase64;
    document.body.appendChild(link); // Needed for Firefox
    link.click();
    document.body.removeChild(link);
}

add a reference to exporttopdf.js in the index.html file in the Blazor project

<!DOCTYPE html>
<html>
    <!-- other code here ... -->
    <script src="js/exporttopdf.js"></script>
</body>
</html>

Replace contents from Index.razor page in the Blazor project

@page "/"
@using BookStore.Application.Contracts;
@using Microsoft.JSInterop
@inject IExportPdfAppService ExportPdfAppService
@inject IJSRuntime JsRuntime

<Row Class="d-flex px-0 mx-0 mb-1">
    <Button Clicked="@(ExportPdf)" class="p-0 ml-auto mr-2" style="background-color: transparent"
            title="Download">
        <span class="fa fa-file-pdf fa-lg m-0" style="color: #008000; background-color: white;"
              aria-hidden="true">
        </span>
        Generate Pdf!
    </Button>
</Row>

@code {
    private async Task ExportPdf()
    {
        var pdfBytes = await ExportPdfAppService.GeneratePdf();
        await JsRuntime.InvokeVoidAsync("saveAsFile", $"test_{DateTime.Now.ToString("yyyyMMdd_HHmmss")}.pdf",
            Convert.ToBase64String(pdfBytes));
    }
}

Test the PdfGenerator module

Start both the Blazor and the HttpApi.Host project to run the application and test out the PdfGenerator module you just created.

Get the source code on GitHub.

Enjoy and have fun!

A step-by-step tutorial on how to set up Continuous Deployment of an ABP Framework application.

Continuous Deployment to Azure with Azure DevOps

Continuous deployment is a software engineering approach in which software functionalities are delivered frequently and through automated deployments. (Wikipedia)

Source Code

The sample application has been developed with Blazor as UI framework and SQL Server as database provider. The same principles apply for other UI frameworks like Angular, MVC or databases like MongoDb, MySql, Progress, ...

Get the source code on GitHub.

ATTENTION: This tutorial is by no means production-ready and just serves as a guide to point you in the right direction.

Requirements

The following tools are needed to be able to run the solution.

• .NET 8.0 SDK
• VsCode, Visual Studio 2022 or another compatible IDE
• Microsoft Server SQL Management Studio
• ABP CLI version 8.0.0

Step-by-step

1. Create a new GitHub repository

2. Create a new ABP Framework application

3. Create an SQL Database in Azure

4. Set up the Build pipeline in AzureDevops

5. Create a Web App in the Azure Portal for the API

6. Create a Release pipeline to deploy the HttpApi.Host project

7. API Deployment succeeded. Web App not working. Fix the issues!

8. Create a Web App in the Azure Portal for the Blazor project

9. Add a stage in the Release pipeline to deploy the Blazor project

10. Blazor Deployment succeeded. Web App not working. Fix the issues!

Introduction

From version 6.0.0 the ABP Framework will start to use OpenIddict instead of IdentityServer. In this article I will show you how you can connect to an OpenIddict protected ABP Framework API from a .NET Core console Application.

The sample BookStore ABP Framework application in this article has been developed with Blazor as UI Framework and SQL Server as database provider.

The BookStoreConsole application is a regular .NET Core console application.

I tried to keep this article as simple as possible, as such, there is still some room for code improvement.

Source code

The source code of both projects is available on GitHub.

Requirements

The following tools are needed to be able to run the solution and follow along.

• .NET 8.0 SDK
• VsCode, Visual Studio 2022 or another compatible IDE
• ABP CLI 8.0.0

Create a new ABP Framework application

  abp new BookStore -u blazor -o BookStore

Implement the Web Application Development tutorial (part1-5)

To follow along make sure you have a protected BookAppService in the BookStore application. For this article I followed the Web Application Development tutorial till part 5: Authorization.

Add the section below in the appsettings.json file of the DbMigrator project

    "BookStore_Console": {
        "ClientId": "BookStore_Console",
        "ClientSecret": "1q2w3e*",
        "RootUrl": "https://localhost:<your-api-portnumber>"
    }

Add a BookStoreConsole client in the OpenIddictDataSeedContributor class of the Domain project

    // BookStoreConsole Client
    var bookStoreConsoleClientId = configurationSection["BookStore_Console:ClientId"];
    if (!bookStoreConsoleClientId.IsNullOrWhiteSpace())
    {
        var bookStoreConsoleRootUrl = configurationSection["BookStore_Console:RootUrl"]?.TrimEnd('/');
        await CreateApplicationAsync(
            name: bookStoreConsoleClientId,
            type: OpenIddictConstants.ClientTypes.Confidential,
            consentType: OpenIddictConstants.ConsentTypes.Implicit,
            displayName: "BookStore Console Application",
            scopes: commonScopes,
            grantTypes: new List<string>
            {
                OpenIddictConstants.GrantTypes.AuthorizationCode,
                OpenIddictConstants.GrantTypes.Password,
                OpenIddictConstants.GrantTypes.ClientCredentials,
                OpenIddictConstants.GrantTypes.RefreshToken
            },
            secret: configurationSection["BookStore_Console:ClientSecret"] ?? "1q2w3e*",
            redirectUri: $"{bookStoreConsoleRootUrl}/authentication/login-callback"
        );
    }

Run DbMigrator project

To apply the settings above you need to run the DbMigrator project. After, check the OpenIddictApplications table of the database to see if the BookStore_Console client has been added.

.NET Core console application

Create a new .NET Core console application

    dotnet new console -n BookStoreConsole

Install OidcClient nuget package (in terminal window or nuget package manager)

  dotnet add package IdentityModel.OidcClient --version 5.2.1

Add a HttpService class in the root of the project

When you want to consume a protected API the user has to be authenticated (username+password) and authorized(has the right permissions). So, when you call the BookAppService GetListAsync method, in the header of the request you need to send the accesstoken with.

To obtain the accesstoken you can make use of the nuget package IdentityModel.OidcClient. All the heavy lifting occurs in the GetTokensFromBookStoreApi method (See below). These method sends a request to the disco.TokenEndpoint of the BookStoreApi and obtains a TokenResponse. If the correct properties are sent and the API is running, you should obtain a TokenResponse (AccessToken, IdentityToken, Scope, ...)

Afterwards the obtained accesstoken is used in the SetBearerToken() of the httpClient.

When you make a request now to the protected BookStore API with the httpClient, the accesstoken is sent with. The BookStore API receives this request and checks the validity of the accesstoken and the permissions. If these conditions are met, the GetListAsync method of the BookAppService returns the list of books.

using IdentityModel.Client;

public class HttpService
{
    public async Task<Lazy<HttpClient>> GetHttpClientAsync(bool setBearerToken, string apiEndpoint)
    {
        var client = new Lazy<HttpClient>(() => new HttpClient());

        if (setBearerToken) client.Value.SetBearerToken(await GetAccessToken(apiEndpoint));

        client.Value.BaseAddress = new Uri(apiEndpoint);
        return await Task.FromResult(client);
    }
    private static async Task<TokenResponse> GetTokensFromBookStoreApi(string apiEndpoint)
    {
        var discoveryCache = new DiscoveryCache(apiEndpoint);
        var disco = await discoveryCache.GetAsync();
        var httpClient = new Lazy<HttpClient>(() => new HttpClient());
        var response = await httpClient.Value.RequestPasswordTokenAsync(new PasswordTokenRequest
        {
            Address = disco.TokenEndpoint, // apiEndpoint/connect/token
            ClientId = "BookStore_Console",
            ClientSecret = "1q2w3e*",
            UserName = "admin",
            Password = "1q2w3E*",
            Scope = "openid offline_access address email phone profile roles BookStore",
        });
        return response.IsError ? new TokenResponse() : response;
    }
    private static async Task<string> GetAccessToken(string apiEndpoint) => (await GetTokensFromBookStoreApi(apiEndpoint)).AccessToken;
}

Main Method

Below you see the content of the Program.cs file. A new HttpService gets created and the GetHttpClientAsync method is called to get a httpClient. Next, we make a request to the BookStore API to obtain the list of books.

Do not forget to change the apiEndpoint to the correct ABP Framework API endpoint (Swagger pager).

using System.Text.Json;
using static System.Console;

// if setBearerToken = false, should throw JsonReaderException: 'json cannot be serialized.'
// if setBearerToken = true, API should be called an list of books should be returned
const bool setBearerToken = false;
const string apiEndpoint = "https://localhost:44388/";

try
{
    var httpClient = await new HttpService().GetHttpClientAsync(setBearerToken, apiEndpoint);

    var response = await httpClient.Value.GetAsync($"{apiEndpoint}api/app/book");
    response.EnsureSuccessStatusCode();

    var json = await response.Content.ReadAsStringAsync();

    ListResultDto<BookDto>? books = new();


    books = JsonSerializer.Deserialize<ListResultDto<BookDto>>(json);
    WriteLine("====================================");
    if (books?.Items != null)
        foreach (var book in books.Items)
            WriteLine(book.Name);

}
catch (HttpRequestException)
{
    WriteLine("Is apiEndpoint correct?");
}
catch (JsonException)
{
    WriteLine("setBearerToken to true");
}
WriteLine("====================================");

Run API and .NET Core console application

Run the BookStore.HttpApi.Host of the ABP Framework application first. Start the .NET Core console application next. Below is the result when the accesstoken is successfully set.

If you set the variable setBearerToken to false, you will obtain a response from the API that cannot be deserialized and a JsonReaderException will be thrown.

Congratulations, you can now consume an OpenIddict protected ABP Framework API from a .NET Core console application!

Check out the source code of this article on GitHub.

Enjoy and have fun!

Introduction

Today, I wanted to know if the content of a table in the database had changed or not. I ended up with creating a ComputeHash method that returns a different hash when the content of a table in the database has changed.

After I created this method, I asked myself, how can I expose this method to my other Repository classes? This is the solution that I came up with.

Keep in mind that, the code in this article is by no means production-ready, as I wanted to keep the example simple to understand. And the ComputeHash method has also room for improvement.

Source Code

The source code of the completed application is available on GitHub.

Requirements

The following tools are needed to run the solution.

• .NET 8.0 SDK
• Vscode, Visual Studio 2022, or another compatible IDE.
• ABP CLI Version 8.0.0

Development

Create a new ABP Framework Application

• Install or update the ABP CLI

dotnet tool install -g Volo.Abp.Cli || dotnet tool update -g Volo.Abp.Cli

• Use the following ABP CLI command to create a new Blazor ABP application:

abp new BookStore -u blazor -o BookStore

Open & Run the Application

• Open the solution in Visual Studio (or your favorite IDE).
• Run the BookStore.DbMigrator application to apply the migrations and seed the initial data.
• Run the BookStore.HttpApi.Host application to start the server-side.

To follow along, you will need to have the first part of the BookStore tutorial ready.

Create a BaseEfCoreRepository class

Create a folder BaseEfCoreRepo in the EntityFrameworkCore project and add a class BaseEfCoreRepository.cs. As you can see below, the class inherits from EfCoreRepository and is made abstract. The ComputeHash method calculates a Hash for a given list of string input.

You also need to implement the DeleteAsync, the DeleteManyAsync, the FindAsync and the GetAsync methods.

using System.Collections.Generic;
using System.Linq;
using System.Security.Cryptography;
using System.Text;
using System.Threading;
using System.Threading.Tasks;
using BookStore.EntityFrameworkCore;
using Microsoft.EntityFrameworkCore;
using Volo.Abp.Domain.Entities;
using Volo.Abp.Domain.Repositories;
using Volo.Abp.Domain.Repositories.EntityFrameworkCore;
using Volo.Abp.EntityFrameworkCore;
using static System.String;
using static System.Text.Encoding;

namespace BookStore.BaseEfCoreRepo
{
    public abstract class BaseEfCoreRepository<TEntity, TKey>(IDbContextProvider<BookStoreDbContext> dbContextProvider)
        : EfCoreRepository<BookStoreDbContext, TEntity>(dbContextProvider),
            IBasicRepository<TEntity, TKey>
        where TEntity : class, IEntity<TKey>
    {
        protected string ComputeHash(IEnumerable<string> strings)
        {
            var items = strings.ToList();
            if (items.Count == 0)
            {
                return Empty;
            }

            using var sha1 = SHA1.Create();
            var bytes = sha1.ComputeHash(UTF8.GetBytes(Concat(items)));
            var builder = new StringBuilder(bytes.Length * 2);
            foreach (var b in bytes) // can be "x2" if you want lowercase
            {
                builder.Append(b.ToString("X2"));
            }

            return builder.ToString();
        }

        public async Task DeleteAsync(TKey id, bool autoSave = false, CancellationToken cancellationToken = default)
            => await base.DeleteAsync(x => x.Id.Equals(id), autoSave, cancellationToken);

        public async Task DeleteManyAsync(IEnumerable<TKey> ids, bool autoSave = false,
            CancellationToken cancellationToken = default)
        {
            var entities = await (await GetDbSetAsync()).Where(x => ids.Contains(x.Id)).ToListAsync(cancellationToken);
            await base.DeleteManyAsync(entities, autoSave, cancellationToken);
        }

        public async Task<TEntity?> FindAsync(TKey id, bool includeDetails = true,
            CancellationToken cancellationToken = default)
            => await base.FindAsync(x => x.Id.Equals(id), includeDetails, cancellationToken);

        public async Task<TEntity> GetAsync(TKey id, bool includeDetails = true,
            CancellationToken cancellationToken = default)
            => await base.GetAsync(x => x.Id.Equals(id), includeDetails, cancellationToken);
    }
}

Interface IHaveGetHashAsyncRepository.cs

Create a folder Interfaces in the Domain project and add the interface IHaveGetHashAsyncRepository.cs

Every Repository that implements the IHaveGetHashAsyncRepository interface will need to implement the GetHashAsync method

using System;
using System.Threading.Tasks;
using Volo.Abp.Domain.Entities;
using Volo.Abp.Domain.Repositories;

namespace BookStore.Interfaces
{
    namespace BookStore.Domain.Interfaces
    {
        public interface IHaveGetHashAsyncRepository<TEntity, TKey> : IRepository<TEntity, TKey>
            where TEntity : class, IEntity<TKey>
        {
            Task<string> GetHashAsync(Guid? tenantId);
        }
    }
}

IBookRepository in the Domain project

Create an IBookRepository interface in the Books folder of the Domain project that implements the IHaveGetHashAsyncRepository interface

using System;
using BookStore.Interfaces.BookStore.Domain.Interfaces;

namespace BookStore.Books
{
    public interface IBookRepository : IHaveGetHashAsyncRepository<Book, Guid>;
}

BookRepository in the EntityFrameworkCore project

Create a BookRepository class in the Books folder of the EntityFrameworkCore project. Let the BookRepository class inherit from the BaseEfCoreRepository class you created, and also implement the IBookRepository interface.

When you implement the IBookRepository interface you will need to have a GetHashAsync method in your BookRepository class. In method you can now call the ComputeHash method from the BaseEfCoreRepository class.

using System;
using System.Linq;
using System.Threading.Tasks;
using BookStore.BaseEfCoreRepo;
using BookStore.EntityFrameworkCore;
using Volo.Abp.EntityFrameworkCore;

namespace BookStore.Books
{
    public class BookRepository(IDbContextProvider<BookStoreDbContext> dbContextProvider)
        : BaseEfCoreRepository<Book, Guid>(dbContextProvider), IBookRepository
    {
        public async Task<string> GetHashAsync(Guid? tenantId)
        {
            using var disposable = CurrentTenant.Change(tenantId);
            return ComputeHash(
                (await GetDbContextAsync()).Books.Select(x => $"{x.Id}{x.Name}{x.Type}{x.PublishDate}{x.Price}"));
        }
    }
}

GetHashDto class and GetHashAsync interface method definition

Create a GetHasDto class in the Books folder of the Application.Contracts

using System;

namespace BookStore.Books
{
    public class GetHashDto
    {
        public Guid? TenantId { get; set; }
    }
}

In the IBookAppService interface add a GetHashAsync method definition to the

using System;
using System.Threading.Tasks;
using Volo.Abp.Application.Dtos;
using Volo.Abp.Application.Services;

namespace BookStore.Books
{
    public interface IBookAppService : ICrudAppService<BookDto, Guid, PagedAndSortedResultRequestDto, CreateUpdateBookDto>
    {        
         Task<string> GetHashAsync(GetHashDto input);
    }
}

BookAppService in the Application project

Update the content of BookAppService class in the Application project.

using System;
using System.Threading.Tasks;
using Volo.Abp.Application.Dtos;
using Volo.Abp.Application.Services;

namespace BookStore.Books
{
    public class BookAppService(IBookRepository repository)
        : CrudAppService<Book, BookDto, Guid, PagedAndSortedResultRequestDto, CreateUpdateBookDto>(repository),
            IBookAppService
    {
        public async Task<string> GetHashAsync(GetHashDto input) 
            => await repository.GetHashAsync(input.TenantId);
    }
}

I added the GetHashAsync method in the BookAppService only for testing purposes.

Testing

Start the BookStore.HttpApi.Host project to have the Swagger page launched. Navigate to the api/app/book/hash endpoint in the Swagger page.

Click first on the Try it out button and then on the Execute button.

The GetHashAsync method in the BookAppService will be hit and should return every time the same hash string when you have the same 2 books in the database.

If you delete one of them, the method will return another hash.

Get the source code on GitHub.

Enjoy and have fun!

In this article, I will show you how you can consume an ABP Framework application with a .NET Maui app.

The ABP Framework application has been developed with Blazor as UI framework and SQL Server as database provider.

Source Code

The source code of the ABP Framework and the .NET Maui application is available on GitHub.

Requirements

The following tools are needed to run the solution and follow along. You will also need to have Visual Studio 2022 Preview set up for .NET Maui development.

• .NET 6.0 SDK
• Visual Studio 2022 Preview
• Ngrok

Create ABP Framework application

• Install or update the ABP CLI:

dotnet tool install -g Volo.Abp.Cli || dotnet tool update -g Volo.Abp.Cli

• Use the following ABP CLI command to create a new Blazor ABP application:

abp new AbpMauiApi -u blazor -o AbpMauiApi

IdentityServer Settings

Add AbpMauiApi_Maui section in appsettings.json file of the AbpMauiApi.DbMigrator project

    // change the <replace-me-with-the-abp-api-port> with the port where the Swagger page is running on
    "AbpMauiApi_Maui": {
        "ClientId": "AbpMauiApi_Maui",
        "ClientSecret": "1q2w3e*",
        "RootUrl": "https://localhost:<replace-me-with-the-abp-api-port>/"
    }

Add Maui client IdentityServer configuration

In the CreateClientAsync method in class IdentityServerDataSeedContributor of the AbpMauiApi.Domain project.

    // Maui Client
    var MauiClientId = configurationSection["AbpMauiApi_Maui:ClientId"];
    if (!MauiClientId.IsNullOrWhiteSpace())
    {
        var MauiRootUrl = configurationSection["AbpMauiApi_Maui:RootUrl"].TrimEnd('/');
        await CreateClientAsync(
            name: MauiClientId,
            scopes: commonScopes,
            grantTypes: new[] { "authorization_code", "password" },
            secret: configurationSection["AbpMauiApi_Maui:ClientSecret"]?.Sha256(),
            requireClientSecret: false,
            redirectUri: "mauiclients:/authenticated",
            postLogoutRedirectUri: "mauiclients:/signout-callback-oidc",
            corsOrigins: new[] { MauiRootUrl.RemovePostFix("/") }
        );
    }

Apply Migrations and Run the Application

• Run the AbpMauiApi.DbMigrator application to apply the migrations and seed the initial data.
• Run the AbpMauiApi.HttpApi.Host application to start the API.

Ngrok to the rescue

When you are running the ABP Framework API on your local computer, the endpoints are reachable on https://localhost:<your-port-number>/api/<path>.

Although you can test out these endpoints on your local machine, it will fail in a .NET Maui application. A .NET Maui app considers localhost as its own localhost address (mobile device or emulator) and not that of your computer.

To overcome this problem you can make use of ngrok. With ngrok you can mirror your localhost address to a publicly available url.

Download and install ngrok

Go to the ngrok page, create an account, and download and install Ngrok.

Run the Ngrok command

Open a command prompt and enter the command below to start ngrok

 // change the <replace-me-with-the-abp-api-port> with the port where the Swagger page is running on
ngrok.exe http -region eu https://localhost:<replace-with-the-abp-api-port-number>/

After running this command, you will receive the following output: The API is now publicly available on https://f7db-2a02-810d-98c0-576c-647e-cd22-5b-e9a3.eu.ngrok.io

Copy the ngrok url

Copy the lower forwarding url as you will need it for use in the .NET MAUI app.

Create a .NET Maui app

Nuget packages

Open the Package Manager Console window and run the commands below:

    dotnet add package Refractored.MvvmHelpers --version 1.6.2
    dotnet add package System.IdentityModel.Tokens.Jwt --version 6.15.1 

MainPage.xaml

Replace the content of the MainPage.xaml with the content below:

<ContentPage
  xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  xmlns:local="clr-namespace:AbpMauiApp.ViewModels;assembly=AbpMauiApp"
  x:Class="AbpMauiApp.MainPage"
  BackgroundColor="{DynamicResource SecondaryColor}">

    <ContentPage.BindingContext>
        <local:MainViewModel />
    </ContentPage.BindingContext>

    <StackLayout Padding="10">
        <Label HorizontalOptions="Center"  Margin="5,15,5,15" Text="Hi, ABP Framework! Nice to meet you!" TextColor="#7b5fdf"  FontSize="18"
            FontAttributes="Bold"/>
        <Image Grid.Row="4"
                Source="dotnet_bot.png"
                SemanticProperties.Description="Cute dot net bot waving hi to you!"
                WidthRequest="250"
                HeightRequest="310"
                HorizontalOptions="Center" />

        <Entry Text="{Binding LoginUserName}" Placeholder="Enter user name..." />
        <Entry Text="{Binding LoginPassword}"  IsPassword="true" Placeholder="Enter password..." />
        <Button Text="Login"  FontAttributes="Bold" Command="{Binding LoginUserCommand}" HorizontalOptions="FillAndExpand" />
        <Label Margin="20" HorizontalOptions="Center"  Text="{Binding LoginUserMessage}" TextColor="Green"  FontSize="18"
            FontAttributes="Bold"/>
    </StackLayout>

</ContentPage>

MainViewModel.cs

Add a MainViewModel class in a ViewModels folder.

using AbpMauiApp.Services;
using MvvmHelpers;
using MvvmHelpers.Commands;
using System.Windows.Input;

namespace AbpMauiApp.ViewModels
{
    public class MainViewModel : BaseViewModel
    {
        private string _loginUserMessage, _loginUserName, _loginPassword;
        private AsyncCommand _loginUserCommand;

        public ICommand LoginUserCommand => _loginUserCommand ??=new AsyncCommand(LoginUserAsync);

        private async Task LoginUserAsync() 
            => LoginUserMessage= await new IdentityService().LoginAsync(LoginUserName, LoginPassword);

        public string LoginUserMessage
        {
            get => _loginUserMessage;
            set => SetProperty(ref _loginUserMessage, value);
        }

        public string LoginUserName
        {
            get => _loginUserName;
            set => SetProperty(ref _loginUserName, value);
        }

        public string LoginPassword
        {
            get => _loginPassword;
            set => SetProperty(ref _loginPassword, value);
        }
    }
}

IdentityService.cs

Add an IdentityService class to a Services folder

using System.Text;
using System.Text.Json;

namespace AbpMauiApp.Services
{
    public class IdentityService
    {
        public async Task<string> LoginAsync(string userName, string password)
        {
            string clientId = "AbpMauiApi_Maui";
            string clientSecret = "1q2w3e*";
            string scope = "email openid profile role phone address AbpMauiApi"; ;
            string ngrokUrl = "<replace-me-with-the-ngrok-url>";

            var data = $"grant_type=password&username={userName}&password={password}&client_id={clientId}&client_secret={clientSecret}&scope={scope}";

            var content = new StringContent(data, Encoding.UTF8, "application/x-www-form-urlencoded");

            var httpClient = new HttpClient(GetHttpClientHandler());
            var response = await httpClient.PostAsync($"{ngrokUrl}/connect/token", content);
            response.EnsureSuccessStatusCode();

            var stringResult = await response.Content.ReadAsStringAsync();
            var loginResult = JsonSerializer.Deserialize<IdentityDto>(stringResult, Options);

            if (string.IsNullOrWhiteSpace(loginResult.access_token)) return "UnAuthorized";
            return "AccessToken received!";
            
        }

        private HttpClientHandler GetHttpClientHandler()
        {
            // EXCEPTION: Javax.Net.Ssl.SSLHandshakeException: 'java.security.cert.CertPathValidatorException:
            // Trust anchor for certification path not found.'
            // SOLUTION: 
            // ATTENTION: DO NOT USE IN PRODUCTION 

            var httpClientHandler = new HttpClientHandler
            {
                ServerCertificateCustomValidationCallback = (message, cert, chain, errors) => { return true; }
            };

            return httpClientHandler;
        }

        private JsonSerializerOptions Options => new()
        {
            WriteIndented = true,
            PropertyNameCaseInsensitive = true 
        };

    }

    public class IdentityDto
    {
        public string access_token { get; set; }
        public int expires_in { get; set; }
        public string token_type { get; set; }
        public string scope { get; set; }
        public string error { get; set; }
        public string error_description { get; set; }
    }

}

Test the result

Run the HttpApi.Host project and make sure Ngrok is running too. Start the .NET Maui app, enter the credentials (user name: admin - password: 1q2w3E*) and click the Login button.

Et voilà! As you can see, you received an access token from the ABP Framework API. Now you can start consuming the API!

Get the source code on GitHub.

Enjoy and have fun!

Introduction

In this article, I will show you a way to import users from an external system into the AbpUsers table of an ABP Framework application. Watch out, the code in this article is not production-ready, as I wanted to keep the example simple to understand.

The sample application has been developed with Blazor as UI framework and SQL Server as database provider.

Source Code

The source code of the completed application is available on GitHub.

Requirements

The following tools are needed to run the solution.

• .NET 8.0 SDK
• Vscode, Visual Studio 2022, or another compatible IDE.
• ABP Cli 8.0.0

Development

Create a new ABP Framework Application

• Install or update the ABP CLI:

dotnet tool install -g Volo.Abp.Cli || dotnet tool update -g Volo.Abp.Cli

• Use the following ABP CLI command to create a new Blazor ABP application:

abp new AbpUserImport -u blazor -o AbpUserImport

Open & Run the Application

• Open the solution in Visual Studio (or your favorite IDE).
• Run the AbpUserImport.DbMigrator application to apply the migrations and seed the initial data.
• Run the AbpUserImport.HttpApi.Host application to start the API.

Add an extra ImportUserId property to the IdentityUser

Open the file AbpUserImportEfCoreEntityExtensionMappings.cs in folder EntityFrameworkCore of the EntityFrameworkCore project and update its content.

using System;
using Volo.Abp.Identity;
using Volo.Abp.ObjectExtending;
using Volo.Abp.Threading;

namespace AbpUserImport.EntityFrameworkCore;

public static class AbpUserImportEfCoreEntityExtensionMappings
{
    private static readonly OneTimeRunner OneTimeRunner = new OneTimeRunner();

    public static void Configure()
    {
        AbpUserImportGlobalFeatureConfigurator.Configure();
        AbpUserImportModuleExtensionConfigurator.Configure();

        OneTimeRunner.Run(() =>
        {
            // Other code here ...
            // This piece of code adds an extra ImportUserId property to the IdentityUser class
            ObjectExtensionManager.Instance
            .MapEfCoreProperty<IdentityUser, Guid?>(
                "ImportUserId",
                (_, propertyBuilder) =>
                {
                    propertyBuilder.HasMaxLength(36);
                }
            );
        });
    }
}

Run DbMigrator project to apply Migrations

In the previous step, we changed our Model, so we need to tell it to EntityFrameworkCore. Open a command prompt in the EntityFrameworkCore project and enter the command below:

dotnet ef migrations add ImportUserIdAdded

When this command has succeeded, run the DbMigrator project to apply the Database Migrations.

IImportUserAppService in Application.Contracts project

Create an ImportUsers folder in the Application.Contracts project and add an IImportUserAppService.cs interface file. The IImportUserAppService has 1 Method Definition that takes a CreateImportUserDto. See below.

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Threading.Tasks;

namespace AbpUserImport.ImportUsers
{
    public interface IImportUserAppService
    {
        Task CreateManyAsync(CreateImportUserDto input);
    }

    public class CreateImportUserDto
    {
        public List<ImportUserDto> Items { get; set; } = [];
        public Guid? TenantId { get; set; }
    }

    public class ImportUserDto
    {
        [Required, DataType(DataType.EmailAddress)] public string Email { get; set; } = "";
        [Required] public string Password { get; set; } = "";
        public Guid ImportUserId { get; set; }
    }
}

ImportUserAppService in the Application project

Create an ImportUsers folder in the Application project and add an ImportUserAppService.cs class file and paste it into the code below.

In the CreateManyAsync method, we first call the SetIdentityOptions method to set the different options for User and Password. Then we loop over every user and call the InsertImportUserInDatabaseAsync. In this method, a new IdentityUser is instantiated and the ImportUserId is set afterward. Finally, the user is created by calling the CreateAsync method of the IdentityUserManager.

using System;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Identity;
using Volo.Abp.Data;
using Volo.Abp.Guids;
using Volo.Abp.Identity;

namespace AbpUserImport.ImportUsers
{
    public class ImportUserAppService(IGuidGenerator guidGenerator, IdentityUserManager identityUserManager)
        : AbpUserImportAppService, IImportUserAppService
    {
        public async Task CreateManyAsync(CreateImportUserDto input)
        {
            using (CurrentTenant.Change(input.TenantId))
            {
                SetIdentityOptions();
                foreach (var item in input.Items)
                {
                    await InsertImportUserInDatabaseAsync(item, input.TenantId);
                }
            }
        }

        // You will probably need to adapt this method to your needs
        private void SetIdentityOptions()
        {
            identityUserManager.Options.User.RequireUniqueEmail = true;
            identityUserManager.Options.User.AllowedUserNameCharacters = $"{identityUserManager.Options.User.AllowedUserNameCharacters}"; // add special characters here!
            identityUserManager.Options.Password.RequireDigit = false;
            identityUserManager.Options.Password.RequireUppercase = false;
            identityUserManager.Options.Password.RequireNonAlphanumeric = false;
            identityUserManager.Options.Password.RequireLowercase = false;
            identityUserManager.Options.Password.RequiredLength = 1;
        }

        private async Task InsertImportUserInDatabaseAsync(ImportUserDto user, Guid? tenantId)
        {
            var identityUser = new IdentityUser(guidGenerator.Create(), user.Email, user.Email, tenantId);
            identityUser.SetProperty("ImportUserId", user.ImportUserId.ToString());
            var createdUser = await identityUserManager.CreateAsync(identityUser, user.Password, true);
            createdUser.CheckErrors();
        }
    }
}

Testing

Start the AbpUserImport.HttpApi.Host project to have the Swagger page launched. Navigate to the ImportUser endpoint in the Swagger page.

Click first on the Try it out button and then on the Execute button. The CreateManyAsync method in the ImportUserAppService will be hit and 1 user will be added to the AbpUsers table in the database.

Et voilà! You can now import users from an external system into the AbpUsers table of the ABP Framework.

Get the source code on GitHub.

Enjoy and have fun!

Introduction

In this article, I will show you how to filter a paged list (Blazorise DataGrid component) in an ABP Framework application with a Blazor user interface.

The sample application has been developed with Blazor as UI framework and SQL Server as database provider.

Source Code

The source code of the completed application is available on GitHub.

Requirements

The following tools are needed to run the solution.

• .NET 8.0 SDK
• vscode, Visual Studio 2022, or another compatible IDE.
• ABP Cli 8.0.0

Development

Create a new ABP Framework Application

• Install or update the ABP CLI:

dotnet tool install -g Volo.Abp.Cli || dotnet tool update -g Volo.Abp.Cli

• Use the following ABP CLI command to create a new Blazor ABP application:

abp new AbpFilter -u blazor -o AbpFilter

Open & Run the Application

• Run the AbpFilter.DbMigrator application to apply the migrations and seed the initial data.
• Run the AbpFilter.HttpApi.Host application to start the server-side.
• Run the AbpFilter.Blazor application to start the Blazor UI project.

BookStore

To have a simple BookStore application to test with, add the code from the BookStore Tutorial (Part1-2).

Domain layer

BookFilter class

Add a BookFilter class to the Books folder of the Domain project

// ReSharper disable UnusedAutoPropertyAccessor.Global
namespace AbpFilter.Books
{
    public class BookFilter
    {
        public string? Id { get; set; }
        public string? Name { get; set; }
        public string? PublishDate { get; set; }
        public string? Price { get; set; }
    }
}

IBookRepository interface

Add an IBookRepository interface to the Books folder of the Domain project.

using System;
using System.Collections.Generic;
using System.Threading.Tasks;
using AbpFilter.Domain.Books;
using Volo.Abp.Domain.Repositories;

namespace AbpFilter.Books
{
    public interface IBookRepository : IRepository<Book, Guid>
    {
        Task<List<Book>> GetListAsync(int skipCount, int maxResultCount, string sorting = "Name", BookFilter? filter = null);
        Task<int> GetTotalCountAsync(BookFilter filter);
    }
}

Database layer

BookRepository class

Add a BookRepository class to the Books folder of the EntityFrameworkCore project.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Linq.Dynamic.Core;
using System.Threading.Tasks;
using AbpFilter.Domain.Books;
using AbpFilter.EntityFrameworkCore;
using Microsoft.EntityFrameworkCore;
using Volo.Abp.Domain.Repositories.EntityFrameworkCore;
using Volo.Abp.EntityFrameworkCore;

namespace AbpFilter.Books
{
    public class BookRepository(IDbContextProvider<AbpFilterDbContext> dbContextProvider)
        : EfCoreRepository<AbpFilterDbContext, Book, Guid>(dbContextProvider), IBookRepository
    {
        public async Task<List<Book>> GetListAsync(int skipCount, int maxResultCount, string sorting = "Name", BookFilter filter = null)
        {
            var dbSet = await GetDbSetAsync();
            var books = await dbSet
                .WhereIf(!filter.Id.IsNullOrWhiteSpace(), x => x.Id.ToString().Contains(filter.Id))
                .WhereIf(!filter.Name.IsNullOrWhiteSpace(), x => x.Name.Contains(filter.Name))
                .WhereIf(!filter.Price.IsNullOrWhiteSpace(), x => x.Price.ToString().Contains(filter.Price))
                .WhereIf(!filter.PublishDate.IsNullOrWhiteSpace(), x => x.PublishDate.ToString().Contains(filter.PublishDate))
                .OrderBy(sorting)
                .Skip(skipCount)
                .Take(maxResultCount)
                .ToListAsync();
            return books;
        }

        public async Task<int> GetTotalCountAsync(BookFilter filter)
        {
            var dbSet = await GetDbSetAsync();
            var books = await dbSet
                .WhereIf(!filter.Id.IsNullOrWhiteSpace(), x => x.Id.ToString().Contains(filter.Id))
                .WhereIf(!filter.Name.IsNullOrWhiteSpace(), x => x.Name.Contains(filter.Name))
                .WhereIf(!filter.Price.IsNullOrWhiteSpace(), x => x.Price.ToString().Contains(filter.Price))
                .WhereIf(!filter.PublishDate.IsNullOrWhiteSpace(), x => x.PublishDate.ToString().Contains(filter.PublishDate))
                .ToListAsync();
            return books.Count;
        }
    }
}

Application layer

BookPagedAndSortedResultRequestDto class

Add a BookPagedAndSortedResultRequestDto class to the Books folder of the Application.Contracts project. This class inherits the PagedAndSortedResultRequestDto class.

using Volo.Abp.Application.Dtos;

namespace AbpFilter.Books
{
    public class BookPagedAndSortedResultRequestDto : PagedAndSortedResultRequestDto
    {
        public string? Id { get; set; } = "";
        public string? Name { get; set; } = "";
        public string? PublishDate { get; set; } = "";
        public string? Price { get; set; } = "";
    }
}

IBookAppService interface

Update the IBookAppService interface in the Books folder of the Application.Contracts project.

using System;
using Volo.Abp.Application.Services;

namespace AbpFilter.Books
{
    public interface IBookAppService : ICrudAppService<BookDto, Guid, BookPagedAndSortedResultRequestDto, CreateUpdateBookDto>;
}

BookAutoMapperProfile class

Add a BookAutoMapperProfile class to the Books folder of the Application project.

using AbpFilter.Application.Contracts.Books;
using AbpFilter.Domain.Books;
using AutoMapper;

namespace AbpFilter.Application.Books
{
    public class BookAutoMapperProfile : Profile
    {
        public BookAutoMapperProfile()
        {
            CreateMap<BookPagedAndSortedResultRequestDto, BookFilter>();
        }
    }
}

BookAppService class

Override the GetListAsync method of the BookAppService class in the Books folder of the Application project, as in the code below:

using System;
using System.Collections.Generic;
using System.Threading.Tasks;
using AbpFilter.Domain.Books;
using Volo.Abp.Application.Dtos;
using Volo.Abp.Application.Services;

namespace AbpFilter.Books
{
    public class BookAppService(IBookRepository bookRepository)
        : CrudAppService<Book, BookDto, Guid, BookPagedAndSortedResultRequestDto, CreateUpdateBookDto>(bookRepository),
            IBookAppService
    {
        public override async Task<PagedResultDto<BookDto>> GetListAsync(BookPagedAndSortedResultRequestDto input)
        {
            var filter = ObjectMapper.Map<BookPagedAndSortedResultRequestDto, BookFilter>(input);

            var sorting = (string.IsNullOrEmpty(input.Sorting) ? "Name DESC" : input.Sorting).Replace("ShortName", "Name");

            var books = await bookRepository.GetListAsync(input.SkipCount, input.MaxResultCount, sorting, filter);
            var totalCount = await bookRepository.GetTotalCountAsync(filter);

            return new PagedResultDto<BookDto>(totalCount,ObjectMapper.Map<List<Book>, List<BookDto>>(books));
        }
    }
}

Books.razor page

Override the DataGrid component of the Books.razor page in the Blazor project and Make sure you add the Filterable attribute and set it to true

@page "/books"
@using AbpFilter.Books
@inherits AbpCrudPageBase<AbpFilter.Books.IBookAppService, AbpFilter.Books.BookDto, Guid, AbpFilter.Books.BookPagedAndSortedResultRequestDto, AbpFilter.Books.CreateUpdateBookDto>

<Card>
  <CardBody>
    <DataGrid TItem="BookDto" Filterable="true" Data="Entities" ReadData="OnDataGridReadAsync" TotalItems="TotalCount" ShowPager="true" PageSize="PageSize">
      <DataGridColumns>
        <DataGridColumn TItem="BookDto" Field="@nameof(BookDto.Id)" Caption="Id"></DataGridColumn>
        <DataGridColumn TItem="BookDto" Field="@nameof(BookDto.Name)" Caption="Name"></DataGridColumn>
        <DataGridColumn TItem="BookDto" Field="@nameof(BookDto.PublishDate)" Caption="Publish date"></DataGridColumn>
        <DataGridColumn TItem="BookDto" Field="@nameof(BookDto.Price)" Caption="Price"></DataGridColumn>
      </DataGridColumns>
    </DataGrid>
  </CardBody>
</Card>

Books.razor.cs class

Override the UpdateGetListInputAsync and OnDataGridReadAsync methods as you can see below:

using System.Linq;
using System.Threading.Tasks;
using AbpFilter.Books;
using Blazorise.DataGrid;
using Volo.Abp.Application.Dtos;
using static System.String;

namespace AbpFilter.Blazor.Pages
{
    public partial class Books
    {
        protected override Task UpdateGetListInputAsync()
        {
            if (GetListInput is ISortedResultRequest sortedResultRequestInput)
            {
                sortedResultRequestInput.Sorting = CurrentSorting;
            }

            if (GetListInput is IPagedResultRequest pagedResultRequestInput)
            {
                pagedResultRequestInput.SkipCount = (CurrentPage - 1) * PageSize;
            }

            if (GetListInput is ILimitedResultRequest limitedResultRequestInput)
            {
                limitedResultRequestInput.MaxResultCount = PageSize;

            }
            return Task.CompletedTask;
        }

        protected override Task OnDataGridReadAsync(DataGridReadDataEventArgs<BookDto> e)
        {
            var id = e.Columns.FirstOrDefault(c => c.SearchValue != null && c.Field == "Id");
            GetListInput.Id = id != null && !IsNullOrEmpty(id.SearchValue.ToString()) ? id.SearchValue.ToString(): Empty;
            
            var name = e.Columns.FirstOrDefault(c => c.SearchValue != null && c.Field == "Name");
            GetListInput.Name = name != null && !IsNullOrEmpty(name.SearchValue.ToString()) ? name.SearchValue.ToString() : Empty;

            var publishDate = e.Columns.FirstOrDefault(c => c.SearchValue != null && c.Field == "PublishDate");
            GetListInput.PublishDate = publishDate != null && !IsNullOrEmpty(publishDate.SearchValue.ToString()) ? publishDate.SearchValue.ToString() : Empty;
            
            var price = e.Columns.FirstOrDefault(c => c.SearchValue != null && c.Field == "Price");
            GetListInput.Price =  price != null && !IsNullOrEmpty(price.SearchValue.ToString()) ? price.SearchValue.ToString() :Empty;

            return base.OnDataGridReadAsync(e);
        }
    }
}

Test the result

Start both the Blazor and the HttpApi.Host project to run the application

Et voilà! You can now filter a standard paged list (Blazorise DataGrid component) in the ABP Framework.

Get the source code on GitHub.

Enjoy and have fun!

Introduction

In this step-by-step guide I will explain how you can hide the tenant switch on the login page of an ABP Framework application. After implementing all the steps below a user should be able to login with email address and password without losing multitenancy.

Source Code

The sample application has been developed with Blazor as UI framework and SQL Server as database provider.

The source code of the completed application is available on GitHub.

Requirements

The following tools are needed to run the solution.

• .NET 8.0 SDK
• VsCode, Visual Studio 2022 or another compatible IDE
• ABP CLI 8.0.0 or higher

Development

Create a new ABP Framework Application

• Install or update the ABP CLI:

dotnet tool install -g Volo.Abp.Cli || dotnet tool update -g Volo.Abp.Cli

• Use the following ABP CLI command to create a new Blazor ABP application:

abp new AbpHideTenantSwitch -u blazor -o AbpHideTenantSwitch

Open & Run the Application

• Open the solution in Visual Studio (or your favorite IDE).
• Run the AbpHideTenantSwitch.DbMigrator application to apply the migrations and seed the initial data.
• Run the AbpHideTenantSwitch.HttpApi.Host application to start the server side.
• Run the AbpHideTenantSwitch.Blazor application to start the Blazor UI project.

Open HttpApi.Host.csproj and comment out the line below

<!-- <PackageReference Include="Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonXLite" Version="3.0.*-*" /> -->

Add Volo.BasicTheme module to the project

• Open a command prompt in the root of the project and run the command abp add-module

    abp add-module Volo.BasicTheme --with-source-code --add-to-solution-file

Build Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic project

Open a command prompt in the Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic project and run command below:

    dotnet build

Add reference to Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic

Open a command prompt in the HttpApi.Host project and add a reference to Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic in the HttpApi.Host.csproj file by running command below

   dotnet add reference ../../modules/Volo.BasicTheme/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.csproj

Replace AbpAspNetCoreMvcUiLeptonXLiteThemeModule

Replace typeof(AbpAspNetCoreMvcUiLeptonXLiteThemeModule), with typeof(AbpAspNetCoreMvcUiBasicThemeModule) in the DependsOn section of the HttpApiHostModule.cs file in the HttpApi.Host project

Hide Tenant Switch in Account.cshtml file

Goto the Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic\Themes\Basic\Themes\Basic\Layouts\Account.cshtml file in the BasicTheme module

Comment out if statement below to hide Tenant Switch.

@* @if (MultiTenancyOptions.Value.IsEnabled &&
(TenantResolveResultAccessor.Result?.AppliedResolvers?.Contains(CookieTenantResolveContributor.ContributorName) == true ||
TenantResolveResultAccessor.Result?.AppliedResolvers?.Contains(QueryStringTenantResolveContributor.ContributorName) == true))
{
<div class="card shadow-sm rounded mb-3">
    <div class="card-body px-5">
        <div class="row">
            <div class="col">
                <span style="font-size: .8em;" class="text-uppercase text-muted">@MultiTenancyStringLocalizer["Tenant"]</span><br />
                <h6 class="m-0 d-inline-block">
                    @if (CurrentTenant.Id == null)
                    {
                    <span>
                                                @MultiTenancyStringLocalizer["NotSelected"]
                                            </span>
                    }
                    else
                    {
                    <strong>@(CurrentTenant.Name ?? CurrentTenant.Id.Value.ToString())</strong>
                    }
                </h6>
            </div>
            <div class="col-auto">
                <a id="AbpTenantSwitchLink" href="javascript:;" class="btn btn-sm mt-3 btn-outline-primary">@MultiTenancyStringLocalizer["Switch"]</a>
            </div>
        </div>
    </div>
</div>
} *@

Add ConfigureTenantResolver() method in HttpApiHostModule of HttpApi.Host project

Add method ConfigureTenantResolver right under the ConfigureServices method in the HttpApiHostModule class of the HttpApi.Host project

// import using statements
// using Volo.Abp.MultiTenancy;

private void ConfigureTenantResolver(ServiceConfigurationContext context, IConfiguration configuration)
{
    Configure<AbpTenantResolveOptions>(options =>
    {
        options.TenantResolvers.Clear();
        options.TenantResolvers.Add(new CurrentUserTenantResolveContributor());
});
}

Call ConfigureTenantResolver() method from ConfigureServices() method

public override void ConfigureServices(ServiceConfigurationContext context)
{
    // other code here ...
    ConfigureTenantResolver(context, configuration);
}

Add a Pages/Account folder to HttpApi.Host project

Add a CustomLoginModel.cs class to the Account folder

using System.Threading.Tasks;
using Microsoft.AspNetCore.Authentication;
using Microsoft.AspNetCore.Identity;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Options;
using Volo.Abp.Account.Web;
using Volo.Abp.Account.Web.Pages.Account;
using Volo.Abp.Identity;
using Volo.Abp.TenantManagement;
using IdentityUser = Volo.Abp.Identity.IdentityUser;

namespace AbpHideTenantSwitch.HttpApi.Host.Pages.Account
{
    public class CustomLoginModel : LoginModel
    {
        private readonly ITenantRepository _tenantRepository;

        public CustomLoginModel(IAuthenticationSchemeProvider schemeProvider, IOptions<AbpAccountOptions> accountOptions, IOptions<IdentityOptions> identityOptions, ITenantRepository tenantRepository, IdentityDynamicClaimsPrincipalContributorCache contributorCache)
        : base(schemeProvider, accountOptions, identityOptions, contributorCache)
        {
            _tenantRepository = tenantRepository;
        }

        public override async Task<IActionResult> OnPostAsync(string action)
        {
            var user = await FindUserAsync(LoginInput.UserNameOrEmailAddress);
            using (CurrentTenant.Change(user?.TenantId))
            {
                return await base.OnPostAsync(action);
            }
        }

        protected virtual async Task<IdentityUser> FindUserAsync(string uniqueUserNameOrEmailAddress)
        {
            IdentityUser user = null;
            using (CurrentTenant.Change(null))
            {
                user = await UserManager.FindByNameAsync(LoginInput.UserNameOrEmailAddress) ??
                       await UserManager.FindByEmailAsync(LoginInput.UserNameOrEmailAddress);

                if (user != null)
                {
                    return user;
                }
            }

            foreach (var tenant in await _tenantRepository.GetListAsync())
            {
                using (CurrentTenant.Change(tenant.Id))
                {
                    user = await UserManager.FindByNameAsync(LoginInput.UserNameOrEmailAddress) ??
                           await UserManager.FindByEmailAsync(LoginInput.UserNameOrEmailAddress);

                    if (user != null)
                    {
                        return user;
                    }
                }
            }
            return null;
        }
    }
}

Add a Login.cshtml file to the Account folder

@page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers 
@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI 
@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bootstrap
@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bundling 
@using Microsoft.AspNetCore.Mvc.Localization 
@using Volo.Abp.Account.Localization
@using Volo.Abp.Account.Settings 
@using Volo.Abp.Settings 
@model AbpHideTenantSwitch.HttpApi.Host.Pages.Account.CustomLoginModel 
@inject IHtmlLocalizer<AccountResource> L
@inject Volo.Abp.Settings.ISettingProvider SettingProvider

    <div class="card text-center mt-3 shadow-sm rounded">
        <div class="card-body abp-background p-5">
            <div class="form-group">
                <img
                    src="https://raw.githubusercontent.com/bartvanhoey/AbpHideTenantSwitch/main/src/AbpHideTenantSwitch.HttpApi.Host/wwwroot/images/thumbs-up.png"
                    alt="ThumbsUp"
                    width="100%"
                />
            </div>
            @if (Model.EnableLocalLogin) {
            <form method="post" class="mt-4 text-left">
                <input asp-for="ReturnUrl" />
                <input asp-for="ReturnUrlHash" />
                <div class="form-group">
                    <label>Email address</label>
                    <input
                        asp-for="LoginInput.UserNameOrEmailAddress"
                        class="form-control"
                    />
                    <span
                        asp-validation-for="LoginInput.UserNameOrEmailAddress"
                        class="text-danger"
                    ></span>
                </div>
                <div class="form-group">
                    <label asp-for="LoginInput.Password"></label>
                    <input asp-for="LoginInput.Password" class="form-control" />
                    <span
                        asp-validation-for="LoginInput.Password"
                        class="text-danger"
                    ></span>
                </div>
                <abp-button
                    type="submit"
                    button-type="Danger"
                    name="Action"
                    value="Login"
                    class="btn-block btn-lg mt-3"
                    >@L["Login"]</abp-button
                >
                @if (Model.ShowCancelButton) {
                <abp-button
                    type="submit"
                    button-type="Secondary"
                    formnovalidate="formnovalidate"
                    name="Action"
                    value="Cancel"
                    class="btn-block btn-lg mt-3"
                    >@L["Cancel"]</abp-button
                >
                }
            </form>
            }
        </div>
    </div>
>

Custom styles Login page

Add a custom-login-styles.css file to the wwwroot folder of the HttpApi.Host project

    .abp-background { background-color: yellow !important; }

Add custom styles to Bundle

Open file AbpHideTenantSwitchHttpApiHostModule.cs of the HttpApi.Host project and add custom-login-styles.css to bundle.

private void ConfigureBundles()
   {
     Configure<AbpBundlingOptions>(options =>
     {
       options.StyleBundles.Configure(
                 BasicThemeBundles.Styles.Global,
                 bundle =>
             {
               bundle.AddFiles("/global-styles.css");
               bundle.AddFiles("/custom-login-styles.css");
             }
             );
     });
   }

Add an Image

Add an assets/images folder to the wwwroot folder of the HttpApi.Host project and copy/paste an image into images folder.

Start both the Blazor and the HttpApi.Host project to run the application

Et voilà! The Login page without a Tenant switch!

A user can now login with email address and username without specifying the tenant name.

Get the source code on GitHub.

Enjoy and have fun!

Introduction

In this article I will show you how to connect to a protected ABP Framework API from a .NET Core console Application using the IdentityModel.OidcClient nuget package.

The sample BookStore ABP Framework application in this article has been developed with Blazor as UI Framework and SQL Server as database provider.

The BookStoreConsole application is a standard .NET Core console application.

As I tried to keep this article as simple as possible, you will see there is still some room for code improvements.

Source code

The source code of both projects is available on GitHub.

Requirements

The following tools are needed to be able to run the solution and follow along.

• .NET 6.0 SDK
• VsCode, Visual Studio 2019 Version 16.10.4+ or another compatible IDE

ABP Framework application

Create a new ABP Framework application

  abp new BookStore -u blazor -o BookStore

Implement the Web Application Development tutorial (part1-5)

To follow along make sure you have a protected BookAppService in the BookStore application. For this article I followed the Web Application Development tutorial till part 5: Authorization.

Add the section below in the appsettings.json file of the DbMigrator project

"BookStore_Console": {
    "ClientId": "BookStore_Console",
    "ClientSecret": "1q2w3e*",
    "RootUrl": "https://localhost:44368"
}

Add a BookStoreConsole client in the IdentityServerDataSeedContributor class of the Domain project

// BookStoreConsole Client
var bookStoreConsoleClientId = configurationSection["BookStore_Console:ClientId"];
if (!bookStoreConsoleClientId.IsNullOrWhiteSpace())
{
    var bookStoreConsoleRootUrl = configurationSection["BookStore_Console:RootUrl"].TrimEnd('/');
    await CreateClientAsync(
        name: bookStoreConsoleClientId,
        scopes: commonScopes,
        grantTypes: new[] { "password", "client_credentials""authorization_code" },
        secret: configurationSection["BookStore_Console:ClientSecret"]?.Sha256(),
        requireClientSecret: false,
        redirectUri: $"{bookStoreConsoleRootUrl}/authentication/login-callback",
    corsOrigins: new[] { bookStoreConsoleRootUrl.RemovePostFix("/") }
    );
}

Run DbMigrator project

To apply the settings above you need to run the DbMigrator project. After, you can check the IdentityServerClients table of the database to see if the BookStore_Console client has been added.

.NET Core console application

Create a new .NET Core console application

    dotnet new console -n BookStoreConsole

Install nuget packages (in terminal window or nuget package manager)

  dotnet add package IdentityModel.OidcClient --version 5.0.0-preview.1
  dotnet add package Newtonsoft.Json --version 13.0.1

Add a HttpService class in the root of the project

When you want to consume a protected API the user has to be authenticated (username+password) and authorized(has the right permissions). So, when you call the BookAppService GetListAsync method, in the header of the request you need to send the accesstoken with.

To obtain the accesstoken you can make use of the nuget package IdentityModel.OidcClient. All the heavy lifting occurs in the GetTokensFromBookStoreApi method (See below). These method sends a request to the disco.TokenEndpoint of the BookStoreApi and obtains a TokenResponse. If the correct properties are sent and the API is running, you should obtain a TokenResponse (AccessToken, IdentityToken, Scope, ...)

Afterwards the obtained accesstoken is used in the SetBearerToken() of the httpClient.

When you make a request now to the protected BookStore API with the httpClient, the accesstoken is sent with. The BookStore API receives this request and checks the validity of the accesstoken and the permissions. If these conditions are met, the GetListAsync method of the BookAppService returns the list of books.

public class HttpService
{
    public async Task<Lazy<HttpClient>> GetHttpClientAsync(bool setBearerToken)
    {
        var client = new Lazy<HttpClient>(() => new HttpClient());
        var accessToken = await GetAccessToken();
        if (setBearerToken)
        {
            client.Value.SetBearerToken(accessToken);
        }
        client.Value.BaseAddress = new Uri("https://localhost:44388/"); //
        return await Task.FromResult(client);
    }

    private static async Task<TokenResponse> GetTokensFromBookStoreApi()
    {
        var authority = "https://localhost:44388/";
        var discoveryCache = new DiscoveryCache(authority);
        var disco = await discoveryCache.GetAsync();
        var httpClient = new Lazy<HttpClient>(() => new HttpClient());
        var response = await httpClient.Value.RequestPasswordTokenAsync(new PasswordTokenRequest
        {
            Address = disco.TokenEndpoint, // https://localhost:44388/connect/token
            ClientId = "BookStore_Console",
            ClientSecret = "1q2w3e",
            UserName = "admin",
            Password = "1q2w3E*",
            Scope = "email openid profile role phone address BookStore",
        });
        if (response.IsError) throw new Exception(response.Error);
        return response;
    }

    private async Task<string> GetAccessToken()
    {
        var accessToken = (await GetTokensFromBookStoreApi()).AccessToken;
        return accessToken;
    }

}

Main Method

Below you see the Main method of the Program.cs file. A new HttpService gets created and the GetHttpClientAsync method is called to get a httpClient.

Next, we make a request to the BookStore API to obtain the list of books.

static async Task Main()
{
    // if setBearerToken = false, should throw HttpRequestException: 'Response status code does not indicate success: 401 (Unauthorized).'
    // if setBearerToken = true, API should be called an list of books should be returned
    const bool setBearerToken = true;

    var httpService = new HttpService();
    var httpClient = await httpService.GetHttpClientAsync(setBearerToken);

    var response = await httpClient.Value.GetAsync("https://localhost:44388/api/app/book");
    response.EnsureSuccessStatusCode();

    var json = await response.Content.ReadAsStringAsync();

    var books = JsonConvert.DeserializeObject<ListResultDto<BookDto>>(json);

    Console.WriteLine("====================================");
    if (books?.Items != null)
        foreach (var book in books.Items)
            Console.WriteLine(book.Name);
    Console.WriteLine("====================================");
    Console.ReadKey();
}

Run API and .NET Core console application

Run the BookStore.HttpApi.Host of the ABP Framework application first. Start the .NET Core console application next. Below is the result when the accesstoken is successfully set.

If you set the variable setBearerToken in the Main method to false, you will get a 401 (Unauthorized)

Congratulations, you can now connect to an ABP Framework API form a .NET Core console application! Check out the source code of this article on GitHub.

Enjoy and have fun!

Introduction

In this article, I will explain how to consume an ABP Framework API with Xamarin.Forms.

The article is a complete rewrite of an older one that you can find here here.

Source Code

The sample application has been developed with Blazor as UI framework and SQL Server as database provider.

The Source code of the completed application is available on GitHub.

Requirements

The following tools are needed to be able to run the solution and follow along. You will also need to have your editor set up for Xamarin.Forms development.

• .NET 5.0 SDK
• VsCode, Visual Studio 2019, or another compatible IDE.

Create a new ABP Framework application

    abp new AbpApi -u blazor -o AbpApi

BookAppService (optional)

To have a simple API that you can consume with the Xamarin.Forms app, add the Books Bookstore code from the BookStore Tutorial (Part1-5).

Add AbpApi_Xamarin section in appsettings.json file of the AbpApi.DbMigrator project

    // change the <replace-me-with-the-abp-api-port> with the port were the Swagger page is running on
    "AbpApi_Xamarin": {
        "ClientId": "AbpApi_Xamarin",
        "ClientSecret": "1q2w3e*",
        "RootUrl": "https://localhost:<replace-me-with-the-abp-api-port>/" 
    }

Add Xamarin client IdentityServer configuration

In the CreateClientAsync method in class IdentityServerDataSeedContributor of the AbpApi.Domain project.

    // Xamarin Client
    var xamarinClientId = configurationSection["AbpApi_Xamarin:ClientId"];
    if (!xamarinClientId.IsNullOrWhiteSpace())
    {
        var xamarinRootUrl = configurationSection["AbpApi_Xamarin:RootUrl"].TrimEnd('/');
        await CreateClientAsync(
            name: xamarinClientId,
            scopes: commonScopes,
            grantTypes: new[] { "authorization_code" },
            secret: configurationSection["AbpApi_Xamarin:ClientSecret"]?.Sha256(),
            requireClientSecret: false,
            redirectUri: "xamarinformsclients:/authenticated",
            postLogoutRedirectUri: "xamarinformsclients:/signout-callback-oidc",
            corsOrigins: new[] { xamarinRootUrl.RemovePostFix("/") }
        );
    }

Insert XamarinClient setting into Database

Run AbpApi.DbMigrator project to execute the IdentityServerDataSeedContributor to insert the XamarinClient settings into the database.

Start API and Blazor project

Start API and Blazor project to see if all projects are running successfully. Keep the API running!

Download & setup ngrok

With ngrok, you can mirror your localhost API endpoint to a worldwide available API endpoint. In this way, you can overcome the problem of Xamarin.Forms app mixing up localhost from the API with localhost from the Xamarin.Forms app.

Open a command prompt in the root of ABP Framework application and run the command below

    -- specify another region when needed
    ngrok http -region eu https://localhost:<replace-me-with-the-abp-api-port>/ 

Copy and remember Ngrok Forwarding HTTPS endpoint

    "https://<your-ngrok-generated-generated-number-here>.eu.ngrok.io"

Create a new Xamarin.Forms application

Create a new Xamarin app in Visual Studio (Flyout template)

Update Nuget Packages

I updated the following NuGet packages in the Xamarin.core project and the Android.project.

    Xamarin.Forms" Version="5.0.0.2244
    Xamarin.Essentials" Version="1.7.0

Add a FlyoutItem in file AppShell.xaml of the AbpXamarinForms core project

    <FlyoutItem Title="Login" Icon="icon_about.png">
        <ShellContent Route="LoginPage" ContentTemplate="{DataTemplate local:LoginPage}" />
    </FlyoutItem>
    // ... other FlyoutItems here

Run XamarinForms application

Start the Android the Xamarin.Forms application and stop it again when it runs successfully.

Connect to AbpApi IdentityServer

Install IdentityModel and IdentityModel.OidcClient nuget packages

Open the Nuget Package Manager and install IdentityModel, IdentityModel.OidcClient and Newtonsoft.json nuget packages in the core project.

Add a WebAuthenticatorBrowser class to the Services folder in the Core project

This class is needed to open a browser page in your Xamarin.Forms application.

using System;
using System.Linq;
using System.Threading;
using System.Threading.Tasks;
using IdentityModel.OidcClient.Browser;
using Xamarin.Essentials;

namespace AbpXamarinForms.Services
{
    internal class WebAuthenticatorBrowser : IBrowser
    {
        private readonly string _callbackUrl;

        public WebAuthenticatorBrowser(string callbackUrl = null) => _callbackUrl = callbackUrl ?? "";

        public async Task<BrowserResult> InvokeAsync(BrowserOptions options, CancellationToken cancellationToken = default)
        {
            try
            {
                var callbackUrl = string.IsNullOrEmpty(_callbackUrl) ? options.EndUrl : _callbackUrl;
                var authResult =
                    await WebAuthenticator.AuthenticateAsync(new Uri(options.StartUrl), new Uri(callbackUrl));
                var authorizeResponse = ToRawIdentityUrl(options.EndUrl, authResult);
                return new BrowserResult
                {
                    Response = authorizeResponse
                };
            }
            catch (Exception exception)
            {
                
                return new BrowserResult
                {
                    ResultType = BrowserResultType.UnknownError,
                    Error = exception.ToString()
                };
            }
        }

        private static string ToRawIdentityUrl(string redirectUrl, WebAuthenticatorResult result)
        {
            var parameters = result.Properties.Select(pair => $"{pair.Key}={pair.Value}");
            var values = string.Join("&", parameters);
            return $"{redirectUrl}#{values}";
        }
    }
}

Add a LoginService class to the Services folder

using IdentityModel.OidcClient;
using System.Threading.Tasks;

namespace AbpXamarinForms.Services
{
    public class LoginService
    {
        private const string _authorityUrl = "https://<your-ngrok-generated-generated-number-here>.eu.ngrok.io";
        private const string _redirectUrl = "xamarinformsclients:/authenticated";
        private const string _postLogoutRedirectUrl = "xamarinformsclients:/signout-callback-oidc";
        private const string _scopes = "email openid profile role phone address AbpApi";
        private const string _clientSecret = "1q2w3e*";
        private const string _clientId = "AbpApi_Xamarin";


        private OidcClient CreateOidcClient()
        {
            var options = new OidcClientOptions
            {
                Authority = _authorityUrl,
                ClientId = _clientId,
                Scope = _scopes,
                RedirectUri = _redirectUrl,
                ClientSecret = _clientSecret,
                PostLogoutRedirectUri = _postLogoutRedirectUrl,
                Browser = new WebAuthenticatorBrowser()
            };
            return new OidcClient(options);
        }

         public async Task<string> AuthenticateAsync()
        {
            var oidcClient = CreateOidcClient();
            var loginResult = await oidcClient.LoginAsync(new LoginRequest());
            return loginResult.AccessToken;
        }
    }
}

Update content of the LoginViewModel.cs class

using AbpXamarinForms.Services;
using IdentityModel.Client;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using Xamarin.Forms;

namespace AbpXamarinForms.ViewModels
{
    public class LoginViewModel : BaseViewModel
    {
        private readonly LoginService _loginService = new LoginService();
        public Command LoginCommand { get; }

        public LoginViewModel()
        {
            LoginCommand = new Command(OnLoginClicked);
        }

        private async void OnLoginClicked(object obj)
        {
            var ngRokUrl = "https://<your-ngrok-generated-generated-number-here>.eu.ngrok.io";
            var accessToken = await _loginService.AuthenticateAsync();
            Console.WriteLine($"accesstoken: {accessToken}");

            var httpClient = GetHttpClient(accessToken);
            var response = await httpClient.Value.GetAsync($"{ngRokUrl}/api/app/book");
            if (response.IsSuccessStatusCode)
            {
                var content = await response.Content.ReadAsStringAsync();
                var booksResult = JsonConvert.DeserializeObject<BooksResult>(content);

                var book = booksResult.Items.FirstOrDefault();
                Console.WriteLine($"book: {book.Name} - price: {book.Price}");
            }
            // Set a breakpoint on the line below
            Console.ReadLine();
        }

        private Lazy<HttpClient> GetHttpClient(string accessToken)
        {
            var httpClient = new Lazy<HttpClient>(() => new HttpClient(GetHttpClientHandler()));
            httpClient.Value.SetBearerToken(accessToken);
            return httpClient;
        }

        private HttpClientHandler GetHttpClientHandler()
        {
            //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
            // EXCEPTION : Javax.Net.Ssl.SSLHandshakeException: 'java.security.cert.CertPathValidatorException: Trust anchor for certification path not found.'
            // SOLUTION :
            var httpClientHandler = new HttpClientHandler
            {
                ServerCertificateCustomValidationCallback = (message, cert, chain, errors) => true
            };
            return httpClientHandler;
        }

    }

    public class BooksResult
    {
        public int TotalCount { get; set; }
        public List<BookDto> Items { get; set; }
    }

    public class BookDto
    {
        public Guid Id { get; set; }
        public string Name { get; set; }
        public BookType Type { get; set; }
        public DateTime PublishDate { get; set; }
        public float Price { get; set; }
        public DateTime? LastModificationTime { get; set; }
        public Guid? LastModifierId { get; set; }
    }

    public enum BookType
    {
        Undefined,
        Adventure,
        Biography,
        Dystopia,
        Fantastic,
        Horror,
        Science,
        ScienceFiction,
        Poetry
    }
}

Add a WebAuthenticationCallbackActivity class in the root of the Android project

using Android.App;
using Android.Content;
using Android.Content.PM;

namespace AbpXamarinForms.Droid
{
    [Activity(NoHistory = true, LaunchMode = LaunchMode.SingleTop)]
    [IntentFilter(new[] { Intent.ActionView },
        Categories = new[] { Intent.CategoryDefault, Intent.CategoryBrowsable }, DataScheme = "xamarinformsclients")]
    public class WebAuthenticationCallbackActivity : Xamarin.Essentials.WebAuthenticatorCallbackActivity
    {
    }
}

Run both API and Xamarin.Forms application

• Update the _authorityUrl field in the LoginService class with the correct ngrok Forwarding https url
• Update the ngRokUrl variable in the OnLoginClicked method of the LoginViewModel class
• Start the AbpApi application and make sure ngrok is running
• Run the AbpXamarinForms application on an emulator or physical device.
• Click the Login button and enter the administrator credentials (admin, 1q2w3E*)

WARNING: The API will probably throw a SecurityTokenInvalidIssuerException.

Fix SecurityTokenInvalidIssuerException: IDX10205: Issuer validation failed

Failed to validate the token.

Microsoft.IdentityModel.Tokens.SecurityTokenInvalidIssuerException: IDX10205: Issuer validation failed. Issuer: 'System.String'. Did not match: validationParameters.ValidIssuer: 'System.String' or validationParameters.ValidIssuers: 'System.String'.
   at Microsoft.IdentityModel.Tokens.Validators.ValidateIssuer(String issuer, SecurityToken securityToken, TokenValidationParameters validationParameters)
   at System.IdentityModel.Tokens.Jwt.JwtSecurityTokenHandler.ValidateIssuer(String issuer, JwtSecurityToken jwtToken, TokenValidationParameters validationParameters)
   at System.IdentityModel.Tokens.Jwt.JwtSecurityTokenHandler.ValidateTokenPayload(JwtSecurityToken jwtToken, TokenValidationParameters validationParameters)

Update the ConfigureAuthentication method in the AbpApiHostModule of the AbpApi.HttpApi.Host project

 private void ConfigureAuthentication(ServiceConfigurationContext context, IConfiguration configuration)
{
    context.Services.AddAuthentication()
        .AddJwtBearer(options =>
        {
            options.Authority = configuration["AuthServer:Authority"];
            options.RequireHttpsMetadata = Convert.ToBoolean(configuration["AuthServer:RequireHttpsMetadata"]);
            options.Audience = "AbpApi";
            options.BackchannelHttpHandler = new HttpClientHandler
            {
                ServerCertificateCustomValidationCallback =
                    HttpClientHandler.DangerousAcceptAnyServerCertificateValidator
            };
            // Add the line below 
            options.TokenValidationParameters.ValidIssuers = configuration.GetSection("AuthServer:ValidIssuers").Get<string[]>();
            
            // Alternatively the line below would also fix the problem.
            // options.TokenValidationParameters.ValidateIssuer = false;
        });
}

Add ValidIssuers to the AuthServer section of the appsettings.json file in the AbpApi.HttpApi.Host project

"AuthServer": {
    "Authority": "https://localhost:<replace-me-with-the-abp-api-port>",
    "RequireHttpsMetadata": "false",
    "SwaggerClientId": "AbpApi_Swagger",
    "SwaggerClientSecret": "1q2w3e*",
    "ValidIssuers": [
      "https://<your-ngrok-generated-generated-number-here>.eu.ngrok.io"
    ]
  },

Start both the AbpApi and the AbpXamarinForms applications

If all goes well, your XamarinForms application opens the ABP login page. Enter the administrator credentials (admin - 1q2w3E*) and confirm. Once logged in, the app sends an Http-request to the ABP Framework API to get the books from the database.

Et voilà! The Xamarin.Forms app connects to the IdentityServer4 successfully and gets the books from the ABP Framework API.

Get the source code on GitHub.

Enjoy and have fun!

Introduction

In this article you will learn how to setup and use the Blob Storing Azure Provider to Upload/Download files to Azure Storage in a Blazor APB Framework application.

To keep this article as simple as possible, I will only show the steps to upload a file to Azure Storage. In the accompanying source code you can find the code you need to Download or Delete a file from Azure Storage.

I made use of Azurite (an emulator for local Storage Development), so you don't need to set up an Azure Storage account in Azure to follow along. If you want to upload/download files to a real Azure Storage account in Azure, you need to replace the connection string in the AzureStorageAccountSettings section of the appsettings.json file in the HttpApi.Host project.

Source code

The Source code of the completed application is available on GitHub.

Requirements

The following tools are needed to be able to run the solution and follow along.

• .NET 5.0 SDK
• VsCode, Visual Studio 2019 16.8.0+ or another compatible IDE
• Node.js (version 8.0 or later)
• Microsoft Azure Storage Explorer. Download it here
• Azurite (Emulator for local Azure Storage development). Read more about it here.

Tools needed

Install and run Azurite

• Open a command prompt and install Azurite by using NPM.

  npm install -g azurite

• Create an azurite folder in your c-drive (c:\azurite).
• start Azurite emulator from a command prompt with admin privileges.

  azurite --silent --location c:\azurite --debug c:\azurite\debug.log

Alternatively you could also run Azurite as a docker container (see docs how to proceed).

Install and configure Microsoft Azure Storage Explorer

• Download and install Azure Storage Explorer. A free tool to easily manage your Azure cloud storage resources anywhere, from Windows, macOS, or Linux.
• Click on the Open Connect Dialog icon in the left menu.
• Select Attach to a local emulator and click Next, keep default settings, click Connect.
• Do not forget to start your emulator, Storage Explorer will not start it for you.

Create and run Application

Creating a new ABP Framework Application

• Install or update the ABP CLI:

dotnet tool install -g Volo.Abp.Cli || dotnet tool update -g Volo.Abp.Cli

• Use the following ABP CLI command to create a new Blazor ABP application:

abp new AbpFileUploadToAzureStorage -o AbpFileUploadToAzureStorage -u blazor

Open & run the Application

• Open the solution in Visual Studio (or your favorite IDE).
• Run the AbpFileUploadToAzureStorage.DbMigrator application to apply the migrations and seed the initial data.
• Run the AbpFileUploadToAzureStorage.HttpApi.Host application to start the server side.
• Run the AbpFileUploadToAzureStorage.Blazor application to start the Blazor UI project.

Development

Install Volo.Abp.BlobStoring.Azure NuGet package to Domain project

• Open a command prompt in the directory of the Domain project.
• Run the command below to install Volo.Abp.BlobStoring.Azure NuGet package

  abp add-package Volo.Abp.BlobStoring.Azure

Create a class AzureStorageAccountOptions to retrieve Azure Storage settings

• Create an AzureStorage folder in the Domain project of your application.
• Add a AzureStorageAccountOptions.cs file to the AzureStorage folder.

namespace AbpFileUploadToAzureStorage
{
  public class AzureStorageAccountOptions
  {
    public string ConnectionString { get; set; }
    public string AccountUrl { get; set; }
  }
}

Add AzureStorageAccountSettings to the appsettings.json file in the HttpApi.Host project

{
  // other settings here

  "AzureStorageAccountSettings" : {
    "ConnectionString" : "AccountName=devstoreaccount1;AccountKey=Eby8vdM02xNOcqFlqUwJPLlmEtlCDXJ1OUzFT50uSRZ6IFsuFq2UVErCz4I6tq/K1SZFPTOtr/KBHBeksoGMGw==;DefaultEndpointsProtocol=http;BlobEndpoint=http://127.0.0.1:10000/devstoreaccount1;QueueEndpoint=http://127.0.0.1:10001/devstoreaccount1;TableEndpoint=http://127.0.0.1:10002/devstoreaccount1;",
    "AccountUrl" : "http://127.0.0.1:10000/devstoreaccount1/"
  }
}

The connection string above serves as connection to Azurite (local Azure Storage emulator). You will need to replace the connection string when you want to upload files to Azure Storage in the cloud.

Create a ConfigureAzureStorageAccountOptions method in the AbpFileUploadToAzureStorageDomainModule class of the Domain project

    // Comment out and place in using section page
    // using Microsoft.Extensions.Configuration;
    
    private void ConfigureAzureStorageAccountOptions(ServiceConfigurationContext context, IConfiguration configuration)
    {
      Configure<AzureStorageAccountOptions>(options =>
      {
        var azureStorageConnectionString = configuration["AzureStorageAccountSettings:ConnectionString"];
        var azureStorageAccountUrl = configuration["AzureStorageAccountSettings:AccountUrl"];

        options.ConnectionString = azureStorageConnectionString;
        options.AccountUrl = azureStorageAccountUrl;
      });
    }

Call the ConfigureAzureStorageAccountOptions method from the ConfigureServices method in the AbpFileUploadToAzureStorageDomainModule

    public override void ConfigureServices(ServiceConfigurationContext context)
    {
      // ...

      var configuration = context.Services.GetConfiguration();
      ConfigureAzureStorageAccountOptions(context, configuration);
    }

Add a PizzaPictureContainer class in the Domain project

• Add a PizzaPictureContainer.cs file to the AzureStorage/Pizzas folder of the Domain project.

using Volo.Abp.BlobStoring;

namespace AbpFileUploadToAzureStorage.Domain.AzureStorage
{
    [BlobContainerName("pizza-picture-container")]
    public class PizzaPictureContainer
    {
        
    }
}

Create a ConfigureAbpBlobStoringOptions method in the AbpFileUploadToAzureStorageDomainModule of the Domain project

    // Comment out and place in using section page
    // using Volo.Abp.BlobStoring;
    // using AbpFileUploadToAzureStorage.Domain.AzureStorage;


    private void ConfigureAbpBlobStoringOptions(IConfiguration configuration)
    {
      Configure<AbpBlobStoringOptions>(options =>
      {
        var azureStorageConnectionString = configuration["AzureStorageAccountSettings:ConnectionString"];
        options.Containers.Configure<PizzaPictureContainer>(container =>
        {
          container.UseAzure(azure =>
                {
                  azure.ConnectionString = azureStorageConnectionString;
                  azure.CreateContainerIfNotExists = true;
                });
        });
      });
    }

Call the ConfigureAbpBlobStoringOptions method from the ConfigureServices method in the AbpFileUploadToAzureStorageDomainModule

    public override void ConfigureServices(ServiceConfigurationContext context)
    {
      // ...

      var configuration = context.Services.GetConfiguration();
      ConfigureAzureStorageAccountOptions(context, configuration);
      
      ConfigureAbpBlobStoringOptions(configuration);
    }

Create PizzaPictureContainerManager class in folder AzureStorage/Pizzas of the Domain project

using System;
using System.IO;
using System.Threading.Tasks;
using Microsoft.Extensions.Options;
using Volo.Abp.BlobStoring;
using Volo.Abp.Domain.Services;

namespace AbpFileUploadToAzureStorage.Domain.AzureStorage.Pizzas
{
  public class PizzaPictureContainerManager : DomainService
  {
    private readonly IBlobContainer<PizzaPictureContainer> _pizzaPictureContainer;
    private readonly AzureStorageAccountOptions _azureStorageAccountOptions;

    public PizzaPictureContainerManager(IBlobContainer<PizzaPictureContainer> pizzaPictureContainer, IOptions<AzureStorageAccountOptions> azureStorageAccountOptions)
    {
      _pizzaPictureContainer = pizzaPictureContainer;
      _azureStorageAccountOptions = azureStorageAccountOptions.Value;
    }

    public async Task<string> SaveAsync(string fileName, byte[] byteArray, bool overrideExisting = false)
    {
      var extension = Path.GetExtension(fileName);
      var storageFileName = $"{Path.GetFileNameWithoutExtension(fileName)}_{Guid.NewGuid()}{extension}";
      await _pizzaPictureContainer.SaveAsync(storageFileName, byteArray, overrideExisting);
      return storageFileName;
    }
  }
}

Add IPizzaAppService, SavePizzaPictureDto and SavedPizzaPictureDto to the Application.Contracts project

using System.Threading.Tasks;
using Volo.Abp.Application.Services;

namespace AbpFileUploadToAzureStorage.Application.Contracts.AzureStorage.Pizzas
{
  public interface IPizzaAppService : IApplicationService
  {
    Task<SavedPizzaPictureDto> SavePizzaPicture(SavePizzaPictureDto input);
  }
}

namespace AbpFileUploadToAzureStorage.Application.Contracts.AzureStorage.Pizzas
{
  public class SavePizzaPictureDto
  {
    public string FileName { get; set; }
    public byte[] Content { get; set; }
  }
}

namespace AbpFileUploadToAzureStorage.Application.Contracts.AzureStorage.Pizzas
{
  public class SavedPizzaPictureDto
  {
    public string StorageFileName { get; set; }
  }
}

Add a PizzaAppService class in the Application project and implement IPizzaAppService interface

using System.Threading.Tasks;
using AbpFileUploadToAzureStorage.Application.Contracts.AzureStorage.Pizzas;
using AbpFileUploadToAzureStorage.Domain.AzureStorage.Pizzas;
using Volo.Abp.Application.Services;

namespace AbpFileUploadToAzureStorage.Application.AzureStorage.Pizzas
{

  public class PizzaAppService : ApplicationService, IPizzaAppService
  {
    private readonly PizzaPictureContainerManager _pizzaPictureContainerManager;

    public PizzaAppService(PizzaPictureContainerManager pizzaPictureContainerManager)
    {
      _pizzaPictureContainerManager = pizzaPictureContainerManager;
    }

    public async Task<SavedPizzaPictureDto> SavePizzaPicture(SavePizzaPictureDto input)
    {
      var storageFileName = await _pizzaPictureContainerManager.SaveAsync(input.FileName, input.Content, true);
      return new SavedPizzaPictureDto { StorageFileName = storageFileName };
    }
  }
}

Replace content of Index.razor with code below

@page "/"
@inherits AbpFileUploadToAzureStorageComponentBase
<div class="container">
    <CardDeck>
        <div class="card mt-4 mb-5">
            <div class="card-body">
                <div class="col-lg-12">
                    <div class="p-12">
                        <h5><i class="fas fa-file-upload text-secondary pr-2 my-2 fa-2x"></i>Upload
                            File to Azure Storage
                        </h5>
                        <p>
                            <InputFile OnChange="@OnInputFileChange" />
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="card mt-4 mb-5">
            <div class="card-body">
                <CardImage Source="@PictureUrl" Alt="Pizza picture will be displayed here!"></CardImage>
            </div>
        </div>
    </CardDeck>
</div>

Replace content of Index.razor.cs with code below

using System;
using System.Linq;
using System.Threading.Tasks;
using AbpFileUploadToAzureStorage.Application.Contracts.AzureStorage.Pizzas;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;

namespace AbpFileUploadToAzureStorage.Blazor.Pages
{
  public partial class Index
  {
    [Inject] protected IPizzaAppService PizzaAppService { get; set; }
    public SavedPizzaPictureDto SavedPizzaPictureDto { get; set; } = new SavedPizzaPictureDto();
    protected string PictureUrl;

    protected async Task OnInputFileChange(InputFileChangeEventArgs e)
    {
      var file = e.GetMultipleFiles(1).FirstOrDefault();
      var byteArray = new byte[file.Size];
      await file.OpenReadStream().ReadAsync(byteArray);

      SavedPizzaPictureDto = await PizzaAppService.SavePizzaPicture(new SavePizzaPictureDto { Content = byteArray, FileName = file.Name }); ;

      var format = "image/png";
      var imageFile = (e.GetMultipleFiles(1)).FirstOrDefault();
      var resizedImageFile = await imageFile.RequestImageFileAsync(format, 100, 100);
      var buffer = new byte[resizedImageFile.Size];
      await resizedImageFile.OpenReadStream().ReadAsync(buffer);
      PictureUrl = $"data:{format};base64,{Convert.ToBase64String(buffer)}";
    }
  }
}

Test uploading a picture to Azure Storage

• Start both the Blazor and the HttpApi.Host project.
• Choose a pizza picture in the File Upload to Azure Storage section.

Et voilà! As you can see in the Azure Storage Explorer, the pizza picture has been successfully stored in Azure Storage.

Congratulations, you can upload a file to Azure Storage by now! Check out the source code of this article to see my implementation of Uploading/Deleting a file to Azure Storage.

Find more information about the ABP Framework Blob Storing System here and BLOB Storing Azure Provider here.

Get the source code on GitHub.

Enjoy and have fun!

Introduction

In this article, I will show how you can replace the Basic Bootstrap theme with a free Custom Bootstrap theme in a Blazor ABP Framework application.

Source Code

The sample application has been developed with Blazor as UI framework and SQL Server as database provider.

The source code of the completed application is available on GitHub.

Requirements

The following tools are needed to be able to run the solution.

• .NET 5.0 SDK
• VsCode, Visual Studio 2019 16.8.0+ or another compatible IDE

Development

Creating a new Application

• Install or update the ABP CLI:

   dotnet tool install -g Volo.Abp.Cli || dotnet tool update -g Volo.Abp.Cli

• Use the following ABP CLI command to create a new Blazor ABP application:

   abp new AbpReplaceBasicTheme -u blazor

Open & Run the Application

• Open the solution in Visual Studio (or your favorite IDE).
• Run the AbpReplaceBasicTheme.DbMigrator application to apply the migrations and seed the initial data.
• Run the AbpReplaceBasicTheme.HttpApi.Host application to start the server-side.
• Run the AbpReplaceBasicTheme.Blazor application to start the Blazor UI project.

Copy BasicTheme to the src folder of your project

• Open a command prompt and clone the apb repository into your computer.

   git clone https://github.com/abpframework/abp

• Once the cloning is done, navigate to the framework\src folder of the repository.
• Copy the Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme project into the src folder of your project.
• Copy the Volo.Abp.AspNetCore.Components.WebAssembly.Theming project into the src folder of your project.

Remove the Package Reference of the Basic Theme in the Blazor project

• Open the Blazor.csproj file and remove or comment out the BasicTheme package reference.

Fix the build errors in WebAssembly.Theming project

• Open file Volo.Abp.AspNetCore.Components.WebAssembly.Theming.csproj and remove or comment out the following lines.

• Open a command prompt in the WebAssembly.Theming project and run dotnet build. The build will fail because of missing NuGet packages.

• Run the command below to install the missing NuGet packages.

   abp add-package Volo.Abp.BlazoriseUI
   abp add-package Volo.Abp.Http.Client.IdentityModel.WebAssembly
   abp add-package Volo.Abp.UI.Navigation

• Running dotnet build again in the WebAssembly.Theming project should succeed by now!

Build the BasicTheme project and fix the build errors

• Open file Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.csproj and remove or comment out the following lines.

• Open a command prompt in the WebAssembly.BasicTheme project and run dotnet build. The build should succeed.

Add a project reference to the BasicTheme project in the Blazor.csproj file

• Open a command prompt in the Blazor project of your application and add a project reference to the BasicTheme project.

   dotnet add reference ../../src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.csproj

• Run dotnet build in the Blazor project to see if the project builds successfully!

Replace Basic Bootstrap theme with Custom Bootstrap theme

• Find yourself a free Bootstrap theme on the internet. In this example I use the SuperHero Bootstrap Theme I found on bootswatch.com.

• Download and replace file wwwroot\libs\bootstrap\css\bootstrap.min.css in the Volo.Abp.AspNetCore.Components.WebAssembly.Theming project.

Bundling Blazor project

• Open a command prompt in the root of your application to clean and build your project.

   dotnet clean
   dotnet build

• Open a command prompt in the Blazor project enter the command below to bundle the SuperHero Bootstrap theme.

   abp bundle

Start the application by running both the Blazor and HttpApi.Host project

Et voilà! This is the result.

You can now use your custom Bootstrap theme instead of the basic Bootstrap theme.

Find more about adding global styles/scripts and other fundamentals about ABP theming here.

Get the source code on GitHub.

Enjoy and have fun!

Introduction

In this article, I will show you first how to set up Facebook registration in an ABP Framework application. Afterwards, I will show you how this Facebook registered user gets verified by email.

The best way to follow along is to start from scratch and start with the article Setup Email Confirmation on User Registration as it serves as the base for this article. Alternatively, you can clone the repository of the project.

git clone https://github.com/bartvanhoey/AbpUserVerificationByEmail.git

Source Code

The sample application has been developed with Blazor as UI framework and SQL Server as database provider.

The source code of the completed application is available on GitHub.

Requirements

The following tools are needed to be able to run the solution.

• .NET 5.0 SDK
• VsCode, Visual Studio 2019 16.8.0+ or another compatible IDE

You also need a Gmail account to follow along.

Set up Facebook registration

Create the app in FACEBOOK for Developers

• Navigate to FACEBOOK for Developers and sign in.
• Click on the Create App button.
• Choose Build Connected Experiences in the Create an App window. Continue.
• Fill in App Display Name and click on the Create App button.
• In the Add Products to Your App section, find Facebook Login and click Set Up.
• Goto the Facebook Login Settings and update the settings as in the image below.
• Replace the port number with the port number on which the SwaggerUI gets served. You can also find it in file launchsettings.json of the AbpFacebookRegistration.HttpApi.Host project.
• Copy App ID and App Secret in the Basic Settings windows.

Development

Creating a new Application

• Install or update the ABP CLI:

dotnet tool install -g Volo.Abp.Cli || dotnet tool update -g Volo.Abp.Cli

• Use the following ABP CLI command to create a new Blazor ABP application:

abp new AbpFacebookRegistration -u blazor -o AbpFacebookRegistration

Open & Run the Application

• Open the solution in Visual Studio (or your favorite IDE).
• Run the AbpFacebookRegistration.DbMigrator application to apply the migrations and seed the initial data.
• Run the AbpFacebookRegistration.HttpApi.Host application to start the server-side.
• Run the AbpFacebookRegistration.Blazor application to start the Blazor UI project.

Add the Facebook NuGet Package to HttpApi.Host project

• Open a command prompt in the HttpApi.Host project and run the command below:

dotnet add package Microsoft.AspNetCore.Authentication.Facebook

Add an Authentication section to the appsettings.json file of the HttpApi.Host project

WARNING: Make sure you don't publish your Credentials to GitHub or another Versioning System.

 "Authentication": {
    "Facebook": {
      "AppId" : "YourAppIdHere",
      "AppSecret": "YourAppSecretHere"
    }
}

Configure the Provider in the HttpApiHostModule of the HttpApi.Host

Add the AddFacebook extension method to the ConfigureAuthentication method in the HttpApiHostModule of the HttpApi.Host

    private void ConfigureAuthentication(ServiceConfigurationContext context, IConfiguration configuration)
    {
      //...  

      context.Services.AddAuthentication()
            .AddFacebook(facebook =>
            {
                facebook.AppId = configuration["Authentication:Facebook:AppId"];
                facebook.AppSecret = configuration["Authentication:Facebook:AppSecret"];
                facebook.Scope.Add("email");
                facebook.Scope.Add("public_profile");
            });
    }

Open & Run the Application

• Run the AbpFacebookRegistration.DbMigrator application to apply the migrations and seed the initial data.
• Run the AbpFacebookRegistration.HttpApi.Host application to start the server-side.
• Run the AbpFacebookRegistration.Blazor application to start the Blazor UI project.

When you navigate to the login page of your application, you already see the Facebook button. DO NOT CLICK THE FACEBOOK BUTTON YET! Although Facebook Registration ALREADY works, I would like to show you the Email Confirmation part too. :-)

Gmail Credentials

Setting up Google SMTP Server in appsettings.json

• Open file EncryptGmailPasswordAppService.cs in the AbpFacebookRegistration.Application project and replace YourGmailPasswordHere with your Gmail password.

• Run the AbpFacebookRegistration.HttpApi.Host project and navigate to the SwaggerUI.

• Find the EncryptGmailPassword method and click on Try it out first, Execute after.

• Copy the encrypted Gmail password in the response body.

• Open file appsettings.json in project HttpApi.Host and update the Smtp Settings with the correct values.

"Settings": {
    "Abp.Mailing.Smtp.Host": "smtp.gmail.com",
    "Abp.Mailing.Smtp.Port": "587",
    "Abp.Mailing.Smtp.UserName": "your-gmail-email-address-here",
    "Abp.Mailing.Smtp.Password": "your-encrypted-gmail-password-here",
    "Abp.Mailing.Smtp.Domain": "",
    "Abp.Mailing.Smtp.EnableSsl": "true",
    "Abp.Mailing.Smtp.UseDefaultCredentials": "false",
    "Abp.Mailing.DefaultFromAddress": "your-gmail-email-address-here",
    "Abp.Mailing.DefaultFromDisplayName": "Your-Custom-Text-Here"
  }

Pages/Account folder of the HttpApi.Host project

In the Pages/Account folder, you find the files needed for the Email Confirmation after User Registration. I copied/pasted these files from the Account Module of the ABP Framework and adapted them to my needs. By doing so, you override the original files of the Account Module, and you can hook in into the registration flow.

The heavy-lifting happens mainly in the RegisterModel file. When an unregistered user clicks on the Facebook button to log in, the OnPostAsync method gets executed. The RegisterExternalUserAsync method to create the user is called next. At the end of the RegisterExternalUserAsync method, an email is sent by the SendEmailToAskForEmailConfirmationAsync method.

Test the Facebook Registration flow and User Email Verification

• Start both the Blazor and HttpApi.Host project to run the application.
• Navigate to the Login page and click on the Facebook button.
• You will see a Facebook screen that says your app will receive your name, profile picture, and email address.
• Next, you will land on the My Customer Register Page.

• Click on the Register button to complete the Facebook registration (Email sent in this step).
• Go to your email inbox and click on the clicking here link to confirm your account.
• Navigate to the Login page and click on the Facebook button.

Et voilà, this is the result. The user's email address is successfully verified!

You can now force a user who registered with Facebook to confirm his email address before he can use your application.

Click on the links to find more about Sending Emails and the Account Module

Get the source code on GitHub.

Enjoy and have fun!

ABPx - code snippets that start with an x

Introduction

In this article, I would like to introduce you to ABPx, a VsCode Extension for the ABP Framework, available in the Visual Studio Marketplace.

The main goal of ABPx is to speed up the development process of ABP applications in Visual Studio Code.

When I started learning the ABP Framework, I noticed that the ABP Framework has a convention over configuration approach and you often end up writing the same code over and over again. That's why I started to develop a VsCode Extension with useful code snippets to make the life of an ABP Framework developer a little easier.

ABPx Code Snippets in Action

Below you will see 3 examples of how to use ABPx code snippets in practice. At the moment of this writing, there are about 180 ABPx code snippets for C#, razor and jsonc files that you can use in your daily ABP Framework coding work.

Generate VsCode Launch Configurations for your ABP application

Starting with an ABP project in VsCode can be a bit of hassle. ABPx makes it a lot easier to get you up and running by generating the launch configurations needed, as you can see below.

After you opened an ABP application in Visual Studio Code hit CTRL+SHIFT+P (.NET Generate Assets for Build and Debug). This will add a .vscode folder to the root of the project with a launch.json and tasks.json file.

• Click Yes to add the required assets to build and debug your application. Select the HttpApi.Host project in the Select the project to launch dropdown.

Generate an AppService class that inherits from the CrudAppService base class

Create a Permission Group, add Permissions to Permission Group and generate Translations

ABPx Source Code

Get the source code of the ABPx VsCode Extension on GitHub.

Install ABPx

Please feel free to install the ABPx extension in VsCode, and if you see room for improvement or you have a snippet in mind you want to have included? Create an issue in the ABPx repository. I will see what I can do! :-)

ABPx - code snippets that start with an x

Enjoy and have fun!

Introduction

In this article, I will show you how to get a user verified by email after he fills in the registration form in an ABP Framework application.

In this article I make use of the free Google SMTP Server for sending emails, in a real-world application, however, you probably would choose another Email Delivery Service like SendGrid, Mailjet, etc.

Source Code

The sample application has been developed with Blazor as UI framework and SQL Server as database provider.

The source code of the completed application is available on GitHub.

Requirements

The following tools are needed to be able to run the solution.

• .NET 6.0 SDK
• VsCode, Visual Studio 2022 or another compatible IDE
• ABP CLI version 6.0.0

You also need a Gmail account to follow along.

Development

Create a new Application

• Install or update the ABP CLI:

dotnet tool install -g Volo.Abp.Cli || dotnet tool update -g Volo.Abp.Cli

• Use the following ABP CLI command to create a new Blazor ABP application:

abp new AbpUserVerificationByEmail -u blazor -o AbpUserVerificationByEmail

Open & Run the Application

• Open the solution in Visual Studio (or your favorite IDE).
• Run the AbpUserVerificationByEmail.DbMigrator application to apply the migrations and seed the initial data.
• Run the AbpUserVerificationByEmail.HttpApi.Host application to start the server-side.
• Run the AbpUserVerificationByEmail.Blazor application to start the Blazor UI project.

Get your Google App Password

1. Navigate to wwww.google.com
2. Click on your profile photo of your Google account in the upper right corner of the page
3. Click Manage your Google Account
4. Click on the Security tab
5. In the Signing in to Google section, click on App Passwords. Enter your password and click Next
6. In the App passwords page, Select app (or Custom name) and Select Device (or Custom name)
7. Click Generate to generate your App password
8. Copy/paste your app password (remove blank spaces)

Create a basic EmailService

EmailService class

• Create a folder Email in the Domain project of your application.
• Add an EmailService.cs class to the Email folder. Copy/paste code below.

using System.Threading.Tasks;
using Volo.Abp.DependencyInjection;
using Volo.Abp.Emailing;
using Volo.Abp.Security.Encryption;

namespace AbpUserVerificationByEmail.Domain.Email
{
    public class EmailService : ITransientDependency
    {
        private readonly IEmailSender _emailSender;
        public IStringEncryptionService _encryptionService { get; set; }

        public EmailService(IEmailSender emailSender) => _emailSender = emailSender;

        public async Task SendEmailAsync()
        {
            var encryptedGoogleAppPassword = _encryptionService.Encrypt("your-Google-App-Password-here");
            await _emailSender.SendAsync("recipient-email-here", "Email subject", "This is the email body...");
        }
    }
}

CustomRegisterModel class

• Create a folder structure Pages/Account in the HttpApi.Host project of your application.
• Add a RegisterModel.cs file to the Account folder and paste in code below.

using System.Threading.Tasks;
using AbpUserVerificationByEmail.Domain.Email;
using Volo.Abp.Account;
using Volo.Abp.Account.Web.Pages.Account;

namespace AbpUserVerificationByEmail.HttpApi.Host.Pages.Account
{
    public class CustomRegisterModel : RegisterModel
    {
        private readonly EmailService _emailService;

        public CustomRegisterModel(IAccountAppService accountAppService, EmailService emailService) : base(accountAppService) => _emailService = emailService;

        protected override async Task RegisterLocalUserAsync()
        {
            await _emailService.SendEmailAsync();
            await base.RegisterLocalUserAsync();
        }
    }
}

Register.cshtml

• Add a Register.cshtml file to the Account folder.

@page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI
@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bootstrap
@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bundling

@using Microsoft.AspNetCore.Mvc.Localization
@using Volo.Abp.Account.Localization

@model AbpUserVerificationByEmail.HttpApi.Host.Pages.Account.CustomRegisterModel
@inject IHtmlLocalizer<AccountResource> L

<div class="card mt-3 shadow-sm rounded">
    <div class="card-body p-5">
        @* <h4>@L["Register"]</h4> *@
        <h4>My Custom Register Page</h4>
        <strong>
            @L["AlreadyRegistered"]
            <a href="@Url.Page("./Login", new {returnUrl = Model.ReturnUrl, returnUrlHash = Model.ReturnUrlHash})" class="text-decoration-none">@L["Login"]</a>
        </strong>
        <form method="post" class="mt-4">
            @if (!Model.IsExternalLogin)
            {
                <abp-input asp-for="Input.UserName" auto-focus="true"/>
            }

            <abp-input asp-for="Input.EmailAddress"/>

            @if (!Model.IsExternalLogin)
            {
                <abp-input asp-for="Input.Password"/>
            }
            <abp-button button-type="Primary" type="submit" class="btn-lg btn-block mt-4">@L["Register"]</abp-button>
        </form>
    </div>
</div>

Comment out the statement that injects class NullEmailSender in the Domain project

• In file AbpUserVerificationByEmailDomainModule.cs comment out the statement below.

// #if DEBUG
//    context.Services.Replace(ServiceDescriptor.Singleton<IEmailSender, NullEmailSender>());
// #endif

If we don't comment out the statement above, the application will not send emails as class NullEmailSender will be injected by the Dependency Injection.

Get the encrypted Gmail password

• In the EmailService, set a breakpoint on the line await _emailSender.SendAsync("...");
• Replace your-Google-App-Password-here with your generate Google App Password.
• Replace recipient-email-here with your email address.
• Start both the Blazor and HttpApi.Host project to run the application.
• Navigate to the Login page and click on the Register link.
• Fill in the form of the My Custom Register Page and click the Register button.
• Copy the value of the encryptedGoogleAppPassword when the breakpoint gets hit.
• Stop both the Blazor and the HttpApi.Host project.
• Open file appsettings.json in project HttpApi.Host
• Add a Settings section and update the Smtp Settings with the correct values.

"Settings": {
    "Abp.Mailing.Smtp.Host": "smtp.gmail.com",
    "Abp.Mailing.Smtp.Port": "587",
    "Abp.Mailing.Smtp.UserName": "your-gmail-email-address-here",
    "Abp.Mailing.Smtp.Password": "your-Google-App-Password-here",
    "Abp.Mailing.Smtp.Domain": "",
    "Abp.Mailing.Smtp.EnableSsl": "true",
    "Abp.Mailing.Smtp.UseDefaultCredentials": "false",
    "Abp.Mailing.DefaultFromAddress": "your-gmail-email-address-here",
    "Abp.Mailing.DefaultFromDisplayName": "Your-Custom-Text-Here"
  }

Check if you can send and receive an email with the EmailService

• Remove the IStringEncryptionService from the EmailService class as no longer needed.

public class EmailService : ITransientDependency
{
    private readonly IEmailSender _emailSender;

   public EmailService(IEmailSender emailSender) => _emailSender = emailSender;

    public async Task SendEmailAsync()
    {
      // TODO replace recipient-email-here
      await _emailSender.SendAsync("recipient-email-here", "Email subject", "This is the email body...");
    }
 }

• If you already registered the user, delete this user first in table AbpUsers in the database.
• Start both the Blazor and HttpApi.Host project to run the application.
• Navigate to the Login page again and click on the Register link.
• Fill in the form of the My Custom Register Page and click the Register button.
• If all goes well, you should receive an email sent by the EmailService and the user should have been registered.

WARNING: Make sure you don't publish your Google Credentials to GitHub or another Versioning System.

Change Index.razor of the Blazor project

• Open Index.razor and update div class="container" with the code below.

<div class="container">
    <div class="p-5 text-center">
        @if (!CurrentUser.IsAuthenticated)
        {
            <Badge Color="Color.Danger" class="mb-4">
                <h5 class="m-1"> <i class="fas fa-email"></i> <strong>User is NOT Authenticated!</strong></h5>
            </Badge>
        }

        @if (CurrentUser.IsAuthenticated && !CurrentUser.EmailVerified)
        {
            <Badge Color="Color.Warning" class="mb-4">
                <h5 class="m-1"> <i class="fas fa-email"></i> <strong>User has not NOT been verified by email yet!</strong></h5>
            </Badge>
        }

        @if (CurrentUser.IsAuthenticated && CurrentUser.EmailVerified)
        {
            <Badge Color="Color.Success" class="mb-4">
                <h5 class="m-1"> <i class="fas fa-email"></i> <strong>User is successfully verified by email!</strong></h5>
            </Badge>
        }
    </div>
</div>

• Start both the Blazor and HttpApi.Host project to run the application.
• Go to the Login form and login with the credentials of the new user. The user is logged in but not email verified.

Update SignIn IdentityOptions so a user has to confirm his email address

• Open file AbpUserVerificationByEmailHttpApiModule.cs in the AbpUserVerificationByEmail.HttpApi.Host project
• Add ConfigureIdentityOptions(context); as last statement in the ConfigureServices method.
• Add a private method ConfigureIdentityOptions just beneath the ConfigureServices method.

// import using statements
using Microsoft.AspNetCore.Identity;
using Microsoft.Extensions.DependencyInjection;

public override void ConfigureServices(ServiceConfigurationContext context)
{
    ConfigureLocalization();
    ConfigureIdentityOptions(context);
}

private void ConfigureIdentityOptions(ServiceConfigurationContext context)
{
    context.Services.Configure<IdentityOptions>(options =>
    {
      options.SignIn.RequireConfirmedAccount = true;
      options.SignIn.RequireConfirmedEmail = true;
      options.SignIn.RequireConfirmedPhoneNumber = false;
    });
}

Complete user registration flow

Add RegisterConfirmation and ConfirmEmail pages to the Pages\Account folder of the HttpApi.Host project

• Create a new file RegisterConfirmationModel.cs to the Pages\Account folder and copy/paste the code below.

using System.Text;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.AspNetCore.WebUtilities;
using Volo.Abp.Emailing;
using Volo.Abp.Identity;

namespace AbpUserVerificationByEmail.HttpApi.Host.Pages.Account
{

  [AllowAnonymous]
  public class CustomRegisterConfirmationModel : PageModel
  {
    private readonly IdentityUserManager _userManager;
    private readonly IEmailSender _sender;
    public bool DisplayConfirmAccountLink { get; set; }
    public string EmailConfirmationUrl { get; set; }

    public CustomRegisterConfirmationModel(IdentityUserManager userManager, IEmailSender sender)
    {
      _userManager = userManager;
      _sender = sender;
    }

    public async Task<IActionResult> OnGetAsync(string email, string returnUrl = null)
    {
      if (email.IsNullOrWhiteSpace()) return RedirectToPage("/Index");

      var user = await _userManager.FindByEmailAsync(email);
      if (user == null) return NotFound($"Unable to load user with email '{email}'.");

      // TODO Set to true if you want to display the Account/ConfirmEmail page
      DisplayConfirmAccountLink = false;
      if (DisplayConfirmAccountLink)
      {
        var userId = await _userManager.GetUserIdAsync(user);
        var code = await _userManager.GenerateEmailConfirmationTokenAsync(user);
        code = WebEncoders.Base64UrlEncode(Encoding.UTF8.GetBytes(code));
        EmailConfirmationUrl = Url.Page(
            "/Account/ConfirmEmail",
            pageHandler: null,
            values: new { userId = userId, code = code },
            protocol: Request.Scheme);
      }
      return Page();
    }
  }
}

• Create a new file RegisterConfirmation.cshtml to the Pages\Account folder and copy/paste the code below.

@page
@model AbpUserVerificationByEmail.HttpApi.Host.Pages.Account.CustomRegisterConfirmationModel
@{
    ViewData["Title"] = "Register confirmation";
}

<div class="card mt-3 shadow-sm rounded">
    <div class="card-body p-5">
        <h4>@ViewData["Title"]</h4>
        @{
            if (@Model.DisplayConfirmAccountLink)
            {
                <p>
                    This app does not currently have a real email sender registered, see <a
                        href="https://aka.ms/aspaccountconf">these docs</a> for how to configure a real email sender.
                    Normally this would be emailed: <a id="confirm-link" href="@Model.EmailConfirmationUrl">Click here to
                        confirm your account</a>
                </p>
            }
            else
            {
                <p>
                    Please check your email to confirm your account.
                </p>
            }
        }
    </div>
</div>

• Create a new file ConfirmEmailModel.cs to the Pages\Account folder and copy/paste the code below.

using System;
using System.Text;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.AspNetCore.WebUtilities;
using Volo.Abp.Identity;

namespace AbpUserVerificationByEmail.HttpApi.Host.Pages.Account
{
    [AllowAnonymous]
    public class CustomConfirmEmailModel : PageModel
    {
        private readonly IdentityUserManager _userManager;

        public CustomConfirmEmailModel(IdentityUserManager userManager) => _userManager = userManager;

        public async Task<IActionResult> OnGetAsync(string userId, string code)
        {
            if (userId.IsNullOrWhiteSpace()|| code.IsNullOrWhiteSpace()) return RedirectToPage("/Index");

            var user = await _userManager.FindByIdAsync(userId);
            if (user == null) return NotFound($"Unable to load user with ID '{userId}'.");

            code = Encoding.UTF8.GetString(WebEncoders.Base64UrlDecode(code));
            var result = await _userManager.ConfirmEmailAsync(user, code);
            return Page();
        }
    }
}

• Create a new file ConfirmEmail.cshtml to the Pages\Account folder and copy/paste the code below.

@page
@model AbpUserVerificationByEmail.HttpApi.Host.Pages.Account.CustomConfirmEmailModel
@{
    ViewData["Title"] = "Email Confirmed";
}

<div class="card mt-3 shadow-sm rounded">
    <div class="card-body p-5">
        <h4>@ViewData["Title"]</h4>
        <hr>
        Email Successfully Confirmed
    </div>
</div>

Update file RegisterModel.cs in HttpApi.Host project

using System.Linq;
using System.Text;
using System.Text.Encodings.Web;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Identity;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.WebUtilities;
using Microsoft.Extensions.Logging;
using Microsoft.Extensions.Options;
using Volo.Abp;
using Volo.Abp.Account;
using Volo.Abp.Account.Web.Pages.Account;
using Volo.Abp.Emailing;

namespace AbpUserVerificationByEmail.HttpApi.Host.Pages.Account
{
  public class CustomRegisterModel : RegisterModel
  {
    private readonly IAccountAppService _accountAppService;
    private readonly IEmailSender _emailSender;
    private Volo.Abp.Identity.IdentityUser _abpIdentityUser;

    public CustomRegisterModel(IAccountAppService accountAppService, IEmailSender emailSender) : base(accountAppService)
    {
      _emailSender = emailSender;
      _accountAppService = accountAppService;
    }

    public override async Task<IActionResult> OnPostAsync()
    {
      try
      {
        await CheckSelfRegistrationAsync();

        if (IsExternalLogin)
        {
          var externalLoginInfo = await SignInManager.GetExternalLoginInfoAsync();
          if (externalLoginInfo == null)
          {
            Logger.LogWarning("External login info is not available");
            return RedirectToPage("./Login");
          }
          await RegisterExternalUserAsync(externalLoginInfo, Input.EmailAddress);
        }
        else
        {
          await RegisterLocalUserAsync();
        }

        if (UserManager.Options.SignIn.RequireConfirmedAccount)
        {
          return RedirectToPage("RegisterConfirmation", new { email = Input.EmailAddress, returnUrl = ReturnUrl });
        }
        else
        {
          await SignInManager.SignInAsync(_abpIdentityUser, isPersistent: true);
          return LocalRedirect(ReturnUrl);
        }
       // return Redirect(ReturnUrl ?? "~/"); //TODO: How to ensure safety? IdentityServer requires it however it should be checked somehow!
      }
      catch (BusinessException e)
      {
        Alerts.Danger(e.Message);
        return Page();
      }
    }

    protected override async Task RegisterLocalUserAsync()
    {
      ValidateModel();

      var userDto = await AccountAppService.RegisterAsync(
          new RegisterDto
          {
            AppName = "YourAppName Here",
            EmailAddress = Input.EmailAddress,
            Password = Input.Password,
            UserName = Input.UserName
          }
      );

      _abpIdentityUser = await UserManager.GetByIdAsync(userDto.Id);

      // Send user an email to confirm email address      
      await SendEmailToAskForEmailConfirmationAsync(_abpIdentityUser);
    }

    protected override async Task RegisterExternalUserAsync(ExternalLoginInfo externalLoginInfo, string emailAddress)
    {
      await IdentityOptions.SetAsync();

      var user = new Volo.Abp.Identity.IdentityUser(GuidGenerator.Create(), emailAddress, emailAddress, CurrentTenant.Id);

      (await UserManager.CreateAsync(user)).CheckErrors();
      (await UserManager.AddDefaultRolesAsync(user)).CheckErrors();

      var userLoginAlreadyExists = user.Logins.Any(x =>
          x.TenantId == user.TenantId &&
          x.LoginProvider == externalLoginInfo.LoginProvider &&
          x.ProviderKey == externalLoginInfo.ProviderKey);

      if (!userLoginAlreadyExists)
      {
        (await UserManager.AddLoginAsync(user, new UserLoginInfo(
            externalLoginInfo.LoginProvider,
            externalLoginInfo.ProviderKey,
            externalLoginInfo.ProviderDisplayName
        ))).CheckErrors();
      }

      await SendEmailToAskForEmailConfirmationAsync(user);
    }


    private async Task SendEmailToAskForEmailConfirmationAsync(Volo.Abp.Identity.IdentityUser user)
    {
      var code = await UserManager.GenerateEmailConfirmationTokenAsync(user);
      code = WebEncoders.Base64UrlEncode(Encoding.UTF8.GetBytes(code));
      var callbackUrl = Url.Page("/Account/ConfirmEmail", pageHandler: null, values: new { userId = user.Id, code = code }, protocol: Request.Scheme);

      // TODO use EmailService instead of using IEmailSender directly
      await _emailSender.SendAsync(Input.EmailAddress, "Confirm your email",
          $"Please confirm your account by <a href='https://github.com/bartvanhoey/AbpUserVerificationByEmail/blob/gh-pages/{HtmlEncoder.Default.Encode(callbackUrl)}'>clicking here</a>.");
    }

  }
}

Test Registration flow and User Email Verification

• If you already registered a user, delete it first in table AbpUsers in the database.
• Start both the Blazor and HttpApi.Host project to run the application.
• Navigate to the Login page and click on the Register link.
• Fill in the form of the My Custom Register Page and click the Register button.
• Go to your email inbox and click on the clicking here link to confirm your account.
• Navigate to the Login page and enter your credentials. Click Login.

Et voilà! This is the result. The user's email address is successfully verified!

You can now force a user to confirm his email address before he can use your application.

Click on the links to find more about Sending Emails and the Account Module

Get the source code on GitHub.

Enjoy and have fun!

Introduction

In this article, I will show you how to customize the login page of a Blazor APB application

Source Code

The sample application has been developed with Blazor as UI framework and SQL Server as database provider.

The source code of the completed application is available on GitHub.

Requirements

The following tools are needed to be able to run the solution.

• .NET 8.0 SDK
• VsCode, Visual Studio 2022 or another compatible IDE
• ABP CLI version 8.0.0

Development

Creating a new Application

• Install or update the ABP CLI:

dotnet tool install -g Volo.Abp.Cli || dotnet tool update -g Volo.Abp.Cli

• Use the following ABP CLI command to create a new Blazor ABP application:

abp new AbpBlazorCustomizeLoginPage -u blazor -o AbpBlazorCustomizeLoginPage

Open & Run the Application

• Open the solution in Visual Studio (or your favorite IDE).
• Run the AbpBlazorCustomizeLoginPage.DbMigrator application to apply the migrations and seed the initial data.
• Run the AbpBlazorCustomizeLoginPage.HttpApi.Host application to start the server-side.
• Run the AbpBlazorCustomizeLoginPage.Blazor application to start the Blazor UI project.

Create a CustomLoginModel

• Create a folder structure Pages/Account in the HttpApi.Host project of your application.
• Add a CustomLoginModel.cs class to the Account folder.

using Microsoft.AspNetCore.Authentication;
using Microsoft.AspNetCore.Identity;
using Microsoft.Extensions.Options;
using Volo.Abp.Account.Web;
using Volo.Abp.Account.Web.Pages.Account;

namespace AbpBlazorCustomizeLoginPage.HttpApi.Host.Pages.Account
{
  public class CustomLoginModel : LoginModel
  {
    public CustomLoginModel(IAuthenticationSchemeProvider schemeProvider, IOptions<AbpAccountOptions> accountOptions, IOptions<IdentityOptions> identityOptions, IdentityDynamicClaimsPrincipalContributorCache contributorCache)
        : base(schemeProvider, accountOptions, identityOptions, contributorCache) { }
  }
}

• Add a Login.cshtml file to the Account folder.

@page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI
@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bootstrap
@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bundling

@using Microsoft.AspNetCore.Mvc.Localization
@using Volo.Abp.Account.Localization
@using Volo.Abp.Account.Settings
@using Volo.Abp.Settings

@model AbpBlazorCustomizeLoginPage.HttpApi.Host.Pages.Account.CustomLoginModel

@inject IHtmlLocalizer<AccountResource> L
@inject Volo.Abp.Settings.ISettingProvider SettingProvider

<div class="card text-center mt-3 shadow-sm rounded">
    <div class="card-body abp-background p-5">
        <img class="mb-4" src="https://raw.githubusercontent.com/bartvanhoey/AbpBlazorCustomizeLoginPage/main/~/images/abp-logo-light.svg" alt="ABP logo" width="115" height="55">
        <h4>@L["Login"]</h4>
        @if (await SettingProvider.IsTrueAsync(AccountSettingNames.IsSelfRegistrationEnabled))
        {
            <strong>
                @L["AreYouANewUser"]
                <a href="@Url.Page("./Register", new {returnUrl = Model.ReturnUrl, returnUrlHash = Model.ReturnUrlHash})" class="text-decoration-none">@L["Register"]</a>
            </strong>
        }
        @if (Model.EnableLocalLogin)
        {
            <form method="post" class="mt-4 text-left">
                <input asp-for="ReturnUrl" />
                <input asp-for="ReturnUrlHash" />
                <div class="form-group">
                    <input asp-for="LoginInput.UserNameOrEmailAddress" class="form-control" placeholder="Username" />
                    <span asp-validation-for="LoginInput.UserNameOrEmailAddress" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <input asp-for="LoginInput.Password" class="form-control" placeholder="Password"/>
                    <span asp-validation-for="LoginInput.Password" class="text-danger"></span>
                </div>
                <abp-row>
                    <abp-column>
                        <abp-input asp-for="LoginInput.RememberMe" class="mb-4" />
                    </abp-column>
                    <abp-column class="text-right">
                        <a href="@Url.Page("./ForgotPassword", new {returnUrl = Model.ReturnUrl, returnUrlHash = Model.ReturnUrlHash})">@L["ForgotPassword"]</a>
                    </abp-column>
                </abp-row>
                <abp-button type="submit" button-type="Primary" name="Action" value="Login" class="btn-block btn-lg mt-3">@L["Login"]</abp-button>
                @if (Model.ShowCancelButton)
                {
                    <abp-button type="submit" button-type="Secondary" formnovalidate="formnovalidate" name="Action" value="Cancel" class="btn-block btn-lg mt-3">@L["Cancel"]</abp-button>
                }
            </form>
        }
        @if (Model.VisibleExternalProviders.Any())
        {
            <div class="mt-2">
                <h5>@L["OrLoginWith"]</h5>
                <form asp-page="./Login" asp-page-handler="ExternalLogin" asp-route-returnUrl="@Model.ReturnUrl" asp-route-returnUrlHash="@Model.ReturnUrlHash" method="post">
                    <input asp-for="ReturnUrl" />
                    <input asp-for="ReturnUrlHash" />
                    @foreach (var provider in Model.VisibleExternalProviders)
                    {
                        <button type="submit" class="btn btn-primary m-1" name="provider" value="@provider.AuthenticationScheme" title="@L["GivenTenantIsNotAvailable", provider.DisplayName]">@provider.DisplayName</button>
                    }
                </form>
            </div>
        }
        @if (!Model.EnableLocalLogin && !Model.VisibleExternalProviders.Any())
        {
            <div class="alert alert-warning">
                <strong>@L["InvalidLoginRequest"]</strong>
                @L["ThereAreNoLoginSchemesConfiguredForThisClient"]
            </div>
        }
    </div>
</div>

Add some custom styles and images to the HttpApi.Host project

• add a file login.css to the wwwroot folder of the HttpApi.Host project.

.abp-background {
    background-color:  #e90052 !important;
}

• Open file AbpBlazorCustomizeLoginPageHttpApiHostModule.cs and update the ConfigureBundles() method.

 private void ConfigureBundles()
 {
    Configure<AbpBundlingOptions>(options =>
    {
        options.StyleBundles.Configure(
            LeptonXLiteThemeBundles.Styles.Global,
            bundle =>
            {
                bundle.AddFiles("/global-styles.css");
                bundle.AddFiles("/login.css");
            }
        );
    });
}

• add an assets/images folder to the wwwroot folder of the HttpApi.Host project and copy/paste the abp logo in the images folder. You can find a copy of the logo here.

Start both the Blazor and the HttpApi.Host project to run the application

Et voilà! This is the result.

You can now modify the login page, add your custom styles, custom images, etc.

Find more about ASP.NET Core (MVC/Razor Pages) User Interface Customization Guide here.

Get the source code on GitHub.

Enjoy and have fun!

Introduction

In this article, I will show you how can export data to an Excel file from the ABP framework.

Source Code

The sample application has been developed with Blazor as the UI framework and SQL Server as the database provider.

The source code of the completed application is available on GitHub.

Requirements

The following tools are needed to be able to run the solution.

• .NET 8.0 SDK
• VsCode, Visual Studio 2022 or another compatible IDE
• ABP 8.0.0

Development

Create a new Application

• Install or update the ABP CLI:

dotnet tool install -g Volo.Abp.Cli || dotnet tool update -g Volo.Abp.Cli

• Use the following ABP CLI command:

abp new AbpToExcel -u blazor -o AbpToExcel

Open & Run the Application

• Open the solution in Visual Studio (or your favorite IDE).
• Run the AbpToExcel.DbMigrator application to seed the initial data.
• Run the AbpToExcel.HttpApi.Host application that starts the API.
• Run the AbpToExcel.Blazor application to start the UI.

Create the ExportToExcelAppService ApplicationService

• Create a new folder ExcelExport in the Application.Contracts project.

• Add a new IExportToExcelAppService.cs file to the ExcelExport folder with following content.

using System.Threading.Tasks;
using Volo.Abp.Application.Services;

namespace AbpToExcel.ExcelExport
{
    public interface IExportToExcelAppService :  IApplicationService
    {
        Task<byte[]> ExportToExcel();
    }
}

• Open a command prompt in the Application project and run the following command to install the necessary NuGet packages.

    dotnet add package documentformat.openxml

• Create a new ExcelExport folder in the Application project.

• Add a new file ExcelFileGenerator.cs to the ExcelExport folder and copy/paste code below.

using System.IO;
using DocumentFormat.OpenXml;
using DocumentFormat.OpenXml.Packaging;
using DocumentFormat.OpenXml.Spreadsheet;

namespace AbpToExcel.ExcelExport
{
    public static class ExcelFileGenerator
    {
        public static byte[] GenerateExcelFile()
        {
            var memoryStream = new MemoryStream();

            using var document = SpreadsheetDocument.Create(memoryStream, SpreadsheetDocumentType.Workbook);
            var workbookPart = document.AddWorkbookPart();
            workbookPart.Workbook = new Workbook();

            var worksheetPart = workbookPart.AddNewPart<WorksheetPart>();
            worksheetPart.Worksheet = new Worksheet(new SheetData());

            var sheets = workbookPart.Workbook.AppendChild(new Sheets());

            sheets.AppendChild(new Sheet
            {
                Id = workbookPart.GetIdOfPart(worksheetPart),
                SheetId = 1,
                Name = "Sheet 1"
            });

            var sheetData = worksheetPart.Worksheet.GetFirstChild<SheetData>();

            var row1 = new Row();
            row1.AppendChild(
                new Cell
                {
                    CellValue = new CellValue("Abp Framework"),
                    DataType = CellValues.String
                }

            );
            
            sheetData?.AppendChild(row1);

            var row2 = new Row();
            row2.AppendChild(
                new Cell
                {
                    CellValue = new CellValue("Open Source"),
                    DataType = CellValues.String
                }
            );
            sheetData?.AppendChild(row2);

            var row3 = new Row();
            row3.AppendChild(
                new Cell
                {
                    CellValue = new CellValue("WEB APPLICATION FRAMEWORK"),
                    DataType = CellValues.String
                }
            );
            sheetData?.AppendChild(row3);

            document.Save();

            return memoryStream.ToArray();
        }
    }
}

• Add a new ExportToExcelAppService.cs file to the Application project and copy/paste the code below.

using System.Threading.Tasks;
using Volo.Abp.Application.Services;
using static AbpToExcel.ExcelExport.ExcelFileGenerator;

namespace AbpToExcel.ExcelExport
{
    public class ExportToExcelAppService : ApplicationService, IExportToExcelAppService
    {
        public Task<byte[]> ExportToExcel() => Task.FromResult(GenerateExcelFile());
    }
}

Run the HttpApi.Host application to see the export-to-excel endpoint in SwaggerUI.

Some JavaScript to download Excel files

• Create a js folder to the wwwwroot folder of the Blazor project.

• Add an exporttoexcel.js file to the js folder and copy/paste the code below.

function saveAsFile(filename, bytesBase64) {
    var link = document.createElement('a');
    link.download = filename;
    link.href = 'data:application/octet-stream;base64,' + bytesBase64;
    document.body.appendChild(link); // Needed for Firefox
    link.click();
    document.body.removeChild(link);
}

• Open the index.html file in the wwwroot folder of the Blazor project and add this line of code at the end.

<script src="js/exporttoexcel.js"></script>

Call the IExportToExcelAppService from the Blazor project

• Replace the content in the index.razor file with the following code.

@page "/"
@using AbpToExcel.ExcelExport
@inject IExportToExcelAppService ExportToExcelAppService
@inject IJSRuntime JsRuntime

<Row Class="d-flex px-0 mx-0 mb-1">
    <Button Clicked="@(ExportToExcel)" class="p-0 ml-auto mr-2" style="background-color: transparent"
            title="Download">
        <span class="fa fa-file-excel fa-lg m-0" style="color: #008000; background-color: white;"
              aria-hidden="true">
        </span>
        Click Me!
    </Button>
</Row>

@code {
    private async Task ExportToExcel()
    {
        var excelBytes = await ExportToExcelAppService.ExportToExcel();
        await JsRuntime.InvokeVoidAsync("saveAsFile", $"test_{DateTime.Now.ToString("yyyyMMdd_HHmmss")}.xlsx",
            Convert.ToBase64String(excelBytes));
    }
}

Start both the Blazor and theHttpApi.Hostproject to run the application

Run both the HttpApi.Host and Blazor applications and test the export to Excel file function.

Get the source code on GitHub.

Enjoy and have fun!