Creating Certificates in .NET Core for Vue.js development using HTTPS

This article shows how to create development certificates for a Vue.js application, so that you can develop using HTTPS. The certificates are created using the CertificateManager nuget package.

Code: CreateAngularVueJsDevelopmentCertificates

A simple .NET Core console application is used to create the certificates. This type of application can run on most of the standard operating systems. Create a new console application and add the package CertificateManager. The package Microsoft.Extensions.DependencyInjection is also required to initialize the package.

<Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
    <OutputType>Exe</OutputType>
    <TargetFramework>netcoreapp3.1</TargetFramework>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference 
 Include="Microsoft.Extensions.DependencyInjection" Version="3.1.1" />

    <PackageReference Include="CertificateManager" Version="1.0.3" />

  </ItemGroup>

</Project>

The ServiceCollection from the Microsoft.Extensions.DependencyInjection package is used to setup the IoC. Use the AddCertificateManager method to add the CertificateManager service types. Get an instance of the CreateCertificatesRsa class using the ServiceCollection and call the CreateDevelopmentCertificate method to create the certificate. Add the domain name for which the certificate is to be used, and the length of time in years for which it should be valid. You can also add a friendly name to your certificate.

var sp = new ServiceCollection()
	.AddCertificateManager()
	.BuildServiceProvider();

var _createCertificatesRsa = 
   sp.GetService<CreateCertificatesRsa>();

// Create development certificate for localhost
var devCertificate = _createCertificatesRsa
	.CreateDevelopmentCertificate("localhost", 10);

devCertificate.FriendlyName = "localhost development";

Now the certificate can be exported. Three files will be exported. The pfx certificate can be used to add the certificate to the windows operating system. If using a different os, then export a pem file or something like that. The key file contains the private key of the certificate and the pem export contains the certificate with the public key.

string password = "1234";
var importExportCertificate = 
   sp.GetService<ImportExportCertificate>();

// full pfx with password
var rootCertInPfxBtyes = 
   iec.ExportRootPfx(password, devCertificate);
File.WriteAllBytes("dev_localhost.pfx", rootCertInPfxBtyes);

// private key
var exportRsaPrivateKeyPem = 
   iec.PemExportRsaPrivateKey(devCertificate);
File.WriteAllText($"dev_localhost.key", exportRsaPrivateKeyPem);

// public key certificate as pem
var exportPublicKeyCertificatePem = 
   iec.PemExportPublicKeyCertificate(devCertificate);
File.WriteAllText($"dev_localhost.pem", exportPublicKeyCertificatePem);

Use the Certificates with Vue.js project

Create a new Vue.js project, for example using the Vue.js CLI.

Add the new certificate files to a folder in the Vue.js project.

Add a new file called vue.config.js to the root of the Vue.js project. In this file add the HTTPS configuration with the newly created certificates.

const fs = require('fs')

module.exports = {
    devServer: {
		host: 'localhost',
		disableHostCheck: true,
        https: {
          key: fs.readFileSync('./certs/dev_localhost.key'),
          cert: fs.readFileSync('./certs/dev_localhost.pem'),
        },
        public: 'https://localhost:8080'
    }
}

The certificate needs to be trusted with the host operating system. Use the pfx file for this. On windows, just double click the file and follow the help windows to trust it.

Start the Vue application with npm run serve

And the Vue.js can be tested and run locally using HTTPS.

Links:

https://github.com/damienbod/AspNetCoreCertificates

https://www.nuget.org/packages/CertificateManager/

https://docs.microsoft.com/en-us/dotnet/core/get-started

8 comments

  1. […] Creating Certificates in .NET Core for Vue.js development using HTTPS – Damien Bowden […]

  2. i dont think so.

    1. www.matrix.tools · · Reply

      thanks! i’ve been looking for a way to automate my certs. great article though!!

      1. thanks for the feedback

        Greetings Damien

      2. www.matrix.tools · ·

        Thanks

  3. this is only a self-signed certificate correct? it can’t create a “real” certificate, can it???

    1. Hi Jesse, em a self signed certificate is a real certificate 🙂 If you want one which is automatically trusted from your os, or can be used for a public domain, then you have 2 options. Either get a certificate, from a CA, or use your private CA cert and create your domain certificate from this with it chained.

      So with this tool, you can create a ‘real’ certificate if you use the NewRsaChainedCertificate (or NewECDsaChainedCertificate) method and the CA signed cert for the chain.

      hope this helps

      Greetings Damien

  4. I think this article is useful for me

Leave a Reply to anhthu Cancel reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

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

%d bloggers like this: