Refresh token in a NSwag C# Client

I use NSwag also to generate the API Clients in VS (using the VS extension REST API Code Generator for VS).

My approach was to override SendAsync using DelegatingHandler. In this handle is possible to catch the response of SendAsync and then manage to refresh the token. I found a kind of implementation in the docs, but in this answer you can find the source of my approach to implement the handle:

I used a global/static variable to store the refresh tokens and other authentication data required.

In my case I had no chance to use dependency injection (DI) as the answer I linked before. Then, before using the service, I create a HttpClient and I assign the CustomDelegatingHandler to this HttpClient.

Primers passos de NET6, C# i Linux

Crides a llibreries

Les crides fins ara es feien des PInvoke a la llibreria de ghostscript de windows. Amb linux no farà falta en si descarregar-afegir la llibreria. També el PInvoke amb linux hi ha unes particularitats 1.

Directoris

Els directoris també canvien. Per a tenir una generació de noms de directoris neta sense directoris a mà, hem de revisar les carpetes especials que fem ús a la API de Path de NET2

Llibreries d’imatges

El fet de no comptar amb System.Drawing dificulta molts dels procesaments de imatge dels que es feia us d’aquesta llibreria de sistema. Cal utilitzar alternatives com Imagesharp o Skiasharp3

Dependències terceres

L’entorn és amb docker/debian per a poder fer el PInvoke a Ghostscript correctament cal instal·lar totes les llibreries següents des el dockerfile:

RUN apt update -y && apt install -y -qq ghostscript && apt install -y -qq libgs9 && apt install -y -qq libgs9-common && apt install -y -qq libgs-dev

  1. https://developers.redhat.com/blog/2016/09/14/pinvoke-in-net-core-rhel ↩︎
  2. https://developers.redhat.com/blog/2018/11/07/dotnet-special-folder-api-linux ↩︎
  3. https://devblogs.microsoft.com/dotnet/net-core-image-processing/ ↩︎

Entity Framework Core i transaccions

Punts claus que cal tenir en compte abans de començar amb las transaccions amb EFCore

Hi ha alguna política activa de reintents (EnableRetryOnFailure):

  • En transaccions estaràs obligat a llançar-les com estratègies d’execució 1
  • Aquestes estratègies estan lligades a la base de dades i al seu proveïdor 2

Tinc MARS (Mutiple Active Results Sets) actius:

  • En transaccions no podràs fer servir punts de retorn (CreateSavePoint, Rollback to SavePoint) 3
  • Per això caldrà reduir els blocs que es fan canvis i evitar les indeterminacions que es poden vaure al fer SaveChanges sobre punts de retorn

  1. https://learn.microsoft.com/en-us/ef/core/miscellaneous/connection-resiliency#execution-strategies-and-transactions ↩︎
  2. https://learn.microsoft.com/en-us/dotnet/api/microsoft.entityframeworkcore.executionstrategyextensions.execute?view=efcore-7.0#microsoft-entityframeworkcore-executionstrategyextensions-execute(microsoft-entityframeworkcore-storage-iexecutionstrategy-system-action) ↩︎
  3. https://learn.microsoft.com/en-us/dotnet/api/microsoft.entityframeworkcore.executionstrategyextensions.execute?view=efcore-7.0#microsoft-entityframeworkcore-executionstrategyextensions-execute(microsoft-entityframeworkcore-storage-iexecutionstrategy-system-action) ↩︎

C# i async

Poques ganes:

bool method(){
   var result = classasync.method().Result;
   return result;
}

Venga va, una oportunitat:

async bool method(){
   var result = await classasync.method();
   return result;
}

Però es que no vull fer-lo asíncron:

bool method(){
   var resultTask = Task.Run(async () => await classasync.method());
   resultTask.Wait();
   return resultTask.Result;
}

Va, donem-li una oportunitat a l’asíncron:

async bool method(){
   var resultTask = Task.Run(async () => await classasync.method());
   resultTask.WaitAsync();
   return resultTask.Result;
}

Ajuda: https://ianvink.wordpress.com/2021/12/12/c-running-an-async-await-task-inside-a-non-async-method-code-block/

Sharepoint i Net 4.5

La API de sharepoint ha canviat i això requereix utilitzar oauth. Podem fer-ho amb el exemple que propociona al tutorial al docs:

https://learn.microsoft.com/en-us/sharepoint/dev/sp-add-ins/using-csom-for-dotnet-standard

  1. Ves al Portal de Azure AD: https://aad.portal.azure.com
  2. Selecciona Azure Active Directory i registres d’aplicacions a l’esquerra
  3. Selecciona New registration
  4. Introdueix un nom per a la aplicació i selecciona Register
  5. Aneu a Permisos de l’API per concedir permisos a la aplicació, seleccioneu “Add a permission”, tria SharePoint, Delegated permissions i selecciona AllSites.Manage
  6. Selecciona Concedir consentiment de l’administrador per consentir els permisos sol·licitats per l’aplicació
  7. Seleccioneu Authentication a l’esquerra
  8. Canvia “Allow public client flows” a Sí
  9. Selecciona Overview i guarda Application ID

Nota: si no seguíssim pas per pas les instruccions de configurar una aplicació a Azure ens podem trobar els següents errors:

A més a més poden sorgir altres errors:

  • El usuari no és vàlid, o no te renovada la contrasenya, o està inactiu: aquestes gestions no seràn possibles ja que no tenim previst fer prompt de la pàgina de AD per fer canvi de contrasenya, etc.

Després cal personalitzar la classe AuthenticationManager que donen al exemple ja que està pensada per a Net Core o superiors, però no NET Framework cal fer un seguit d’adaptacions. Aquí fetes, res del altre món:

Clickonce amb Net6

Funcions de System.Deployment.Application

Aquestes ja no estan disponibles amb NET6 [i als docs se fa referència] però afortunadament es poden simular via lectura de les variables d’entorn [informació en aquesta request a github] , dels fitxers de clickonce i dels directoris propis del desplegament.

Fent servir part del codi d’exemple amb de desplegament de una aplicació NET6 WPF com aquest luncher he fet una llibreria tipificant les constants del desplegament que més fem servir així com simular el update silenciós de clickonce que en realitat no és un altre cosa que instal·lar per enrere i apagar la aplicació un cop està instal·lada la nova versió (el restart de NET Framework ara no funcionarà):

https://github.com/Ruekov/ClickOnceNET6

MSBuild

La preferència de les aplicacions amb NET6 és preferible utilitzar la comanda dotnet msbuild el problema més important en aquest cas és que clickonce es fonamenta bàsicament en NET Framework 3.5 així que haurem d’utilitzar MSBuild.

Com passava ja amb MSBuild i clickonce, els perfils o les ordes de publicació es comporten diferent amb Visual Studio que executades des MSBuild. A més a més, tenim el handicap de que les eines de msbuildtasks de loresoft no acaben de funcionar bé.

Per aquesta raó utilitzant els perfils de publicació (Propierties/PublicationProfiles/ClickOnceProfile.pubxml) amb paràmetres postcompilació afegirem la tasca què:

  • Separi els fitxers de desplegament (setup.exe, xxxxx.application, launcher.exe i carpeta ApplicationFiles)
  • Copi un template del index.html per personalitzar-lo (de nou MSBuild no és capaç de fer-lo posant-hi el WebPageFileName a true)
  • Faci un ZIP amb els continguts del deplegament
	<Target Name="ZipPublishOutput" AfterTargets="ZipDeployment">
		<ItemGroup>
			<LauncherFile Include="$(PublishDir)\Launcher.exe"/>
			<ApplicationFile Include="$(PublishDir)\$(MSBuildProjectName).application"/>
			<SetupFile Include="$(PublishDir)\setup.exe"/>
			<ApplicationFiles Include="$(PublishDir)\Application Files\**\*.*"/>
		</ItemGroup>
		<Copy SourceFiles="$(ProjectDir)\index.html" DestinationFiles="$(PublishDir)\..\..\index.html"/>
		<WriteLinesToFile File="$(PublishDir)\..\..\index.html" Lines="$([System.Text.RegularExpressions.Regex]::Replace($([System.IO.File]::ReadAllText('$(PublishDir)\..\..\index.html')), ''{AppVersion}'', ''$(AssemblyVersion)''))" Overwrite="true" Encoding="Unicode" />
		<WriteLinesToFile File="$(PublishDir)\..\..\index.html" Lines="$([System.Text.RegularExpressions.Regex]::Replace($([System.IO.File]::ReadAllText('$(PublishDir)\..\..\index.html')), ''{AppName}'', ''$(MSBuildProjectName)''))" Overwrite="true" Encoding="Unicode" />
		<Copy
			SourceFiles="@(LauncherFile)"
			DestinationFolder="$(PublishDir)\..\..\"
        />
		<Copy
            SourceFiles="@(SetupFile)"
            DestinationFolder="$(PublishDir)\..\..\"
        />
		<Copy
			SourceFiles="@(ApplicationFile)"
			DestinationFolder="$(PublishDir)\..\..\"
        />
		<Copy
            SourceFiles="@(ApplicationFiles)"
            DestinationFolder="$(PublishDir)\..\..\Application Files\%(RecursiveDir)"
        />
		<RemoveDir Directories="$(OutputPath)" />
		<ZipDirectory SourceDirectory="$(PublishDir)\..\..\" DestinationFile="$(PublishDir)\..\..\..\PRO_$(MSBuildProjectName)_$(AssemblyVersion).zip" Overwrite="true" />
	</Target>

Aquest Target haurà de estar especificat al csproj del projecte:

	<Target Name="ZipDeployment">
	</Target>

Al mateix csproj podrem afegir una tasca per mantenir actualitzat als prefils de publicació el número de versió:

<Target Name="updateVersionCLickOnce">
    <PropertyGroup>
        <FilePath>.\Properties\PublishProfiles\ClickOnceProfile.pubxml</FilePathPRO>
    </PropertyGroup>
    <WriteLinesToFile File="$(FilePath)" Lines="$([System.Text.RegularExpressions.Regex]::Replace($([System.IO.File]::ReadAllText('$(FilePath)')), '&gt;\d+\.\d+\.\d+\.\d+&lt;', ''&gt;$(AssemblyVersion)&lt;''))" Overwrite="true" Encoding="Unicode" /> 
</Target>

Al ser una tasca que hauria de ser executada abans de començar la compilació de la publicació haurem de especificar-la al inici del XML del csproj:

<Project Sdk="Microsoft.NET.Sdk" InitialTargets="updateVersionCLickOnce">

Ara ja podem executar el msbuild generant la sortida correcta i esperada:

msbuild /t:Publish,ZipDeployment /p:DeployOnBuild=true /p:PublishProfile=ClickOnceProfile.xml /restore

Recursos

MQTT (I): Posar en marxa un servidor MQTT

Davant de varietat de servidors de MQTT triem per a l’exemple el Mosquitto.

1.- Baixar Mosquitto https://mosquitto.org/download

2.- Anar a la carpeta d’instal·lació i buscar mosquitto.conf. En cas que no existeixi, crear-lo:

3.- Posar la següent configuració: 

listener 1883
protocol mqtt
listener 9001
protocol websockets
## Authentication ##
allow_anonymous true
# password_file /mosquitto/conf/mosquitto.conf

4. Provar que funciona correctament arrancant-lo des CMD 

.\mosquitto.exe -c .\mosquitto.conf -v

Per a comprovar la connexió i el estat del servidor de MQTT podem fer servir un client bàsic de MQTT fet amb HTML. Com per configuració hem activat els websockets no ens farà falta res més que executar aquesta pàgina des el navegador (les llibreries Javascript és consulten a un CDN):


<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>mqtt</title>
    <script src="https://unpkg.com/mqtt@4.0.1/dist/mqtt.min.js"></script>
    <script>
        // An mqtt variable will be initialized globally
        console.log(mqtt)
    </script>
</head>
<body>

    <script>
        const options = {
            // Clean session
            clean: true,
            connectTimeout: 4000,
        }

        const publishMessage = (event) => {
            event.preventDefault();
            let addr = document.getElementById('addrText').value;
            let topic = document.getElementById('topicText').value;
            let msg = document.getElementById('messageText').value;

            const client = mqtt.connect(addr, options);

            client.publish(topic, msg, { qos: 0, retain: false }, function (error) {
                if (error) {
                    console.log(error);
                } else {
                    console.log('Published');
                }
            })

        }

        const subscribeMessages = (event) => {
            event.preventDefault();

            let addr = document.getElementById('addrTextSub').value;
            let topic = document.getElementById('topicTextSub').value;

            const clientSub = mqtt.connect(addr, options);

            clientSub.on('connect', function () {
                console.log('Connected')
                clientSub.subscribe(topic, function (err) {
                    if (err) {
                        console.log(error);
                    } else {
                        console.log('Subscribed');
                    }
                })
            });

            clientSub.on('message', function (topic, message) {
                // message is Buffer
                console.log();
                var table = document.getElementById("messagesReceived");
                var row = table.insertRow();
                var cell1 = row.insertCell(0);
                var cell2 = row.insertCell(1);
                cell1.innerHTML = new Date().toLocaleString();
                cell2.innerHTML = message.toString();
            });


        }

    </script>

    <form onsubmit="return publishMessage(event)">
        <fieldset>
            <legend>Send message</legend>
            <label for="addrText">Address:</label>
            <input type="text" id="addrText" name="addrText"><br><br>
            <label for="topicText">Topic:</label>
            <input type="text" id="topicText" name="topicText"><br><br>
            <label for="messageText">Message:</label>
            <input type="text" id="messageText" name="messageText"><br><br>
            <input type="submit" value="Submit">
        </fieldset>
    </form>
    <br><br>
    <form onsubmit="return subscribeMessages(event)">
        <fieldset>
            <legend>Subscribe</legend>
            <label for="addrTextSub">Address:</label>
            <input type="text" id="addrTextSub" name="addrTextSub"><br><br>
            <label for="topicTextSub">Topic:</label>
            <input type="text" id="topicTextSub" name="topicTextSub"><br><br>
            <input type="submit" value="Subscribe">
        </fieldset>
    </form>
    <br><br>
    <table id="messagesReceived">
        <tr>
            <th>
                Timestamp
            </th>
            <th>
                Message
            </th>
        </tr>
    </table>
</body>
</html>

Amb el codi anterior i els paràmetres de connexió que al ser per web sockets haurem de especificar protocol (wb) i port a l’adreça tal així: wb://localhost:9001. El resultat de enviar un missatge a la subscripció que triem hauria de ser aquesta:

5.- Feta la prova amb la configuració parem el terminal, farem que sigui un servei i així no necessitem tenir una sessió activa. Per a fer-lo cal executar el mosquito.exe install. En el cas que ja estigui instal·lat és recomanable desinstal·lar-lo executant mosquito.exe uninstall . Per a revisar el estat del servei ho podem fer des Control+Alt+Spr, pestanya Serveis i veure tots els serveis buscant el servei Mosquitto Broker:

Si el servei no funcionés reviseu que a les variables de entorn el MOSQUITTO_DIR és el de instal·lació.

Amb això ja podem iniciar les proves de MQTT amb aquest i altres entorns, recordant que els següents passos amb el servidor haurien de ser dotar-lo de seguretat (autenticació i encriptació del canal).

Enroutament i React

Tenir l’aplicació ben enroutada no significa què després el enllaç amigable sigui funcional al 100%: si no es dins del context de la aplicació React. Per a aquesta raó s’haurà de dir al servidor HTTP que redireccioni qualsevol petició diferent a la ruta de index a la mateixa què el propi index que executa la aplicació.

En alguns casos com pot ser ASP MVC amb l’extensió de SPA, el propi host IIS o autohost de NET Core es configura per redireccionar aquestes peticions. En NodeJS passa exactament el mateix al desplegar-lo com una aplicació React Client.

En altres entorns no es ben bé així, com pot ser Apache o Azure Static Web Apps.

Apache:

Caldrà crear un fitxer .htaccess pròpi a la carpeta on es situï el build i dins caldrà especificar les següents línies

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /subdirectory
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>

Azure Static Web Apps:

Caldrà crear un fitxer amb el nom staticwebapp.config.json i afegir les següents línies de configuració:

{
    "navigationFallback": {
        "rewrite": "index.html",
        "exclude": ["/static/*"]
    },
    "mimeTypes": {
        ".json": "text/json"
    }
}

Per a més informació:

Entitats amb fitxers: tot junt o per parts?

Hi ha dues propostes per a pujar (actualitzar-les també) unes entitats que porten vinculades a la imatge:

  • [POST] /api/v1/imatge amb un cos html serialitzat tipus { desciption: “”, tags: [“”, “”,””] }
  • [POST] /api/v1/image/{id}/upload amb un multipart/form-www image=@adreçaImatge

Amb:

  • [POST] /api/v1/imatge amb un multipart/form-data description=”” ; tags=[“”,””,””]; image=@adreçaImatge

I aquí és on premia qui ha de fer ús de la API, quina utilització se li dona. El fet de treballar amb entitats sempre és com allò de que per a un martell tot són claus. Hauríem de separar:

  • Amb quina recurrència es pujaran imatges o serà un fet únic?
  • Les aplicacions clients volen crear l’entitat amb la imatge?
  • Les aplicacions clients com processen els multipart/form-data?

De les tres preguntes, les dues primeres són de disseny i la tercera d’arquitectura. Per allò del que els backends poden viure a esquenes de la realitat si ofereixen unes portes definides. Són importants perquè poden encorsetar bastant el processament de les dades (no és el mateix un form què un body serialitzat).

Amb NodeJS tenim multer què a mode intermediari (middleware) ens pot emmagatzemar la imatge en un directori, i posar-nos les dades del form-data al body com a propietats. En el següent exemple es fa servir la segona opció:

routes.js

  app.post("/v1/imatge", imatgeController.uploadImg,  imatgeController.save);

imatgeController.js

const multer = require('multer');

const fs = require('fs');

const imageStorage = multer.diskStorage({
  destination: function (req, file, cb) {

    if (!fs.existsSync('./imageUploads')) {
      fs.mkdirSync('./imageUploads');
    }

    cb(null, './imageUploads');
  },
  filename: function (req, file, cb) {
    cb(null, file.originalname);
  }
});

exports.uploadImg = multer({ storage: imageStorage }).single('image');
exports.save = async (req, res) => {

var entity = { description: req.body.description, image: req.file.filename, tags: req.body.tags };
...
}

El fet de que podem sobrecarregar amb diverses funcions les rutes també ens facilitarà altres tipus de processaments (autenticació, per exemple), però això ja és cosa més de NodeJS i ExpressJS.

La solució ens sobrecarrega bastant el què és la entitat: la carrega de imatge per un costat, què pot tenir més lògica (compressió, tractament, desplaçament a un lloc remot) i pot fer més pesat del que és en si el pujar unes dades per a una entitat.

Per a fer un punt comú entre client i servidor, el codi swagger.json descriurà els camps com a formData parant especial atenció en el type:

"/v1/imatges": {
      "post": {
        "tags": [
          "imatges"
        ],
        "summary": "Afegir una imatge",
        "description": "Ruta per afegir una nova imatge",
        "consumes": [
          "image"
        ],
        "parameters": [
          {
            "name": "imatge",
            "in": "formData",
            "description": "afegir nova imatge",
            "required": "true",
            "type": "file"
          },
          {
            "name": "descripcio",
            "in": "formData",
            "description": "descripció de la imatge",
            "required": "true",
            "type": "string"
          }

        ], 
...

Per al client, fem l’exemple de un swagger tipificat i l’utilitzem en un client, en aquest cas, NSwag amb destí C#. El resultat és una funció utilitzable per aquest client:

        /// <summary>Create a banner</summary>
        /// <param name="image">Adding new publication.</param>
        /// <param name="name">Banner name</param>
        /// <param name="isDisabled">Is disabled?</param>
        /// <param name="analyticCode">Analytic Code</param>
        /// <exception cref="SwaggerException">A server side error occurred.</exception>
        public System.Threading.Tasks.Task Banners4Async(FileParameter image, string name, bool isDisabled, string analyticCode)
        {
            return Banners4Async(image, name, isDisabled, analyticCode, System.Threading.CancellationToken.None);
        }

Quina seria la diferència de fer-lo per separat? En un altre post…

Trampes al solitari

Dinahosting per defecte té configurats els servidors per a obligar a rebre peticions des clients web.

Una solució és muntar les capceleres amb aquesta informació:

req.Accept = “text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8″;
req.UserAgent = ” Mozilla/5.0 (Windows NT 6.1; WOW64; rv:25.0) Gecko/20100101 Firefox/25.0″;