Friday, January 15, 2021

JWT - The JSON Web Token!

Sometimes I use my free time to discover something new (or new for me).

This time it should be the JSON Web Token.

After the first consideration, I didn't understand the use of it at all... 

I (the server) create a token (Header. Payload), make Base64 out of it, and add a signature by hash with a key. 

OK, so far so good. If I send this token to the client, the client can take a look at it with a Base64 decode. 

(Why should I allow the client to do that?).

The client should send me this token with the next request and I (the server) can apply the hash again and check (the client doesn't know my secret key, which I used for the hash), if the hash matches, that is the way I can check, that it is still "my/valid" token. With the payload, I can then identify the user.

Fine - where is the use case?

The server generates the token after the user-login and doesn't need to store this session token. Cool.

How else was it done in the past? 

Generated a GUID, add a few random bytes, then maybe a cipher, and put this into a database. Next time you could just access the database with the token and after the access, you had everything you needed from the user. And the Client does not know anything about the token or what is stored inside - I prefer this, but:

With the JWT, the session database is not needed and the payload of the token can be used to load the user information. Perhaps for your web application, this simple "User is Valid" information is enough! 

The structure of the token is like this:

Base64(Header) "." Base64(PayLoad) "." Base64(Hash("Header.Payload",Key))

Header and Payload are JSON strings. Of course, someone has made countless thoughts about what has to be contained in the JSON. 

So the header could look like this : {"type": "JWT", "alg": "HS256"}

Token type and hash algorithm.

There is also a rule for the payload (RFC 7519). This may all have a justification and looks like this:

{"sub":"Frank Lauter","iat":1610651797,"exp":1610738197,"iss":"FDK-Token"}

Subject, Issuedat (Timestamp), exp (Expiration Time), iss (Issuer) e.g. the library used.

The algorithm works of course also, if you write completely different JSON in there.

One trick you have to keep in mind is that not all characters of the Base64 encoding can be used as URL-Querry-Param. Normally you would think that just a URLEncode is called because it makes the usual %HexValue stories, but this is not so and also the "=" at the end must be deleted. 

Facebook also uses this coding... As Marco wrote 2012!

If you google for "JWT and Delphi" the first link will be a github repo. 

These 24 units - 173KB source - work very well! ;-)

Perhaps you will like the source and if you have to address all the RFC-Rules you might want to use this... 

Or you just write this few lines in your Webbrocker application:

Yes, you have to insert the DateTime JSON Value, and I set it fix to SHA256 bit. 

You need


If you get back the token with the next call you just use:

for this you need the URLDecode:

You can of course improve this little demo and support different Hashes, or use your own content and give a shit about the RFC's - My Server, MyApp, My Rules!

Have fun...


Sunday, January 10, 2021

Outside the MVVM Pattern?

In the past, I always thought the Model is a class closely related to the MVVM pattern... However, this is not really the case. The model should be able to send notifications or must be able to do some data mapping, but in a real-world application, the Model should be YOUR Class - perhaps implementing some interfaces if necessary.

But this is not the topic for today!

Today I want to talk about colors and other effects. Spoiler: The ViewModel has no knowledge about colors. Neither does the Model. But why do I want to set colors?

To indicate a status, of course. For example, an input is incorrect or that it is a required field. Maybe in such a case, I want to switch the background to red or show a small asterisk next to the input.

So actually I don't want to set a TEdit.Background to red, but just visualize the status.

But what about Visible and Enabled? These states could be part of the view control. Do I make an exception for this?

Sure, I think this is a good idea. Already at the beginning of my MVVM series, I said that I want to adapt the pattern to Delphi and of course to Delphi users and as I know, we all love to disable elements or set the visibility of a whole panel to false, because we need the controls on the panel just in some special reasons. We could do better, but I think I'll make this exception.

If my ViewModel belongs to a RichView, it looks different, because here all font attributes are possible, but this special case I don't mean here.

So how should I send the status to the View? I don't want to create a new label for everything. I'm thinking more about the implementation of Bootstrap or similar systems. There is no color red, it's the status warning, same as not yellow but status is hint. This status can refer to the whole View or only to one or more controls. For this, I still need a nice pattern and possibly a singleton for all views or view groups, so that you can store your own settings.

For verification I dislike the RegEx approach, I would normally call a method. Perhaps the Method is also not in the ViewModel - depends on the problem. In this case, I would trigger the ViewModel and the ViewModel could ask the Model. As everything is just a call for "get status", you can do everything you want with this. This should also be possible from a background thread (perhaps it's a REST or DB request).

I have already implemented a DeepSetter to enable the ViewModel to set everything on the View with a change event. But this was just for the proof of concept. Because if you use this kind of call, you are perhaps unable to change the View. (Bad Idea)

Let's do a list with a bind and not bind. For a TEdit -  of  course, you can bind to everything in code-behind or with an event-token-call, but this list is for the default bindings.

Align - not bindable
Cursor - not bindable
Enabled - bindable
Height - not bindable // But what if I have to resize the control on content?
Hint - not bindable // But perhaps connected to a translation table?
MaxLength - not bindable // Tuff desicion
Password - not bindable // Should be handled by the View (Button show PW)
ReadOnly - not bindable // Fix by design
StyleLookup - not bindable // Fix by design

Perhaps the StyleLookup is the entry point for the status info.

TabOrder - not bindable // Fix by design
Text - bindable // of course
Textprompt - good question // I will decide later
Textsettings - bindable to global Textsettings?

Visible - bindable
Width - not bindable

Now to the Onxxxx Events: (Everything could handle by the View)

OnCanFocus - good question // I will decide later 
OnChange - bindable
OnChangeTracking - bindable

OnClick - not bindable // for a TEdit - a TButton would have this event.
OnDblClick - not binable
... // Skip the list of not bindable events here
OnValidate  - good question // I will decide later 
OnValidating - good question // I will decide later 

Please Remember: For everything not bindable - this is just for the default setting. You are the Developer and if you like to screw up the pattern you could bind to everything.

So what do we have outside the MVVM Pattern?

- Enabled
- Visible

The Status is well inside the MVVM Pattern like:

- TStatus = (Valid, NotValid, Warn, Hint, Information, Mandatory) // Perhaps more?

The View could ask the StyleView-GuideLine-Singelton for display colors based on the TStatus.

That's it, are we done?

It will be a time-consuming process, but I will provide some examples with the #D.MVVM-Framework to demonstrate all these things.

I can't wait to convert my first 780.000 LOC legacy App to #D.MVVM.

Have a nice Week...

PS.: If you've made it so far - Spoiler: Next step is to open the alpha user list. If you are a Delphi 10.1.x - 10.4.x User (VCL & FMX) I will provide a link where you can submit your request.


Friday, January 1, 2021

Happy New Year!

 Hello, my friends!

I hope you are all healthy and have a safe job in these crazy times. The year is over, but I think we will still have a long time of "fun" with it.

For the new year, I have clear priorities. (Besides my main job of course)

1. I want to get my #D.MVVM framework up and running as soon as possible and then release it as the first alpha version.

2. The new version 2.0 of the FDK lay, unfortunately - not at least because of these crazy times - a little bit untouched on disk. Of course, I made some bug fixes and added new features. Not everything I wanted to implement is ready yet, but the #D.MVVM framework has priority because it is the base for all new and old projects. Because such a framework as my FDK, actually has no clear version jumps, but rather a continuous improvement, there is no reason to wait. So if you are interested in my FDK, you could order the current version. Updates will still come.

3. Youtube. I hardly found the time to create a new YouTube video in the fourth quarter of 2020. In addition, unfortunately, the Vol.03 of the D.MVVM series (45. Min.) is destroyed. (Sure I have a backup, unfortunately, the file directory structure of Camtasia is completely stupid and does not collect the necessary clips in one place (or at least there is no function for this), but can use links across all disks and network drives. Unfortunately, there is no warning when saving and so you can easily overlook that large parts of the clips that you dragged into the project are outside the file structure or in temp directories. Actually, you should create a zip and reload it every time you save - this is also the workaround that Camtasia gives).

Actually, I would like to do a live project with the Apocalypse Coding Group again, but we can't agree on a project at the moment.

This brings me to the topic: Comments!

Your comments on Youtube videos or also on my blog post would be very helpful to adapt the topics to your wishes. Of course, I am happy about every subscriber and every reader of my blog, but your comment and a suggestion would be helpful!

So get to the keys... I wish you all a successful new year. May the virus not be with you.



Wednesday, December 23, 2020

XMas time is Unit-Test time...

Give yourself a gift that will last longer than New Year's Eve. In many cases, you will be happy about it for many years.

There are still some grinches who don't believe in the satisfaction of unit tests and think: It's just a myth told at developer conferences.

To be honest, I program too few unit tests, but enough to find bugs I would never have discovered otherwise.

Just yesterday, a small change in my FDK would have caused numerous of my applications to stop working. However, since I use Stefan's Testinsight I got immediate feedback from my unit tests when I hit save... 

Here for example:

before:

Function FindSomeThing( const aName : String ) : boolean;
var
  lShelp : String;
begin
  Result := FindField('f'+aName.ToLower,
                          aName.ToLower,Nr,lShelp);
end;

after:

Function FindSomeThing( const aName : String ) : boolean;
var
  lShelp : String;
begin
  lShelp := aName.ToLower;

  Result := FindField('f'+lShelp,
                          lShelp,Nr,lShelp);

end;

My goal was just to do the .ToLower once. I already had this helper string for a not used param, so where is the problem?

Five tests failed after I hit save.

Let's have a look at the FindField method.

Function FindField(Const aName1, aName2; out ListNr : Integer; out Name : String) : boolean;

aName1 contains only the "f" and aName2 is empty, because of the out param. Did you know this "problem"?

So use the quiet time to write one or some unit test, maybe for a routine that has always caused problems or just to get a better source code coverage.

And if you haven't found the time to deal with unit tests yet, then use this quiet time and try it with simple examples.

Merry Christmas and a happy new year.

Frank

Tuesday, December 8, 2020

Create your Website content with Delphi!

Every time I have to create some kind of Webpage, I have to decide how to build the dynamic content. 

This is a follow up of my other blogpost about: "How to write you own Serverside-Extention!"

In the old days, it was easy! You had to provide a Webpage with a maximum horizontal resolution of 800px because this was the most used "device" (PC) resolution used by the visitors.

To keep the navigation of each page in only one place, your main design was a framed page setup. I still love this concept and I really dislike this horrible "scroll down to the earth core" pages. Of course on a smartphone, the frame concept does not work anymore.

To build a nice maintainable page you can use ASP.NET. With ASP.NET it is easy to create a master page and content pages. The server takes care of combining these two (or more) files at runtime, in nearly any other case you have to copy the navigation to each page.

Btw. if you like PHP, don't talk to me... ;-)

Creating webpages with ASP.NET and Delphi is nearly the best you can do. You have the JIT compile that creates your background binary code for direct execution, you have "native" code that is executed by the IIS and your pages are super fast. No need to stop the IIS to change the DLL or anything else.

Too bad EMBT/CodeGear dropped the support of ASP.Net after D2007. Yes, the HTML designer was bad and after D2007 there was prism. I've done some pages with prism, but this is not the same.

There is another thing called VCL for the Web. This works with Delphi forms and really long state data for the back button. This works also fine but is a completely different thing.

The other possibility is a Webbrocker application. This could be used on Linux and Windows. With a loader that is able to unload and update your DLL (Windows) you can easily update to new versions. 

If you want more information about this topic, please follow the link above.

The IIS will create a new thread for the request and executes your DLL. This is fast as hell because this is a really native CPU execution of your code. The final content as a string or a result stream is handled from the IIS and transferred to the user.

With this kind of DLL every single char/byte is streamed from your Webbrocker-Application and you have 100% control of the final result. You can load a page from the disk and process it - change tokens to different content or create a complete table from a database. This is fast, that is not the problem, but often you have to provide extra HTML content to format your final result and this is a little drawback.

Your Webbrocker application could also be used as a RESTful Webservice and the result could be XML, JSON, or SOAP, but this is not the topic for today.

For example: If you want to present a list of persons nicely formatted, you could change a token <#PersonList> in your HTML-Page to a list of persons from the database.

Let's ignore for the moment that most HTML-Editors dislike this kind of token.

You have to format the content with additional HTML-Tags like <br /> or <ul> and <li> or even a <table> with CSS. If you have a page that is static for a long time - no problem. But with every change of the presentation, you have to change your source code, recompile and upload a new DLL.

You could use an async call in javascript to your DLL for a REST-Call and process the JSON result also with javascript to the final HTML, but this is horrible from the viewpoint of a Delphi developer.

So what to do?

For many years I've used the Webbrocker approach and it works for me. This time I have the first project where the Webdesigner is unable to use Delphi and the Delphi developer has no clue about Webdesign or Javascript.

Well, Delphi Webscript (DWScript) is perhaps one possibility, but this is much too Delphi driven.

After some research, I found a project from Marco Cantù implementing Razor. Razor is also for C# and ASP.NET, but Marco's implementation is using the Webbrocker to process the HTML-Pages that contains the Razor @ Syntax.

This is really nine, the syntax is given and the HTML-Editors do like the tags with @Whatever more than the Webbrocker tags. The implementation for loops is "Javascript-Like" and it is very easy to include HTML-Tags into a loop for displaying data from a database or a simple loop. So the Webdesigner is able to change to look, without a recompile of the DLL. One thing I dislike with this approach is: 

  • You have to compare every byte in the source HTML to find the @-Tag
  • You have to syntax check the HTML-Source
  • You have to replace the @include Tags after all the processing.

Perhaps your server is fast enough to do this byte by byte comparison for every request in real-time, but this is against every rule that is deeply implemented into my development soul. 

Perhaps I should implement a converter to process the HTML-Pages and create a jump-table to do the trick? With a jump-table, you do not need to search for the @ token... There is still the include page tag problem, but if the included page has also a jump-table is more like a "just-stream-copy" thing than processing a string replacement...

After one day...

I call it a JIT-Compiler.

If the Webbrocker wants to load an HTML-Page I have to check if there is a ".htbin" file with the same timestamp. So I use findfirst not fileexists to check this (with findfirst I get the SR and the Timestamp). If there is my bin file, I'm done and I can use the prechecked bin-format -file with the Jump-Table, if not I will use the normal processing for the first time and create the bin file on the fly for the next request. This is really fast and I like this idea.

Should I include a Delphi-Script tag to process Delphi source? Perhaps in the future.

Do you want to see a Webinar for this? 

Do you want to use this for your own projects? Should I do a git fork of Marco's repository and put this on github?

Please leave a comment...

And as always: Please visit my youtube and hit subscribe to help me grow my channel!




Monday, October 26, 2020

Setup your Bitbucket replacement for your Mercurial repository

A long time ago the German DelphiPraxis community convinced me to abandon my previous strategy of saving my source code via zipping only and use a source code management system.

So I googled a little bit and found SVN.

After some days of getting used to it - I proudly announced: "I have switched to SVN"! And with that, the shit storm has begun.

Why aren't you using a distributed revision-control-system? Don't use this old SVN system! Uses Mercurial or Git!

So I took the first "Mercurial" and with a little help and a talk from MVP Uwe Raabe on one of the Delphi-Tage-Event,  I had to realize that this system "just" works very well and offers all the advantages I missed in SVN. ( Sorry Craig )

Pushing everything for backup to a network-driver or a USB-Stick works perfectly. So no need for the old SVN Server installation on my local server, because mercurial is file-based. But after some time I had to share my source code with other developers and here comes BitBucket into play.

The use of BitBucket was as easy as Mercurial itself. 

I've never used Git, but I was told that it was just like Mercurial. Unfortunately, this is not the case. Even the first time I used git, there were big differences and I immediately hated git. But this was not a big deal, because I could use Mercurial for my local repositories and use Git for sharing where necessary.

I know many more developers using Git that Mercurial, but I never got used to the remote and local heads for different users and the parallel branches are show differently comparing to Mercurial.

After Bitbucket broke away from Mercurial repositories and hg is no longer supported, I had to find an alternative.  After some testing, I was able to run the SCMManager on a virtual Ubuntu installation. With the online available tutorials, the installation was not complicated. Unfortunately, SSL did not work out of the box.

The SCMManager is a Java-Client and this is not so easy with the certbot for Let's Encrypt. As far as I know, you have to convert the certificates and install them into the java key store. I like the cronjob based renewal, so hand converting was not my goal.

I found a little hint, that the Nginx server could be used as a proxy server to do the https/SSL connection and leave the java installation without any changes.

Installing software on Linux with this apt-get stuff is really easy and I wish this kind of installation would also possible on Windows. One drawback often is the location or the necessary changes to config files by hand. In this case, I had to type the config file from scratch.

By adding a new A record to the nameserver I was able to run the certbot with the "--nginx" param script who not only installed the certificate but also added the necessary parameters to my handwritten config file. Well done - this kind of "service" is really nice...

With some tweaking and some reload/retries, the server was reachable over https!

Small repositories worked immediately, but large files could not be transferred and caused an hg error: "request entity too large". The reason for this problem could only be the installed proxy server because everything worked before. But also this problem could be solved by a little googling. 

So now I have my own Mercurial server. If you want to know more about this, please write this in the comments, then I will try to collect my google knowledge into another post.