How to avoid ‘Port 4200 is already in use’ error with Angular-CLI?

 

If you get this error: ‘Port 4200 is already in use. Use ‘–port’ to specify a different port’, you might have left your Angular development environment without closing the node.js webserver’s port.

Here’s how you can close it without having to reboot your computer or change your application’s port.

Step 1: Find the connection’s PID

> netstat -ano | findstr :yourPortNumber

Example with its output:

Then locate the PID (surrounded in red)

Step 2: Kill the process using it’s PID

> tskill yourPID

Example:

Step 3: Restart your server

You should be able to run it (using ng serve)

Step 4: Stop your server properly

Don’t forget now to close properly your server by using Ctrl + C and typing Y:

 

That’s it 🙂

How to fix breaking changes since Angular 5.2.8 with Open Id Connect ?

Angular 5.2.8 breaking change

Angular 5.2.8 has introduced URL serialization so special characters are only encoded where needed.
But it broke Open Id connect token readability from hash…..

All the libraries used for Open Id Connect seem to be affected when your token is fetched from the hash in your authentication callback.

Here’s a quick fix to make it work while you waiting for the official fix from Angular (or your Open Id Connect library).

What does look like the encoded url from Angular 5.2.8 ?

 

What did it look like before and how it should look like ?

How can we fix it ?

Before reading the hash to consume the token, we just need to decode the URI like this:

window.location.hash = decodeURIComponent(window.location.hash);
// finalize your authentication process by consuming the token

decodeURI won’t work unlike the previous becaus it  doesn’t encode / decode URI components like ; / ? : @ & = + $ , #

Now you can breathe 🙂 your app works again 🙂

Using OpenIdConnect with Azure AD, Angular5 and WebAPI Core: Introduction

Introduction

 

 

Azure Active Directory (Azure AD) is Microsoft’s multi-tenant, cloud based directory and identity management service. Azure AD combines core directory services, advanced identity governance, and application access management. Azure AD also offers a rich, standards-based platform that enables developers to deliver access control to their applications, based on centralized policy and rules.

OpenID Connect 1.0 is a simple identity layer on top of the OAuth 2.0 protocol. It allows Clients to verify the identity of the End-User based on the authentication performed by an Authorization Server, as well as to obtain basic profile information about the End-User in an interoperable and REST-like manner. OpenID Connect allows clients of all types, including Web-based, mobile, and JavaScript clients, to request and receive information about authenticated sessions and end-users. The specification suite is extensible, allowing participants to use optional features such as encryption of identity data, discovery of OpenID Providers, and session management, when it makes sense for them.

Five scenarios supported by Azure AD:

In this serie of articles article we will demystify Single Page Application (SPA) scenario:

 

This scenario is named Implicit flow in opposition to basic flow in a full back end web application

  1. The user navigates to the web application.
  2. The application returns the JavaScript front end (presentation layer) to the browser.
  3. The user initiates sign in, for example by clicking a sign in link. The browser sends a GET to the Azure AD authorization endpoint to request an ID token. This request includes the application ID and reply URL in the query parameters.
  4. Azure AD validates the Reply URL against the registered Reply URL that was configured in the Azure Portal.
  5. The user signs in on the sign-in page.
  6. If authentication is successful, Azure AD creates an ID token and returns it as a URL fragment (#) to the application’s Reply URL. For a production application, this Reply URL should be HTTPS. The returned token includes claims about the user and Azure AD that are required by the application to validate the token.
  7. The JavaScript client code running in the browser extracts the token from the response to use in securing calls to the application’s web API back end.
  8. The browser calls the application’s web API back end with the access token in the authorization header.