Configurare SSL in Angular

Published On - Maggio 7, 2018

pasmar79 Angular

Se stai eseguendo la tua app Angular localmente, viene servita utilizzando HTTP per impostazione predefinita. In alcuni casi è necessario che la tua app Angular sia servita tramite https per integrare un servizio come Azure B2C o simile. Questo articolo spiega come utilizzare la CLI Angular per servire un’app Web Angular su https nello sviluppo locale. Vediamo come è possibile ottenere questo risultato in Angular.

Utilizzo di HTTPS in fase di sviluppo

Per utilizzare https localmente, dobbiamo fare quanto segue:

  1. Genera un’autorità di certificazione locale e un certificato SSL
  2. Imposta i certificati quando servi Angular
  3. Prova!

Certificato SSL personalizzato

È necessario creare un’autorità di certificazione locale e un certificato SSL e impostare SSL_CERT_FILEe SSL_KEY_FILEsui file generati.

Generazione di un certificato SSL

Come primo passo, dovresti generare un’autorità di certificazione locale e un certificato SSL per lo sviluppo locale.

  1. Hai bisogno di un gestore di pacchetti per installare mkcert:
  1. Installa mkcert .
  2. Crea una CA attendibile localmente con mkcert -install.
  3. Genera un certificato SSL con mkcert localhost.

Imposta il certificato SSL personalizzato

Per servire un’app Angular localmente con SSL dobbiamo utilizzare le opzioni --ssl, --ssl-keye --ssl-certinsieme a ng serve. Pertanto, dopo aver generato l’autorità di certificazione locale e il certificato SSL, dobbiamo impostare le variabili di ambiente sslKeye sslCertsul percorso del certificato e dei file chiave. ssldeve essere anche vero.

ng serve -o -ssl true --sslKey {KEY_PATH} --sslCert {CERT_PATH}

Le variabili CERT-PATHe KEY-PATHsono i percorsi dei file generati. Alla fine, impostiamo il comando come npm start script e l’applicazione viene eseguita su HTTPS.

"scripts": { 
   "ng serve --ssl true --ssl-key {KEY-PATH} --ssl-cert {CERT-PATH}" 
}

ABILITIAMO SSL

  • Per abilitare HTTPS localmente, è necessario creare e impostare nell’ambiente l’autorità di certificazione locale e il certificato SSL.
  • Meglio aggiornare lo script npm startscript .