IdentityServer4 Client Angular comment passer de Http à Https

Comment installer mon application Angular CLI derrière https au lieu http ? Je trouve la solution en compilant les informations qui sont dans les deux pages suivantes :

Running Angular CLI over HTTPS with a Trusted Certificate

Using Angular CLI to serve over https locally

Mais je trouve que ces deux pages sont incomplètes toutes les deux. Du coup j'ai envie de prendre quelques notes supplémentaires.

Avec OpenSSL on génère le Certificat server.crt et la Clef server.key. J'exécute le bash suivant :

Génération du Certificat et de la Clef associée pour servir Angular derrière Https

Avec PowerShell, j'exécute le bash generate.sh voici le fichier generate.sh 

#!bin/bash

openssl req \
    -newkey rsa:2048 \
    -x509 \
    -nodes \
    -keyout server.key \
    -new \
    -out server.crt \
    -config ./openssl-custom.cnf \
    -sha256 \
    -days 365

Voici le fichier openssl-custom.cnf :

[req]
default_bits = 2048
prompt = no
default_md = sha256
x509_extensions = v3_req
distinguished_name = dn

[dn]
C = US
ST = KS
L = Olathe
O = IT
OU = IT Department
emailAddress = webmaster@example.com
CN = localhost

[v3_req]
subjectAltName = @alt_names

[alt_names]
DNS.1 = *.localhost
DNS.2 = localhost

Que vous devez mettre à votre propre sauce.

Ensuite, On l'installe le certificat sur le serveur IIS, en double cliquant sur le fichier serveur.crt de la façon suivante :

Angular & Https 

Il faut installer le Certificat dans le bon "entrepôt" dans Trusted Root Certificat Authorities

Génération du Certificat et de la Clef associée pour servir Angular derrière Https

Dans l'application Angular, créer un répertoire "ssl" sous la racine de l'application, placer le certif et la clef dans ce répertoire.

On installe la commande pour servir l’application à l'adresse https://localhost:4200/

\Samples\AngularASPNETCoreOAuthApp\AngularASPNETCoreOAuth\src\Spa\oauth-client\package.json

{
  "name": "oauth-client",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --ssl --ssl-key .\\ssl\\server.key  --ssl-cert .\\ssl\\server.crt",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

ssl
ssl\server.key
ssl\server.crt

Pour lancer mon application Angular, depuis Visual Studio Code la commande est maintenant :

>npm start

Mon application Angular et mon serveur IndentityServer4 derrière Https

Et voici le petit cadenas qui montre bien que mon application Angular se trouve maintenant derrière une adresse Https.

Ce post vous a aidé dans votre pratique professionnelle, n'hésitez pas laisser votre commentaire.

Pour en lire plus sur la Certification Https :

ODL - Comment passer mon site en https ?