Was tun, wenn kein geschützter SSL TLS Kanal erstellt werden kann?

Du erhältst die Fehlermeldung „Es konnte kein geschützter SSL TLS Kanal erstellt werden“? Dann herzlich willkommen zum heutigen Beitrag, wo ich Dir eine mögliche Lösung zeigen werde. Ich selbst habe diese Fehlermeldung gestern bei einem Kundenprojekt bekommen, aber wusste zum Glück, was zu tun ist. Wenn man die Fehlermeldung das erste Mal sieht, kann man schon daran verzweifeln..

Als Video ansehen

Keine Lust auf viel Text? Kein Problem, schau Dir einfach das kurze Video an und löse Dein Problem in wenigen Sekunden.

Im Endeffekt ist die dazugehörige Lösung – egal ob bei VB.NET oder C# Applikation – häufig vermeintlich einfach. Grundsätzlich stolpert man gängiger weise in Kombination mit Web-Requests über diese Fehlermeldung. Das liegt natürlich daran, dass dort für das HTTP (S) Protokoll, eine gesicherte Verbindung aufgebaut wird. Schauen wir uns das im nächsten Schritt einmal genauer an!

Fehler nachstellen – „Konnte keinen SSL Kanal erstellen“

Gehen wir im nächsten Schritt einmal hin und stellen diesen Fehler der problemhaften SSL-Kanal-Erstellung nach. Aus dem Kopf heraus kann ich da glaube ich ein relativ einfaches Szenario zusammenstückeln. Beachte, dass es vermutlich noch einige andere Situationen geben wird, ich aber Diese hier konkret weiß..

Den Anfang findet das Ganze wie oben erwähnt – denke ich – am besten bei der NET Framework Version. Schalte also zunächst einfach die NET Framework Deines Projektes (wenn möglich) auf z. B. Version „4„. Im Video verwende ich hier ein älteres Projekt, wo ich den Fehler auch schon einmal hatte, wundere Dich also bitte nicht über den alten Code.

NET Framework Version des Projekts umstellen

💡 Hinweis: Verwende zum Testen ggf. ein separates Projekt, um nichts in Deinem aktuellen Projekt zu zerstören!

Um die .NET-Framework Version Deines Projektes umzustellen, kannst Du im Visual Studio einfach oben auf „Projekt->Eigenschaften“ gehen.

Gehe danach links auf den Reiter namens „Anwendung“ und wähle unter dem Punkt „Zielframework“ z. B. die Version 4. Anschließend wirst Du ggf. darum gebeten, die kommende Meldung zu bestätigen, Diese bestätigst Du dann einfach. Im nächsten Schritt wird dann mehr oder weniger alles durch Visual Studio umgestellt.

Aufruf und Exception

Im nächsten Schritt rufen wir dann einfach mal eine die Fehlermeldung (voraussichtlich) triggernde Funktion / Methode auf. Welche das ist / sind? Im ersten Schritt die Funktionen, Welche mit dem Netzwerk zu tun haben. Als Beispiel deklarieren wir daher einfach einen simplen „WebClient“ auf Form-Ebene und instanziieren Ihn im Konstruktor:

Public Class Form1

    Private WithEvents _webClient As WebClient

    Sub New()
        _webClient = New WebClient()
    End Sub

End Class

public class Form1

    private WebClient _webClient;

    public Form1()
    {
        _webClient = new WebClient();
    }

End Class

Danach rufe ich z. B. die „DownloadString„-Methode des „WebClients“ mit einer passenden URL auf. Dabei kann es sich wie in meinem Beispiel, um eine normale Textdatei handeln, Welche nur einen schmalen String beinhaltet. Mein Aufruf sah dort z. B. wie folgt aus:

Dim version = ""
Try
  version = wc.DownloadString("<URLToTextFileForExample>")
Catch ex As Exception
  ' catch the error..
End Try

Anschließend hat der Code dann den benannten Fehler getriggert: „Es konnte kein geschützter SSL / TLS Kanal erstellt werden“:

Wichtig: In meinem Fall war meiner Meinung nach auch noch ein weiterer / anderer Aspekt wichtig. Es handelte sich bei dem auf der Domain verwendeten SSL Zertifikat, um ein durch LetsEncrypt generiertes Zertifikat!

Die Lösung!

Ich will mich mit diesem Beitrag durchaus nicht als „Profi“ in diesem Gebiet darstellen, jedoch möchte ich im Sinne Deiner Zeit-Einsparung berichten, wie es letztlich bei mir funktionierte. Selbstverständlich habe ich – so wie Du vermutlich vor einigen Sekunden – im Internet nach Problemlösungen gesucht.

Leider haben vorgeschlagene Methoden nicht funktioniert – bis ich dann die gleich Folgende heraus hatte. Es wurde vorgeschlagen, Code wie diesen hier, vor dem ersten Netzwerk-Aufruf zu setzen:

ServicePointManager.Expect100Continue = True
ServicePointManager.SecurityProtocol = SecurityProtocolType.Tls
ServicePointManager.ServerCertificateValidationCallback = Function(sndr, cert, chain, sllPolicyErrors) True

Dafür würde sich natürlich ein Einstiegspunkt des Programmes, wie z. B. der „Load„-Ereignishandler der ersten Form, oder so etwas wie eine „Main-Methode“ eignen. Allerdings klappte das wie oben bereits erwähnt leider nicht wirklich.. Nach einiger Fummelei, habe ich dann herausgefunden, dass ich für meinen Fall nur eine Codezeile benötigte.

Ebenso musste ich das NET Framework hochsetzen, um die passende Codezeile verwenden zu können. Setze also Dein Zielframework (wenn hoffentlich möglich) auf „4.5“ und verwende diesen Code. Man beachte das hinten geänderte „Tls“ zu „Tls12“, Welches scheinbar erst ab NET Framework 4.5 (und laut Doku ab Win 7) verfügbar ist.

ServicePointManager.SecurityProtocol = SecurityProtocolType.Tls12

Fazit

Am Ende dieses Beitrages angekommen können wir nun also folgendes Fazit ziehen. Wenn man mit Netzwerk-Anfragen in Kombination mit einem selbst signierten SSL Zertifikat arbeitet, kann es Probleme geben. Besonders unsere verwendete NET Framework Version (4.0) hatte ein bekanntes „Problem„, bzw. einen bekannten Fehler.

Um diesen Fehler „Es konnte kein geschützter SSL TLS Kanal erstellt werden“ zu lösen, muss man das Transport-Protokoll umstellen. Dies kann man erledigen, indem man die Eigenschaft „SecurityProtocol“ der „ServicePointManager„-Klasse auf „Tls12“ setzt. Die Umstellung muss allerdings (irgendwo logisch) vor dem ersten netzwerkbezogenen Aufruf stattfinden.

Weiterführende Links

• Einen alternatives Webbrowser-Control in VB NET verwenden
• Ein VB NET DataGridView füllen
• Dein eigenes Plugin-System mit Visual Basic .NET

Der Beitrag Fehler „Es konnte kein geschützter SSL TLS Kanal erstellt werden“ lösen erschien zuerst auf Robert Skibbe.

Hacking a Webshop

So you are interested in hacking a webshop, or in software development security in general?

I welcome you to todays post on application security and how to use or protect against this special case.

In this example you can simply follow along by just downloading and executing the example code.

Especially when i first started programming, I found a lot of code like the one you will see.

Easy cart items just being added without enough checking or protection against some malicious boi.

I’m still working on this article, so more content will come in a few hours 🙂

Here comes the big thing – even today some shops will still be programmed like that..

So hacking a webshop like this will still be possible for some of those badly programmed ones.

On my journey i continiously asked myself the „why“ behind that problem.

Most of the time, you will potentially find the same answer as i already did.

We need to consider the different aspects, or the different roles here:

• the customer, ordering the software
• a developer actually creating that piece of application
• the users using that software

How bad software is created – the roles

When thinking about that bad software which is actually vulnerable to a hacker, we have to consider the involved roles.

As i already mentioned above, there are 3 roles involved, but one isn’t really responsible in the process itself, so..

For sure, this also depends on the type of project and if theres something like a special beta phase, etc.

Let’s have a basic look at those roles and see what we can like expect or take into consideration.

🧍 An end user

The end user can like report some problems he found, but for security thingys, this mostly won’t be the case.

You can’t expect a normal user to actually tell you about your security.

He won’t get in touch in a (any) way, where he could really understand or judge that thing.

Obviously it isn’t his responsibility either, so forget about that as quick as possible!

You can be glad, if an end user actually takes the time to report a problem he faced.

This is great, because you then have the nice chance to actually fix that.

End users just want one thing, or well we could say 3 things – use your god damn (sorry) app as:

• easy
• intuitive
• and bug free

as possible – full stop!

So if that happens to you, be glad your customer did that and give him some treat!

In the past i pretty much contacted every company where i faced some problem by email.

Some of them were nice and gave like some sort of bonus, some of them were ignorant.

There even were some companies, where they just got pissed and argued, but well..

Don’t be that last kind of company!

💸 The (devs) customer

Now we are getting to the first interesting role as this one probably made this whole situation start.

There is one guy or even a whole company with a plan of a software (hopefully they have a plan..).

They may want to outsource that software due to missing time inside the original team.

It could also be another type of person – like a private one – which has an idea.

In a typical scenario, the problem we are discussing here is mostly faced, when hiring a (maybe) unexperienced freelancer.

As I have seen it in my past a lot as well, this also counts for like small agencies.

Even if most persons think, that about everything is the developers fault, theres more to consider.

Especially he customer has a chance to control this process and the outcoming quality as well.

Why/How? Well, let me do one quick example:

If you want a ferrari and you want to „vroom, vroom“, then you will have to pay for that.

The problem here with „little“ customers is, that they commonly want that big „Amazony“ application.

All the possibilities and strengths and more, but they only want to pay for like a basic „add, edit, delete, list“-thingy.

Furthermore this also sometimes applies to „bigger“ companies, as they want to save money as well..

Obviously that won’t work..

👨‍💻 Developer (developing firm)

The last role is likely to be the most responsible one, as important and fundamental tasks lie on its shoulders.

However most projects start with the actual contact from the developers to the customer.

This can be done by like some freelancing platform, creating the basic „frame“ around that project.

You can believe me when i say, that at this point there can already be so many things going wrong.

I’m talking about budget, milestones, communication between the different parties, the final deadline and more..

But i think that’s part of another big story, so I’ll just continue..

Going over the experience of the working team, next to the experience and tools of the individual developer.

The vulnerable spot that you will see in a moment, is mostly created by inexperienced devs.

For sure, such big mistakes can also be created through being close to a deadline and whatsoever reason.

I mean this won’t be any excuse, because:

• either you have that budget you need to accomplish the work
• or you’ve told the client, that this is not realistic and therfore won’t work

Jumping in the code of hacking a webshop

Before we actually start talking about the code behind, I would recommend downloading the code.

To do so, go to the bottom of the page and download that „crapshop.zip“ file, or just the link here!

Extract the containing project folder to a location of your desire and we are like ready to go.

Prolog

Keep in mind that our focus in this blog post is to actually understand and hack the crappy webshop itself.

So I pretty much won’t use time on explaining how to setup the Slim web application (API), or the concepts.

I will concentrate on the specific web api route and the process of adding a product to our cart.

Please also keep in mind, that there are so many other things which could be improved.

I just tried to come up with a quick, usable example, nothing more, so..

Prerequisites

Before you are able to start or execute the code, you should have some tools ready:

• The used package manager composer (weblink to composer)
• A code editor like Visual Studio Code
• Installed PHP binaries e. g. through WinNMP or XAMPP, or raw..

Installing dependencies with composer

In the first step you need to use the composer package manager to install dependencies.

You can do so by opening the project folder in like a Visual Studio Code terminal, or the normal console.

Then go ahead and execute the following command to install the dependencies:

composer install

Starting the app

After everything is installed successfully you can start the app using the native PHP server.

To run that native PHP server you can execute this command here:

php -S localhost:8000 public/index.php

It will basically start the server at the „public/index.php“ location, with „localhost“ as host and listening port 8000.

After that, visit „https://localhost:8000“ in your favourite browser and you will see the webshop starting page:

A little product search page

After you have started the server, you can now navigate to the product search page.

Do so by clicking the „Products“-link and you will see a basic page with listed products.

Just for fun I’ve implemented a little search functionality, but this isn’t really necessary here.

Let’s see what happens, if you click on that „add to cart“-button on the listing page:

As you can see there is a POST request being executed to our backend at „/api/cart/add-product“.

The clientside code

Let’s take a look at the code which triggered the request (you can find it in „public/js/page_products.js“):

document.addEventListener('click', function (e) {
  if (e.target.classList.contains('btnAddToCart')) {
    addProductToCart(e.target);
  }
});

function addProductToCart(btnAddToCart) {
  var id = parseInt(btnAddToCart.dataset.id);
  var price = parseFloat(btnAddToCart.dataset.price);
  var xhr = new XMLHttpRequest();
  xhr.open("POST", '/api/cart/add-product', true);
  xhr.setRequestHeader('Content-Type', 'application/json');
  // xhr.onload = function () {
  //   location.reload();
  // };
  xhr.send(JSON.stringify({
    id,
    price,
  }));
}

There isn’t much more going on than registering that click-callback on the document and reacting to that.

If an element with our „.btnAddToCart„-class is clicked, we respond to that by executing the „addProductToCart“-function.

The function itself will pull the id and the price from the corresponding „data“-attribute.

After that, it will send a new „XMLHttpRequest“ to the server and that’s it.

If you want to refresh the page after doing so, you can uncomment the lines with „onload“.

I’ve omitted it on purpose as this will mostly clear the network history and you won’t be able to see the request.

The dangerous web api endpoint

After explaining the client code which has been executed above, we will now focus on the server side.

You may have already guessed the problem in our case, but let’s dive deeper anyways.

Go ahead, step into your code editor and open the „src/Controller/CartController.php„-file.

When you have the file ready, focus on the „addProduct“-function, which represents the corresponding endpoint.

The code explained

In the first two lines, we will pull the json contents sent by javascript:

    $json = $request->getBody();
    $data = json_decode($json, true);

Then we’re checking, if the needed data – product id and price – have been provided.

If those are not present, we will respond with a nice 400 Http response status, which means „bad request“.

Additionally there will be some code identifying what the actual problem was:

    if (!array_key_exists('id', $data)) {
      return $response
        ->withJson([ 'code' => 'ID_MISSING' ], 400);
    }

    if (!array_key_exists('price', $data)) {
      return $response
        ->withJson([ 'code' => 'PRICE_MISSING' ], 400);
    }

Next we are fetching and parsing the id, to check if it’s kinda correct, so like above „0“.

Sure this could be done better, but this is enough for this purpose..

    $id = intval($data['id']);
    if ($id <= 0) {
      return $response
        ->withJson([ 'code' => 'INVALID_ID' ], 400);
    }

After that, we are fetching the product information from our small „ProductService“-class.

This enables us checking, if that product is actually a product from our „database“.

    $product = $this->productService->getProductById($id);
    if (!$product) {
      return $response
        ->withJson([ 'code' => 'PRODUCT_NOT_FOUND' ], 404);
    }

NOW the important and dangerous part starts, which is accepting the price from the client side.

Later I’ll sum up how to correctly work with that price and what you should also take into consideration.

I mean I added the small thingy, that we are at least checking, that the price can’t be negative, so „it’s something“.

    $price = floatval($data['price']);
    if ($price <= 0) {
      return $response
        ->withJson([ 'code' => 'INVALID_PRICE' ], 400);
    }

Then we are doing some basic cart stuff like fetching the cart from the session (which could also be done by database).

We are also checking if the product has already been added to that cart.

If it has been already added, we just increment this quantity for now, if not, it’s added in general.

    $cart = $this->session->get('cart') ?? [];

    $alreadyExists = null;
    foreach ($cart as $key => $value) {
      $item = $cart[$key];
      if ($item['id'] === $id && $item['price'] === $price) {
        $alreadyExists = $key;
        break;
      }
    }

    if ($alreadyExists !== null) {
      $cart[$alreadyExists]['quantity'] = $cart[$alreadyExists]['quantity'] + 1;
    } else {
      $cart[] = [
        'id' => $id,
        'title' => $product['title'],
        'thumbnail' => $product['thumbnail'],
        'quantity' => 1,
        'price' => $price,
      ];
    }

In the last step we are just setting the new value for our cart inside the session and we are returning a response to the client.

    $this->session->set('cart', $cart);

    return $response;

Manipulating that request – hacking a webshop

It’s now time to get to the final point of creating our own version of that request.

To work on that we need to analyse the request being sent and provide our own data.

Then we need to re-send that request with our own data being accepted by the server.

The easiest way to do so is by opening that network tab of the webbrowser console, again.

Opening the browsers developer tools

Visit the product list page once again and open the browser console with F12.

Go to the network tab and then execute the code by clicking that „add to cart„-button.

Now you could inspect the request itself by just left clicking it:

We already know which data is send, therefore we don’t really need to inspect the „payload„-tab to get an idea.

Now the easiest way to test a custom request is, to right click that „add-product“ on the left, which opens a context menu.

There you can select the „Copy“ and „Copy as fetch“ items – to copy the fetch instructions into your clipboard.

Now, in the final step, you can then copy the clipboard contents to your „Console„-tab.

There you can actually make your custom changes like changing the product id which you want to put in your cart.

The most important thing here is, we can change the price, too!

Executing with manipulated request data

So go ahead and do something like this here:

I changed the product id to „3“ and the price to something low like „5“.

Hit enter on your keyboard while the console is focused and the request will be executed.

After that you can visit the cart and you will see the expensive item now as a very cheap one!

In the end, this is how our final cart screen looks like:

Conclusion – Hacking a webshop

So at the end of this interesting blog post, i think we can agree on one thing: Never trust the client side!!

For normal users, the client side may be the bright side of life, but not for us as developers!

Next to many other things which could’ve been improved or being implemented at all, theres the dangerous main thing.

The product price gets send by the client and trusted by the server, which is (in mortal combat language) „fatality“!

Instead of this, you should actually have some sort of dataset in your database, to pull the price at request.

The client saying: „I want that product in my cart“ is not a problem at all.

Next thing you should keep in mind when designing/creating such a type of thing also has to do with like pricing.

Even if you pull that price from the database at the moment the customer puts it into the cart, think about changes.

When some guy using like a CRM to change that price while a customer has the product inside its cart, that could also be a problem.

Downloads

Related posts

• Hacking a NET Application

Der Beitrag 🕵️ Hacking a Webshop – don’t fall for this common trap! erschien zuerst auf Robert Skibbe.

Wie Du einen NodeJS Http Server erstellen kannst, erfährst Du im heutigen Beitrag.

Ich verzichte der Einfachheit halber und aufgrund der meiner Meinung nach sinnvollen Trennung auf weitere Frameworks.

Für den Bau eines NodeJS Http Servers werden wir also nur die bereits vorhandenen Bordmittel von Node verwenden.

Grundprinzipien eines (NodeJS) Http Servers

Bevor wir in den Code und Weiteres starten würde ich sagen, dass wir uns erstmal den Basics des Webs widmen.

Vielleicht ist Dir das Grundprinzip von Webservern bereits bekannt, dann bist Du natürlich herzlich eingeladen diesen Abschnitt zu überspringen.

Für alle Anderen und die somit eventuellen Neulinge unter den Besuchern, schauen wir uns aber den Ablauf eines Webservers nochmal an.

Das Grundprinzip lässt sich auf viele Bereich übertragen, also nicht nur auf das simple „Serven“ (Bereitstellen) einer Datei auf Anfrage.

Wenn Du Dir das Bild anschaust, siehst Du eine (oder mehrere) typische Situatione(n).

Ablauf einer Anfrage

Links befinden sich die verwendeten Geräte, wie z. B. Laptops & Desktop PCs, Smartphones und Tablets.

Diese rufen z. B. in Ihrem Browser eine bestimmte Website/Adresse auf, Sie senden also eine Anfrage an den Server.

Danach schaut der Server nach seiner entsprechenden Logik, um die jeweilige Anfrage zu beantworten.

Dabei sendet „er“ verschiedene Daten in seiner Antwort wie z. B. den Kopf, oder den Body.

Der Inhalt der Antwort hängt natürlich unter Anderem stark von der Gestaltung des jeweiligen „Endpunktes“ und der allgemeinen Server-Infrastruktur ab.

Handelt es sich dabei um eine Datei sieht die Antwort anders aus, als wenn man nur über eine Schnittstelle diverse Kunden abrufen möchte.

Das simpelste Beispiel

Ich denke es ist an der Zeit, für ein wirklich (wirklich) simples Beispiel eines Node Http Servers.

Schauen wir uns erstmal an, was wir aus der Standard-Bibliothek von Node (Module) verwenden können.

Wer sucht wird relativ schnell fündig und stößt auf das gute alte „Http“-Modul – wer hätte es gedacht.

Das Http-Modul

Um das „Http“-Modul zu „importieren“ und verwenden zu können, legen wir wie üblich eine Konstante mit jeweiligem Namen an.

Des Weiteren brauchen wir noch die für Node Programme typische „require„-Funktion, welche das Modul letztendlich importiert und als Rückgabewert zurückgibt.

Solche Module können wir natürlich auch selbst schreiben, allerdings ist das ein Thema für einen späteren Beitrag!

Legen wir also nun die Konstante an und verwenden Diese anschließend:

const http = require('http')

Natürlich verwende ich hier eine Konstante, statt einer normalen Variable (var) oder „scoped“ Variable (let), da sich der dort drin stehende Wert nicht verändern wird/soll!

Der Request-Handler

Danach erstellen wir einen Request-Handler, Welcher jeweils einen Request (eine Anfrage an den Server) verarbeiten wird.

Dieser Handler ist letztendlich nichts anderes als eine kleine Funktion, Welche 2 Parameter mitgeliefert bekommt – der Request und die Response.

Damit bekommen wir die Möglichkeit Daten vom Request zu lesen, bzw. Daten in die Response zu schreiben.

const requestHandler = function (req, res) {
  res.writeHead(200, { 'Content-Type': 'application/json' })
  res.write("NodeJS Http Server")
  res.end()
}

Server erstellen und ausführen

Im letzten Schritt des einfachen Beispiels müssen wir nur noch einen „Server“ mit Hilfe der „createServer„-Funktion des „Http“-Moduls erstellen.

Danach können wir dem Server einfach nur noch sagen: „Hör‘ zu!“ und schon läuft das Ding!

Wir legen zuerst zwei Konstanten fest, Welche eine kleine Art Konfiguration widerspiegeln.

Dabei sagen wir dem Programm, auf welchen Port bzw. auf welchen Host–Namen es lauschen soll:

const port = 8000
const host = 'localhost'

Nun erstellen wir den Server indem wir einfach wie angekündigt die „createServer“-Funktion des „Http“-Moduls aufrufen.

Dann rufen wir nur noch die „listen„-Funktion auf und schön „hört“ unser Server auf ankommende Anfragen.

Um eine Art Status auszugeben, geben wir der „listen“-Funktion noch ein anonymes Callback mit, Welches bei Start des Servers aufgerufen wird.

Hier könnten wir natürlich auch ähnlich wie mit dem „Request-Handler“ verfahren und eine benannte Funktion, statt einer Anonymen verwenden..

const server = http.createServer(requestHandler)
server.listen(port, host, function () {
  console.log(`Listening for requests on https://${host}:${port}`)
})

Nun kannst Du die Anwendung z. B. in Visual Studio Code über die Konsole ausführen (oder Du verwendest die normale Windows/Mac Konsole/Terminal).

Öffne in Visual Studio Code ein Terminal mit dem Hotkey „Strg+Shift+ö“, oder gehe oben über’s Menü.

Dann musst Du den obigen Code nur noch in eine JavaScript-Datei, z. B. „index.js“ stecken und mit „node index.js“ (geht auch ohne „.js“) ausführen.

Wenn Du dann die konfigurierte Adresse „https://localhost:8000“ besuchst, dürfest Du folgende Ausgabe sehen:

Fazit

Nun haben wir das simple Beispiel abgeschlossen, jedoch kommen in Zukunft noch weitere Problematiken auf uns zu.

Diese kommen unter Anderem dann, wenn man mit einzelnen Routen/Endpunkten und auch z. B. einer Authentifizierung arbeiten möchte.

Mit dem aktuellen Stand könnten wir also keine wirklich sinnvolle, bzw. eher vielfältige Applikation bauen – zumindest nicht so easy..

Das aktuelle Skript arbeitet praktisch als „Catch-All-Route„, es arbeitet also jeden GET-Request bisher gleich ab.

Egal ob wir „<adresse>/kunden“, oder „<adresse>/dashboard“ aufrufen, es kommt immer das Gleiche als Antwort.

Das liegt natürlich daran, dass wir in dem obigen Skript in keiner Weise zwischen verschiedenen Endpunkten zu unterscheiden.

Simpler NodeJS Http Server Code

const http = require('http')
const requestHandler = function (req, res) {
  res.writeHead(200, { 'Content-Type': 'application/json' })
  res.write('NodeJS Http Server')
  res.end()
}
const port = 8000
const host = 'localhost'
const server = http.createServer(requestHandler)
server.listen(port, host, function () {
  console.log(`Listening for requests on https://${host}:${port}`)
})

Erweitertes NodeJS Http Server Beispiel im Selbstversuch

Nachdem wir nun oben schon einige Fallstricke feststellen konnten, schauen wir uns im nächsten Abschnitt mal einen kleinen Selbstversuch an.

Wir schreiben uns eine eigene kleine Server–Klasse, mit dessen Hilfe wir verschiedene Request-Arten und Routen registrieren können.

Wie Dir vielleicht bekannt ist, gibt es nicht nur die oben verwendete Http „GET“-Methode, sondern z. B. noch „POST“, „PUT“, „DELETE“ und mehr.

Ein Beispiel wäre ein „GET„-Request an den „/kunden“-Endpunkt, Welcher z. B. eine Suche signalisiert und eventuell noch Query-Parameter zur Filterung a la „?name=Max“ entgegennehmen kann.

Wenn man nun allerdings ein „POST“-Request an den „/kunden“-Endpunkt schickt, könnte man durch die Angabe passender Daten z. B. einen Kunden erstellen.

Los geht’s – die jetzt benötigten Module

Bei dem erweiterten Beispiel-Server benötigen wir im Vergleich zu vorhin einige zusätzliche Module.

Wir möchten natürlich so viel Arbeit wie nur möglich an die Core-Module von NodeJS abgeben.

Darunter fällt zum Beispiel das Verarbeiten, also das Parsen des Url-Strings, bestehend aus Endpunkt und Query–Parameter.

const http = require('http'),
  url = require('url'),
  querystring = require('querystring')

Die Server-Klasse

Im Optimalfall stellt man sich die Konfiguration des Servers meiner Meinung nach so aktuell am besten vor:

- Server instanziieren
- Routen definieren
- Server lauschen lassen und Handler die Arbeit machen lassen

Daher werde ich den Server nach Möglichkeit genau so versuchen in kurzer Zeit zu bauen – damit es nicht den Rahmen sprengt.

Selbstverständlich ist Deine eigene Kreativität gerne gesehen und keine Grenzen in Sicht, „do your thing“ sag ich mal!

Definieren wir also im ersten Schritt eine simple JavaScript-Klasse mit unserem gewünschten „Skelett“-Aufbau:

class Server {
  constructor () {
    // doin' some constructional things
  }
  get () {
    // registering a GET route..
  }
  post () {
    // registering a POST route..
  }
  start () {
    // starting the server making it listening to requests
  }
}

Der Konstruktor

Im Konstruktor des Servers übergeben wir die Haupt-Konfiguration, wie den Hostname und den Port.

Ggf. könnte man es auch hier mit einem „options“-Objekt gestalten, allerdings ist das für’s Erste nicht notwendig.

Meistens bietet es sich aber tatsächlich an, da die Konfigurationsmöglichkeiten häufig von Zeit zu Zeit wachsen und man natürlich sowas wie 7 Konstruktor-Parameter vermeiden sollte.

Zuerst kümmern wir uns um Auflistung, Welche später die einzelnen registrierten Routen enthalten wird.

Ein Workaround

Ich habe hier bewusst eine anonyme Funktion mit „Arrow-Function“-Deklaration gewählt, um den „This-Scope“ des Konstruktors zu behalten.

So komme ich kinderleicht an das „_routes“ Feld/Eigenschaft – bau‘ dies gern nach Belieben um..

Würde ich hingegen eine weitere Methode in der Klasse hinzufügen, würde ich innerhalb der Methode den Scope des „http“-Moduls haben (und somit nicht an die Routes kommen..).

Nachdem die „createServer„-Funktion ihr Ding macht, nehmen wir noch Standardwerte für die Konfiguration (host, port) auf und setzen Sie ansonsten wie übergeben.

Vorgehensweise

Das Callback der „createServer“-Funktion loggt im ersten Schritt die besuchte Url inkl. Route, damit wir verfolgen können was passiert.

Danach verarbeiten wir mit einer der oben angesprochenen Utility-Module die Request–Url.

Somit können wir dann kinderleicht an den Pfad kommen (z. B. „/customers“) und müssen hier nicht nach dem Query-String schauen.

Dieser kommt zu einem späteren Zeitpunkt noch bei z. B. der Filterung zum Einsatz.

Ansonsten machen wir das, was viele Server machen, wenn Sie eine Url nicht finden können.

Sie melden einen 404-Fehler und wir verlassen dann den Durchlauf mit einem „Early Return„!

Falls die Route jedoch gefunden wird, sich also eine zum Pfad und zur Request-Methode passende Route in unserer Auflistung befindet, ziehen wir Diese.

Zum Schluss rufen wir dann den dafür registrierten Handler der Route auf und übergeben das Request- & Response-Objekt als Parameter.

So können die Handler entscheiden, was Sie mit den dem jeweiligen Objekt machen und der zentralen Stelle oben obliegt einzig und allein die Delegation – schön!

// ..
constructor(host, port) {
    const routes = []
    this._routes = routes
    this._server = http.createServer((req, res) => {
      console.log(`[${req.method}] ${req.url}`)
      const requestUrl = url.parse(req.url)
      const route = routes.find(x => x.path === requestUrl.pathname && x.method === req.method)
      if (!route) {
        res.writeHead(404, { 'Content-Type': 'application/json' })
        res.write('Route not found')
        res.end()
        return
      }
      route.handler(req, res)
    })
    this._host = host || 'localhost'
    this._port = port || 8000
  }
// ..

Ein paar Hilfsmethoden

Normalerweise bin ich kein Fan von komplexen Abfang-Szenarien in Beispiel-Codes, allerdings dürfte das hier relativ überschaubar sein, daher..

Wir definieren 3 Methoden, Welche die Überprüfung der notwendigen Argumente/Parameter bei einer Routen-Registrierung übernehmen.

Man hat ja schließlich keine Lust (und es ist schlechter Coding-Stil), alles 5 mal zu schreiben – duplicated Code, bah!

_checkPath-Methode

Nun gibt es also die „_checkPath„-Methode, Welche einfach nur prüft, ob das übergebene Argument „ok“ ist, also nicht „leer“ und vom Typ String.

Zusätzlich prüft die Methode noch, ob schonmal eine gleiche Route registriert wurde (unabhängig vom Handler..).

_checkHandler-Methode

Die „_checkHandler“-Methode prüft auch ob überhaupt etwas übergeben wurde und zusätzlich, ob es sich dabei auch um eine gewünschte Funktion handelt.

_registerRoute-Methode

Als nächstes kommt das Routen-Helferlein zum Einsatz, Welches uns – wer hätte es gedacht.. – bei der Registrierung einer Route unterstützt.

Auch hier gilt wieder die Vermeidung von duplicated Code, etc..

Es wird ein neues Route-Objekt mit Hilfe der angegebenen Parameter erstellt und der Auflistung hinzugefügt.

  _checkPath(path, method) {
    if (!path || typeof path !== 'string') {
      throw new Error('No or invalid path specified')
    }
    const existentRoute = this._routes.find(x => x.path === path && x.method === method)
    if (existentRoute) {
      throw new Error(`Route already registered [${method}] ${path}`)
    }
  }
  _checkHandler(handler) {
    if (!handler || typeof handler !== 'function') {
      throw new Error('No or invalid handler specified')
    }
  }
  _registerRoute(path, method, handler) {
    const route = {
      path,
      method,
      handler,
    }
    this._routes.push(route)
  }

Routen registrieren

Im Folgenden Code werden zwei Möglichkeiten einer Routen-Registrierung definiert:

• GET-Routen
• POST-Routen

  get(path, handler) {
    this._checkPath(path, 'GET')
    this._checkHandler(handler)
    this._registerRoute(path, 'GET', handler)
  }
  post(path, handler) {
    this._checkPath(path, 'POST')
    this._checkHandler(handler)
    this._registerRoute(path, 'POST', handler)
  }

Dabei wird bis auf die Request-Methode nicht wirklich etwas anderes gemacht, könnte man ggf. auch anders gestalten, aber cmon..

Den Server starten

Um den Server zu starten, müssen wir auf das klasseninterne Feld namens „_server“ zugreifen und dessen „listen„-Methode aufrufen.

Ggf. könnte man hier noch mit irgendwelchen Zustands-Flags für einen noch zu implementierenden Stop realisieren.

Kommen wir nun zu einer Beispiel-Konfiguration und einer Art Kunden-API.

Dazu erstelle ich eine (nicht persistente, nur im Server-Memory existierende) Kunden-Auflistung.

Als nächstes instanziiere ich wie oben geplant eine neue Server–Instanz.

Im Anschluss werden die Routen registriert und der Server durch die „start“-Methode gestartet.

Die Such-Route für die Kunden

Die erste zu registrierende Route wäre die Such-Route für die Kunden (bzw. die Schnittstelle..).

Pro Anfrage entsteht im ersten Schritt ein neues Array mit dem Inhalt der ursprünglichen „customers“-Auflistung.

Dann führen wir ein paar Prüfungen durch, ob es wirklich eine Suche ist, also ob wirklich Suchparameter übergeben wurden.

Falls ja filtern wie die „responseCustomers“ und weisen der gleichen Variable das neue Ergebnis zu.

So könnte man Schritt für Schritt natürlich weitere Such-Möglichkeiten hinzufügen.

Zum Schluss geben wir die Daten JSON-konform an den aufrufenden Client aus – fertig!

Gerne darfst Du Dich daran versuchen, die fehlende POST-Route zu bauen *zwinker*.

const customers = [
  {
    company: 'Nice Company ltd.'
  },
  {
    company: 'Another Company'
  },
]
const server = new Server()
server.get('/customers', (req, res) => {
  let responseCustomers = [...customers]
  const shouldFilter = req.url.includes('?') && req.url.includes('=')
  if (shouldFilter) {
    const requestUrl = url.parse(req.url)
    const query = querystring.parse(requestUrl.query)
    const hasNameFilter = 'name' in query
    if (hasNameFilter) {
      const nameToFilter = (query['name'] || '').toLowerCase()
      if (nameToFilter) {
        responseCustomers = responseCustomers.filter(x => x.company.toLowerCase().includes(nameToFilter))
      }
    }
  }
  res.writeHead(200, { 'Content-Type': 'application/json' })
  res.write(JSON.stringify(responseCustomers))
  res.end()
})
server.post('/customers', (req, res) => {
  // to be done..
})
server.start()

Erweiterter NodeJS Http Server Code

const http = require('http'),
  url = require('url'),
  querystring = require('querystring')

class Server {
  constructor(host, port) {
    this._routes = []
    this._server = http.createServer((req, res) => {
      console.log(`[${req.method}] ${req.url}`)
      const requestUrl = url.parse(req.url)
      const route = this._routes.find(x => x.path === requestUrl.pathname && x.method === req.method)
      if (!route) {
        res.writeHead(404, { 'Content-Type': 'application/json' })
        res.write('Route not found')
        res.end()
        return
      }
      route.handler(req, res)
    })
    this._host = host || 'localhost'
    this._port = port || 8000
  }
  _checkPath(path, method) {
    if (!path || typeof path !== 'string') {
      throw new Error('No or invalid path specified')
    }
    const existentRoute = this._routes.find(x => x.path === path && x.method === method)
    if (existentRoute) {
      throw new Error(`Route already registered [${method}] ${path}`)
    }
  }
  _checkHandler(handler) {
    if (!handler || typeof handler !== 'function') {
      throw new Error('No or invalid handler specified')
    }
  }
  _registerRoute(path, method, handler) {
    const route = {
      path,
      method,
      handler,
    }
    this._routes.push(route)
  }
  get(path, handler) {
    this._checkPath(path, 'GET')
    this._checkHandler(handler)
    this._registerRoute(path, 'GET', handler)
  }
  post(path, handler) {
    this._checkPath(path, 'POST')
    this._checkHandler(handler)
    this._registerRoute(path, 'POST', handler)
  }
  start() {
    this._server.listen(this._port, this._host, () => {
      console.log(`Listening for requests on https://${this._host}:${this._port}`)
    })
  }
}

const customers = [
  {
    company: 'Nice Company ltd.'
  },
  {
    company: 'Another Company'
  },
]
const server = new Server()
server.get('/customers', (req, res) => {
  let responseCustomers = [...customers]
  const shouldFilter = req.url.includes('?') && req.url.includes('=')
  if (shouldFilter) {
    const requestUrl = url.parse(req.url)
    const query = querystring.parse(requestUrl.query)
    const hasNameFilter = 'name' in query
    if (hasNameFilter) {
      const nameToFilter = (query['name'] || '').toLowerCase()
      if (nameToFilter) {
        responseCustomers = responseCustomers.filter(x => x.company.toLowerCase().includes(nameToFilter))
      }
    }
  }
  res.writeHead(200, { 'Content-Type': 'application/json' })
  res.write(JSON.stringify(responseCustomers))
  res.end()
})
server.post('/customers', (req, res) => {

})
server.start()

Du willst mehr!?

Wenn Du mehr willst, sprich Deine Anwendung wirklich komplex gestalten möchtest, kommst Du nicht um das non plus ultra Framework herum.

Dabei handelt es sich um das in Node-Kreisen sehr bekannte ExpressJS Framework.

Neben gewisse Basis-Funktionen wie die einfache Definition von Routen unterstützt ExpressJS auch noch ein Konzept namens „Middlewares„.

Hierüber werde ich allerdings noch in einem getrennten Beitrag schreiben, da es sonst zu viel wird!

Downloads

Weiterführende Links

• NodeJS Verzeichnisse mit readdirSync auslesen
• NodeJS QRCode Scanner erstellen

Der Beitrag Wie man einen NodeJS Http Server erstellt erschien zuerst auf Robert Skibbe.

VB NET Web API – Web API Konsum von Grund auf erklärt

Heute erwartet Dich ein ganz besonderer und von vielen Abonnenten gewünschter Beitrag – die Implementierung einer VB NET Web API.

Es handelt sich genauer genommen um die Erstellung eines Clients, Welcher gewünschte Daten aus einer Web-Schnittstelle abrufen kann.

Die Web-API arbeitet dabei nach dem üblichen Standard, Sie gibt JSON-Daten zurück, Welche wir dann noch clientseitig verarbeiten müssen.

Letztendlich ist der Client natürlich nichts anderes als eine VB NET Klasse, bzw. eher gesagt eine Instanz davon.

Auf YouTube ansehen – VB NET Web API

Falls Du die visuelle Darstellung, bzw. Erklärung des Beitrages bevorzugst, kannst Du natürlich auch das dementsprechende Video anschauen.

Ursprung und Idee zum Beitrag – VB NET Web API

Den ursprünglichen Anreiz zum Video habe ich – wie fast immer – durch den eigenen Bedarf dazu gehabt.

Ich baue mir aktuell ein kleines Tool, Welches mir bei meiner Arbeit mit dem Staking von Kryptowährungen helfen soll.

Hier zeige ich Dir mal einen kleinen Ausschnitt, beachte jedoch, dass das Tool hier nicht weiter aufgegriffen wird:

Bisher musst ich bei Bedarf immer die einzelnen Werte und Positionen selbst errechnen, nun habe ich dafür letztendlich ein Mini-Tool gebaut.

Bewusst in der unteren, rechten Ecke positioniert, sollte es als eine Art Widget im Hintergrund funktionieren.

Bei Bedarf sollte es mir dann die gesammelten/verarbeiteten Informationen aufbereitet darstellen.

Gedanken zum Start

Bei den initialen Gedanken bezüglich des Projektstarts, kann man natürlich einiges einbeziehen.

Ich spreche hier unter anderem von Konzepten wie z. B. die Dependency-Injection, bzw. auch kurz DI genannt.

Als nächstes sollte man sich vermutlich über die restliche Infrastruktur der App Gedanken machen.

Hast Du eventuell das MVVM-Entwurfsmuster für Deine Anwendung eingeplant, oder möchtest Du „quick and dirty“ durchstarten?

In meinem Beitrag über das MVVM-Entwurfsmuster kannst Du mehr darüber erfahren und detailliert nachlesen.

Möchtest Du eventuell grafisch ansprechender arbeiten und ein GUI-Framework wie Mahapps-Metro verwenden?

Dann schaue Dir ggf. folgende Beiträge über Mahapps Metro an: Mahapps Metro Projekt aufsetzen.

Wegfallendes & Veränderungen

Viele Entwickler arbeiten bei einem Projekt zuerst einmal an einem „Minimum Viable Product“, kurz MVP.

Die Welt der Programmierung befindet sich in einem permanenten Wandel und nicht anders geht es Deinem Projekt.

Man möchte Kunden, Investoren, oder auch einfach Vorgesetzten ein schnelles und praxisnahes Beispiel des Projektes vorzeigen können.

Oftmals resultiert dies aus bestehendem Projektdruck, anderen wartenden Projekten, ungeduldigen Kunden, usw.

Da es sich hierbei allerdings um ein privates Projekt handelt, habe ich mich für eine hybride, bzw. einfache Lösung entschieden.

Ich habe daher als Basis ein kleines Interface erstellt, wovon sich dann Implementierungen ergeben können.

Man weiß nie, welche Webseiten, bzw. Schnittstellen irgendwann ihren Dienst quittieren.

Ebenso weiß man häufig nicht, inwiefern sich Preismodelle verändern, da sich auch kostenlose Modelle der Wirtschaftlichkeit anpassen müssen.

Besonders ehemals kostenlose „Subsciption-Plans“ werden irgendwann kostenpflichtig und bestehende Pläne werden teurer.

Wenn solche Veränderungen eintreten muss bestehende Software im Optimalfall natürlich gut gebaut sein.

Sie muss über eine gute Infrastruktur und Planung verfolgen, um auf eventuelle Änderungen reagieren zu können.

Dabei sollte Sie effizient und einfach umgestellt werden können und erfolgte Änderungen sollten einfach getestet werden können.

Vorbereitungen für die VB NET Web API

Um dieses Tutorial erfolgreich abschließen zu können, musst Du vorher noch einige Vorbereitungen treffen.

Du brauchst im ersten Schritt einen Account für den verwenden Web-Service namens „exchangeratesapi„.

Besuche dafür einfach die Website namens exchangeratesapi.io und erstelle Dir einen kostenlosen Account im „Free Subscription Plan“.

Der kostenlose Plan von exchangeratesapi.io bietet Dir die Möglichkeit 250 Anfragen im Monat kostenlos zu nutzen.

Wenn Du die Registrierung abgeschlossen und Deinen API-Key erhalten hast, können wir fortfahren.

Los geht’s

Hier starten wir mit der Basis des Codes und setzen die ersten Überlegungen um.

Wie oben schon erwähnt wird es ein Interface als kleine Basis geben:

Public Interface IExchangeRateService

    Function GetExchangeRateAsync(baseCurrency As String, targetCurrency As String) As Task(Of Double)

End Interface

Dieses stellt in der absoluten „easy-to-go“-Version nur eine einzige Funktion bereit – „GetExchangeRateAsync“.

Die Funktion soll uns den Wechselkurs der jeweiligen Basis-Währung in die angegebene Ziel–Währung liefern.

Wie Du in der Deklaration erkennen kannst, übergeben wir die beiden Währungen als Parameter vom Typ String.

Des Weiteren gibt die Funktion keinen simplen Double-Wert, sondern eine Task mit einem generischen Parameter vom Typ Double zurück.

Ich bevorzuge die asynchrone Arbeitsweise, daher wird die Funktion beispielhaft wie folgt aufgerufen:

Private Async Task LoadExampleDataAsync()
    Dim exchangeRate As Double = Await theService.GetExchangeRateAsync("EUR", "USD")
End Sub

Auch bei der Bezeichnung der Variante sollte man natürlich auf die „Asynchronität“ eingehen.

In der VB NET Welt hat es sich eingebürgert, asynchrone Funktionalitäten mit einem „Async„-Postfix zu kennzeichnen.

Möchte man stattdessen die synchrone Variante verwenden, kann man dafür natürlich auch einfach folgenden Code verwenden:

Private LoadExampleDataSync()
    Dim exchangeRate As Double = theService.GetExchangeRateAsync("EUR", "USD").Wait()
End Sub

Die oben genannte Schnittstelle wird dann von jeweiligen ExchangeRateServices implementiert – vorerst jedoch nur von Einem.

Konkrete Implementierung des Services

Mit dem Status quo gibt es nur eine „Service-Möglichkeit„, also eine konkrete Implementierung des Interfaces.

Dabei handelt es sich um die Web-Dienstleistung der oben genannten Seite, Welche uns als Daten-Lieferant dient.

Selbstverständlich könnten wir auch genauso gut mehrere Anbieter heraussuchen und Diese dann in eigenen Services implementieren.

Im folgenden Bild versuche ich diese Gegebenheit ein wenig besser darzustellen:

Klasse erstellen – Für ExchangeRatesApi.io

Erstelle also im nächsten Schritt eine eigene Klasse, in der wir dann beginnen, den Web-Dienst und unser Interface zu implementieren.

Die Bezeichnung bleibt hier natürlich Dir überlassen, man könnte hier den Hersteller des Web-Dienstes in irgendeiner Form einbringen.

Damit würde man ggf. klarer darstellen, dass es sich um die konkrete Implementierung für diese eine Website handelt.

Der Einfachheit halber und mangels anderer Implementierungen belasse ich es bei einem simplen Namen.

Implementiere anschließend das oben gezeigte Interface und Du solltest den gleich folgenden Stand haben.

Tippe dazu einfach „Implements“ in die nächstfolgende Zeile nach dem Klassennamen und gebe den Namen des Interfaces ein.

Danach kannst Du das gewünschte Interface ggf. schon durch Autokorrektur bestätigen.

Public Class ExchangeRateService
    Implements IExchangeRateService

    Public Function GetExchangeRateAsync(baseCurrency As String, targetCurrency As String) As Task(Of Double)
       
    End Function

End Class

Mit dem S aus „SOLID“ im Kopf

Mit dem „Single Responsibility“-Prinzip, Welches sich bei dem Akronym „SOLID“ hinter dem Buchstaben „S“ verbirgt im Kopf, arbeiten wir weiter an der Klasse.

Die Bedeutung des Prinzips ist letztendlich grob gesagt, dass eine Klasse jeweils nur einen Zweck haben sollte.

Inwiefern viele Entwickler diesen Interpretations-Raum ausschöpfen, oder regulieren, mag erstmal dahingestellt sein.

In unserem Fall hat die Klasse ja z. B. einen API-Key, Welchen Sie verwenden muss, um bei der Web-Schnittstelle authentifiziert zu werden.

Diesen API-Key zu laden, ist allerdings eigentlich nicht die Aufgabe der Klasse selbst, sondern eher einer „Configuration“-like Klasse.

Die „Configuration„-Klasse könnte natürlich auch wieder ein Interface mit „Get“- und „Set“-Methoden implementieren.

Man könnte die Konfiguration im ersten Schritt durch die NET Settings realisieren, danach vielleicht auf Datenbank-, oder gar auf Web-Ebene.

So würde alles schön sauber, separat und wart-, bzw. testbar sein – schön!

Basis-Daten festlegen

Statt der eigenen Konfigurations-Klasse verwenden wir der Einfachheit halber einfach konstante Strings.

Diese definieren dann die benötigten Daten, wie z. B. den API-Schlüssel und die Basis-URL an Welche die Anfragen gesendet werden müssen.

Die Daten selbst verwenden wir dann später, um korrekt formatierte/aufgebaute Anfragen zu erstellen.

Public Const API_KEY As String = "<myApiKey>"
Public Const BASE_URL As String = "https://api.exchangeratesapi.io/v1"

Ein Singleton, Welcher keiner ist – lol

In Vielen verschiedenen Sprachen sollte man Singletons für Zugriffe auf das Web, also durch GET-, POST-, etc. Methoden erstellen.

Es macht keinen Sinn, für jede einzelne Anfrage einen weiteren „HttpClient“ zu erzeugen, sondern eher den Selben erneut zu benutzen.

Soweit ich mich erinnern kann, steht das sogar in der Dokumentation zum Client drin.

Als ich damals mit Java für die Android-Entwicklung gearbeitet habe, war es dort übrigens auch so.

Mittlerweile hat Google glaube ich selbst die Steuerung übernommen, damit man dies praktisch nicht mehr selbst realisieren muss.

Schnell und einfach habe ich hier einfach folgenden Code verwendet:

Imports System.Net.Http

Public Class Http
  
  Public Shared <ReadOnly> Client As HttpClient = New HttpClient()

End Class

Dieser Code sorgt zwar nicht dafür, dass der Client nicht einfach neu gesetzt werden könnte, macht aber denke ich den Part der Wiederverwendung klar.

Setze ggf. einfach einen Readonly-Modifizierer vor den Namen des Clients.

Den Request zusammenbauen – VB NET Web API

Wir können natürlich nicht einfach irgendwelche Anfragen an irgendwelche URLs schicken, sondern müssen uns irgendwo an den korrekten Aufbau halten.

Die oben definierte Basis-URL dient schonmal wie der Name sagt als Basis für das Ganze.

Im nächsten Schritt müssen wir in der Dokumentation herausfinden, welchen sogenannten Endpunkt wir verwenden müssen.

In unserem Fall ist der korrekte Endpunkt der „/latest„-Endpunkt, Welcher natürlich noch zusätzliche Daten übermittelt bekommen möchte.

Unsere Funktion muss also nun einen GET-Request an den genannten Endpunkt senden.

Aus der Dokumentation geht hervor, dass jeder (gesicherte) Endpunkt unseren API-Key in Form eines Query–Parameters übergeben bekommen möchte.

Des Weiteren braucht der Endpunkt die Information, welche Basis-Währung verwendet werden soll.

Standardmäßig kann man im Free-Plan leider nur Euro verwenden, ich werde die Implementierung des Services natürlich trotzdem korrekt gestalten.

Behalte allerdings deshalb im Kopf, dass Du nur „EUR“ als Basis-Währung übermitteln kannst und Du sonst vermutlich einen Fehler bekommen wirst.

Alternativ könntest Du den Parameter auch eventuell weglassen und die Web-Schnittstelle würde so automatisch „EUR“ ziehen.

Gleich findest Du einen möglichen Aufruf, bzw. eine mögliche Verwendung der bekannten Aspekte.

Zuerst wandle ich die übergebenen Währungen (wie Sie üblich benötigt werden) in Großbuchstaben um (eur -> EUR).

Query-Parameter

Danach mache ich mir den Rückgabewert der ParseQueryString-Funktion der HttpUtility-Klasse zu Nutze.

Daraus bekommen wir eine Art NameValueCollection, ich sage deshalb „Art“, weil es wohl eine davon erbende Variante sein muss.

In Visual Studio selbst, sagt die Dokumentation leider im Tooltip dazu nicht mehr.

Vielleicht übersehe ich auch etwas, aber probiere mal die manuelle Erstellung einer „NameValueCollection“.

Füge anschließend 2-3 Einträge hinzu und gebe Diese dann als String aus und Du wirst einen Unterschied feststellen.

Dim myNVC = new NameValueCollection()
myNVC.Add("entry1", "value1")
myNVC.Add("entry2", "value2")
myNVC.Add("entry3", "value3")
' "normal"
Dim str = myNVC.ToString()
' or with Interpolation
' Dim str = $"{myNVC}"

Im obigen Beispiel bekommst Du folgendes Ergebnis (wenn Du es ausgibst..):

Man bekommt also praktisch nur den vollständigen Pfad der Klasse inkl. Namespace zurück.

Wenn Du Dir allerdings den „ToString“-Wert des folgenden Beispiels anschaust, wird die Situation klarer:

Dim API_KEY = "BLA"
Dim baseCurrency = "EUR"
Dim targetCurrency = "USD"

Dim query = HttpUtility.ParseQueryString(String.Empty)
query.Add("access_key", API_KEY)
query.Add("base", baseCurrency)
query.Add("symbols", targetCurrency)

Dim str = query.ToString()
Console.WriteLine(str)
Console.ReadKey()

Hier bekommen wir nun die einzelnen Schlüssel- und Wert-Paare wie wir Sie für die URL benötigen zurück.

Die von der „NameValueCollection“ erbende Klasse, Welche wir vermutlich von „HttpUtility.ParseQueryString“ zurückbekommen, wird also die „ToString„-Funktion überschreiben.

Somit sieht also unser erster API aufrufender Code so aus:

Public Function GetExchangeRateAsync(baseCurrency As String, targetCurrency As String) As Task(Of Double)
    baseCurrency = baseCurrency.ToUpper()
    targetCurrency = targetCurrency.ToUpper()

    Dim query = HttpUtility.ParseQueryString(String.Empty)
    query.Add("access_key", API_KEY)
    query.Add("base", baseCurrency)
    query.Add("symbols", targetCurrency)

    Dim apiUrl = $"{BASE_URL}/latest?{query}"
    Dim response = Await Http.Client.GetAsync(apiUrl)
    Dim responseContent = Await response.Content.ReadAsStringAsync()

    ' parsing..

    Return 0
End Function

Setze Dir gerne mal einen Haltepunkt auf den „responseContent“ und schaue Dir das Ergebnis an:

{"success":true,"timestamp":1632925144,"base":"EUR","date":"2021-09-29","rates":{"JPY":129.884571}}

API-Antwort verarbeiten – VB NET Web API

Einige werden das obige Format, Welches als Antwort von der API kommt vermutlich bereits kennen und verstehen.

Für andere noch nicht so in der Entwicklung tief verankerte Personen, ist es ggf. ein kryptisches Gebilde.

Bei dem kryptischen Text handelt es sich aber um nichts Geringeres, als die „JavaScript Object Notation“ – kurz JSON.

Sie sieht im Vergleich zum ebenfalls sehr bekannten, aber zugegebenermaßen bereits in die Jahre gekommenen XML-Standard kryptischer aus.

Allerdings ist JSON wesentlich kompakter und für das geschulte Auge auch nicht wesentlich schwieriger zu lesen.

JSON in Objekt umwandeln

Um nun mit unserer Arbeit an der API fortfahren zu können, müssen wir den obigen JSON-String in ein NET-Objekt umwandeln.

Nur so ermöglichen wir uns eine einfache und saubere Arbeit damit, denn wer möchte hier schon manuelle Arbeit mit Funktionen wie z. B. Substring, etc. leisten.

Für die Umwandlung selbst benötigen wir im ersten Schritt erstmal eine Klasse, Welche das in JSON formulierte Objekt auf NET-Ebene widerspiegelt.

Dazu könnten wir einerseits händisch loslegen und die einzelnen Eigenschaften definieren:

Public Class ApiResponse

  Public Property success As Boolean

  Public Property timestamp As Integer

  ' ...

End Class

Oder uns andererseits durch moderne Hilfsmittel in Visual Studio helfen lassen.

Visual Studio besitzt die Funktionalität, einen JSON-String gar automatisiert in passende Klassen umzuwandeln:

JSON String mit Visual Studio in NET Objekt umwandeln

Auch wenn es mit dem aktuellen Stand schon funktionieren würde, den String in ein Objekt (mit Sub-Objekten) umzuwandeln.

Leider kann die API ja mit dynamischen „symbols“ aufgerufen werden, weshalb ggf. unterschiedliche und nie fixe „Properties“ in dem „Rate“-Objekt zurückkommen.

Wenn Dich das nicht weiter stört, könntest Du natürlich die „Rate„-Klasse so ausbauen, dass sämtliche Währungen dort drinnen vertreten wären.

Ich persönlich fände das allerdings nicht so prickelnd, daher bauen wir die „RootObject„-Klasse noch ein wenig um und lassen die „Rates„-Klasse verschwinden.

JSON Parser installieren

Als nächstes installieren wir das bekannte Newtonsoft Json NuGet-Paket, um eine einfache Handhabung mit JSON-Objekten zu erhalten.

Danach passen wir die „RootObject„-Klasse an, indem wir Sie zuerst einmal sinnvoller benennen, also etwa „ExchangeRatesApiResponse„.

Anschließend ändern wir den Rückgabetyp der „rates„-Eigenschaft in „JObject“ um, Welches es uns die Arbeit erleichtert.

Nun können wir die „responseContent„-Variable, worin unser JSON-String steckt endlich umwandeln.

Im gleichen Schritt können wir auch noch die „exchangeRate“, also den Wechselkurs, typisiert aus der „rates„-Eigenschaft ziehen.

Die Umwandlung selbst – VB NET Web API

Dazu rufe ich im ersten Schritt die „DeserializeObject„-Funktion der „JsonConvert„-Klasse auf, Welche wir uns mit dem NuGet-Package installiert haben.

Dabei übergebe ich den generischen Parameter „ExchangeRatesApiResponse“, Welcher unseren Ziel-Datentyp für die „Antwort-Klasse“ widerspiegelt.

Schon haben wir den letztendlichen Wechselkurs vorliegen!

Dim apiResponse = JsonConvert.DeserializeObject(Of ExchangeRatesApiResponse)(responseContent)
Dim exchangeRate = apiResponse.rates.Value(Of Double)(targetCurrency)

Ein beispielhafter Aufruf unseres Services innerhalb einer Konsolenanwendung könnte nun final so aussehen:

Module Program

    Sub Main(args As String())
        Dim service = New ExchangeRateService()
        Dim exchangeRate = service.GetExchangeRateAsync("EUR", "JPY").Wait()
        ' do something with exchangeRate..
    End Sub

End Module

Weiterführende Links

• VB NET MouseClick simulieren – mit AutoIt3
• VB NET ImageSearch – Bilder in Spielen, Desktop und Co. suchen

Downloads

Hier findest Du wie immer die zugehörigen Downloads zum Beitrag.

Der Beitrag VB NET Web API – Währungskurs Service Konsum von Grund auf erklärt erschien zuerst auf Robert Skibbe.

VB.NET Webbrowser Control

In diesem Beitrag zeige ich Dir wichtige Eigenschaften und Funktionalitäten des VB.NET Webbrowser Control.

Von Zeit zu Zeit könnte es vorkommen, dass Du in deinem Programm auch mal einen Webbrowser darstellen und ggf. im Detail damit arbeiten musst.

Diese Arbeit kann unter anderem sein, dass Du den Quelltext einer Seite auslesen oder die Oberfläche automatisieren möchtest, das zeige ich auch im Beitrag „VB.NET Get Element By Class„.

Falls Du z. B. nur eine Webseite ohne eigenes Steuerelement öffnen möchtest, wirst Du in meinem VB.NET Webseite öffnen Beitrag fündig.

Code

Um mit dem VB.NET Webbrowser Control zu starten, ziehen wir es einfach aus der Toolbox auf die Form und starten durch 🤓.

In meinem ersten Beispiel stelle ich die Dock-Eigenschaft des Webbrowsers auf None, damit Dieser nicht die komplette Form einnimmt und ich noch für Buttons Platz habe.

Ebenso stelle ich die Eigenschaft ScriptErrorsSuppressed auf True, ansonsten bekommt man so gut wie auf jeder Seite hunderte Errors an den Kopf geschmissen.

Zu guter Letzt stelle ich den Namen des Webbrowsers auf „wb„, um nicht jedes Mal „Webbrowser1“ schreiben zu müssen.

Da es der einzige Webbrowser der Anwendung sein wird, sehe ich hier auch keinen Grund es – wie sonst immer – passend zu benennen, denn: „Was ist hier passend!?“.

Seite öffnen

Um mit dem VB.NET Webbrowser Control gezielt, also via URL zu navigieren, bzw. Ihn mehr oder weniger navigieren zu lassen, können wir dessen Navigate-Methode verwenden.

Dafür nehme ich das Beispiel aus dem Sample-Code, wo wir analog zu den gängigen Browsern aus einer Textbox heraus navigieren:

Private Sub btnGo_Click(sender As Object, e As EventArgs) Handles btnGo.Click
    wb.Navigate("https://google.de")
End Sub

Seite bei Start laden – VB.NET Webbrowser Control

Wir können neben dem manuellen Navigieren auch schon bei Start der Form eine URL laden lassen.

Um den Browser schon bei Start eine Url laden zu lassen, setzen wir einfach im Designer die Url-Eigenschaft

Aktualisieren

Ähnlich wie in bekannten Webbrowsern, haben wir auch hier die Möglichkeit den Browser, bzw. dessen Seite mit Hilfe der Refresh-Methode zu aktualisieren.

In unserem Beispiel platziere ich den Aktualisierungs-Button – wie gängig – oben:

Private Sub btnRefresh_Click(sender As Object, e As EventArgs) Handles btnRefresh.Click
    wb.Refresh()
End Sub

Vorwärts navigieren

Der Webbrowser kann durch den Aufruf der „GoForward“-Methode vorwärts navigieren, aber um es sauber zu machen, müssen wir auch auf die passende Eigenschaft namens „CanGoForward“ achten.

Private Sub btnForward_Click(sender As Object, e As EventArgs) Handles btnForward.Click
    If wb.CanGoForward Then
        wb.GoForward()
    End If
End Sub

Rückwärts navigieren

Ähnlich wie beim navigieren nach vorn, verfahren wir auch hier, wir prüfen die „CanGoBack“-Eigenschaft und navigieren entsprechend.

Private Sub btnBack_Click(sender As Object, e As EventArgs) Handles btnBack.Click
    If wb.CanGoBack Then
        wb.GoBack()
    End If
End Sub

Scrollbalken – ScrollBarsEnabled

Man kann in dem Webbrowser-Control auch die Scrollbalken kontrollieren indem man dafür die vorgesehene Eigenschaft namens „ScrollBarsEnabled“ entsprechend auf True, oder False stellt.

Kontextmenü – IsWebBrowserContextMenuEnabled

Da Webbrowser für gewöhnlich ein eigenes Kontextmenü haben, hat sich das .NET-Team auch hier für eine Konfigurationsmöglichkeit entschieden

Es handelt sich um die IsWebBrowserContextMenuEnabled-Eigenschaft, mit dessen Hilfe wir – wie der Name schon erraten lässt – das native Kontextmenü des Browsers aktivieren, oder deaktivieren können.

Seite fixieren – AllowNavigation

In gewissen Anwendungsfällen kann es vorkommen, dass man nach dem initialen Aufruf einer Webseite nicht möchte, dass zu einer anderen Seite navigiert werden kann.

Mit der AllowNavigation–Eigenschaft können wir vermeiden, dass andere Webseiten aufgerufen werden.

Tastenkombinationen – WebBrowserShortcutsEnabled

Die WebBrowserShortcutsEnabled-Eigenschaft legt fest, ob im Browser die Tastenkombinationen, bzw. die Tastenkürzel aktiviert, oder deaktiviert sind.

Style & Engine

Moderneres VB.NET Webbrowser Control

Nach einiger Zeit die Du mit dem Webbrowser verbracht hast, wirst Du Dich vermutlich fragen, ob es nicht auch eine schönere und modernere Variante für das Steuerelement gibt.

Zum Glück kann ich dich beruhigen, ja diese neuere und tollere Variante gibt es!

So können wir einerseits die Verarbeitung von Stylesheets verbessern, die Fehler die im alten Control häufiger auftreten reduzieren und vor allem Performance und Support optimieren.

Wie man ein alternatives Webbrowser-Control verwendet zeige ich Dir in einem anderen Beitrag.

Dokument – VB.NET Webbrowser Control

Wer ein wenig Erfahrung mit JavaScript hat wird sich eventuell fragen, ob man auch in VB.NET an das Document des Webbrowsers rankommen kann, kurze Antwort: „Ja, kann man!“.

Um an das Document des Browsers zu kommen, muss man einfach nur die Document-Eigenschaft des Browsers verwenden und kann dann einige gewohnte Funktionen wie getElementById() aus JavaScript verwenden.

Diese Funktionen sind insbesondere für die Automation des VB.NET Webbrowser Controls von Vorteil und können Dir so auf verschiedene Arten und Weisen einen Vorteil verschaffen z. B. für einen Login o. Ä.

Kompletter Code – VB.NET Webbrowser Control

Public Class Form1

    Private Sub btnRefresh_Click(sender As Object, e As EventArgs) Handles btnRefresh.Click
        wb.Refresh()
    End Sub

    Private Sub btnGo_Click(sender As Object, e As EventArgs) Handles btnGo.Click
        wb.Navigate(tbUrl.Text)
    End Sub

    Private Sub btnBack_Click(sender As Object, e As EventArgs) Handles btnBack.Click
        If wb.CanGoBack Then
            wb.GoBack()
        End If
    End Sub

    Private Sub btnForward_Click(sender As Object, e As EventArgs) Handles btnForward.Click
        If wb.CanGoForward Then
            wb.GoForward()
        End If
    End Sub

    Private Sub tbUrl_KeyDown(sender As Object, e As KeyEventArgs) Handles tbUrl.KeyDown
        If e.KeyCode = Keys.Enter Then
            wb.Navigate(tbUrl.Text)
        End If
    End Sub

End Class

Downloads

Der Beitrag VB.NET Webbrowser Control erschien zuerst auf Robert Skibbe.