Creating developer certificates and starting Angular 4 for SSL on Windows

If you’re a developer on Windows or a.Net developer getting to grips with Angular the steps outlined will create the various certificates and get local Angular 4 running under SSL.

The main steps are as follows and you will need to have installed makecert.exe and openSSL. For us Windows users the easiest way to get OpenSSL is to use one of the binaries installer listed here https://wiki.openssl.org/index.php/Binaries

  1. Create a Developer Root CA
  2. Install the Root CA certificate into your local certificate store
  3. Generate the developer localhost SSL certificates suitable for Angular 4
  4. Run Angular project using the developer localhost SSL certificate

Create a Developer Root CA Certificate

Create a folder to work in. Then open a command or PowerShell console and navigate to this folder.

You can either use makecert.exe, which I find the simplest,  or openSSL to generate a certificate

makecert.exe -r -n "CN=DevRoot" -pe -sv DevRoot.pvk -a MD5 -len 2048 -b 01/21/2010 -e 01/21/2030 -cy authority DevRoot.cer

You will be asked to provide a password to protect the private key and two files will be created. A private key file .PVK and a Microsoft format certificate .CER

If you want to use openSSL then you can follow the instructions here https://gist.github.com/ismyrnow/4e4bf71fa3e4b269bf1b

 

Install and trust the Root CA Certificate

In order for the browsers to trust the SSL certificate we will make in the next we need to install the Root CA Certificate we have just created into our ‘trusted Root Certificate’ store.

  1. Right-click on the CER file and select ‘Install Certificate’
  2. Select User
  3. Select the Trusted Root Certificate Authorities
  4. Click Next and Finish

All developers in you team should do this.

Generate the developer localhost SSL certificates

You can do this using makecert.exe or openSSL. You will be using the Root CA private key and certificate you created in step 1.

makecert.exe -iv DevRoot.pvk -ic DevRoot.cer -n "CN=localhost" -pe -sv dev.web.local.pvk -a MD5 -len 2048 -b 01/21/2010 -e 01/21/2020 -sky exchange dev.web.local.cer -eku 1.3.6.1.5.5.7.3.1

You will be prompted to enter the RootCA private key password and also to set a password for the SSL certificate private key. I chose not to set one for the new key as I could not find how to specify this later using the Angular CLI. You will now have a PVK and CER files for the SSL, but Angular CLI needs a PEM and a CRT files. Use the following command to generate the convert both files to compatible formats.

REM Convert CER to CRT openssl x509 -inform DER -in web.local.cer -out web.local.crt REM Convert PVK to PEM openssl rsa -inform pvk -in web.local.pvk -outform pem -out web.local.pem

Run Angular project with Developer SSL Certificates

Copy the PEM and CRT files to the root of your Angular 4 project.

The following Angular  4 CLI command can be used to run the project using the Developer SSL private key and certificate.

ng serve --ssl --ssl-key "web.local.pem" --ssl-cert "web.local.crt"

add a -o to open your browser too!

Additional useful command if you need a PFX file for anything

You will need to locate a copy of pvk2pfx.exe.

REM Make PFX pvk2pfx.exe -pvk web.local.pvk -spc web.local.cer -pfx web.local.pfx

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.