Json web token definition and example

JSON Web Token (JWT) is a JSON-based open standard (RFC 7519) for passing claims between parties in web application environment. The tokens are designed to be compact, URL-safe and usable especially in web browser single sign-on (SSO) context. - JSON Web Token

In broad terms, there are two kinds of web application, traditional round-trip application and single-page application ^[1].

1. Round-trip application The browser (client) requests an initial HTML document from the server. User interactions, such as clicking a link or submitting a form led the browser to request and receive a completely new HTML document.

2. Single-page application Single-Page Applications (SPAs) are Web apps that load a single HTML page and dynamically update that page as the user interacts with the app. SPAs use AJAX and HTML5 to create fluid and responsive Web apps, without constant page reloads. However, this means much of the work happens on the client side, in JavaScript. msdn.microsoft.com

For single page applications that rely on an API, a better way to handle authentication is with JSON web tokens (JWT).

JWT

JSON web token (JWT) consist of three different part, a header, payload, and a signature wich is encoded into Base64Encoded. A JWT can be identify as a three strings separated by . (dot), example :

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ

1. HEADER:ALGORITHM & TOKEN TYPE

The header carries 2 parts: a. The hashing algorithm to use (HS256 or RS256). b. Declaring the type (JWT).

Example :

{
  "alg": "HS256",
  "typ": "JWT"
}

Encoded :

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9

2. PAYLOAD:DATA

There are multiple claims that can be provide. Including registered claim names, public claim names, and private claim names, more information jwt claims.

Example :

{
  "sub": "1234567890",
  "name": "John Doe",
  "admin": true
}

Encoded :

eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9

3. VERIFY SIGNATURE

This signature is made up of a hash of the following components: a. The header b. The payload c. Secret

Example :

var encodedString = base64UrlEncode(header) + "." + base64UrlEncode(payload);

HMACSHA256(encodedString, 'secret');

Encoded :

TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ

Finally, all part of JWT :

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ

References

1. “Pro AngularJS” source code, Adam Freeman, Apress, Mar 2014. isbn:9781430264484, amazon:1430264489, google:g1bKngEACAAJ

Love shall be our token; love be yours and love be mine. - Christina Rossetti