Adding a free Let's Encrypt certificate on Azure Web App Step 4: Adding the Let's Encrypt cert

Now it’s time to get serious. After adding an App Registration in step 1, giving it access to the Web App resource group in step 2, and preparing the Storage Account in step 3, we are now ready to finish the process by installing and configuring the Let’s Encrypt extension.

Let us head over to the web app where we will install the SSL certificate. Choose the relevant app from the App Service plan menu as shown here:

Finding the app settings

Inside the app itself, click on the Custom domains menu:

The Custom domains menu

And proceed by clicking the + Add custom domain button. Fill in your domain name.

Adding a custom domain

In order to add the domain name, you first have to prove that you actually own the name. I will not go into the details of buying the domain name and forwarding it to Azure in this post, but here I show one way to claim the domain ownership by using a CNAME record:

Domain verification page

The green checkmarks indicate that the domain was verified successfully. At this point, we should also be able to notice that the newly added domain name is not secure.

This domain is not secure

It is time to fix this and conclude the tutorial! While still inside the web app, scroll down until you find the extensions menu and click it:

The App extensions menu

Then click on the + Add button:

Adding a new extension

Search for the Azure Let’s Encrypt extension by SKJP from the marketplace.

Selecting the Let's Encrypt extension

And accept the legal terms:

Read and accept the legal terms

After accepting the legal terms, the OK button is enabled and you can click it to start the installation process.

Click ok to install extension

You will get a notification of the installation status:

Extension installation in progress

Once ready you will be presented with the Let’s Encrypt configuration wizard. Here you need to fill in the information of the resources that we created earlier.

The Let's Encrypt configuration wizard

The information that you need to enter is obtained as follows:

  • Tenant id was shown on the last screenshot of part 1.
  • Subscription id is shown on the last screenshot of part 2.
  • Client id in the same last screenshot of part 1.
  • Client secret on the screenshot before it.
  • Resource group access was described during part 2. This is the same resource group that we configured there.
  • WebAppName we also saw during this post.
  • For both of the connection strings, refer to the last screenshot of part 3.
  • Finally, tick the checkbox for updating the application settings.
Double-check everything once over, and click the Next button to go to the next step.

Let's Encrypt settings are being applied

After some time, an information screen about the existing and available custom domains shows up.

Existing domains

Click next to go to the final step. Here you need to pick up the domain name that the certificate will be bound to. Enter an email address where you will receive future expiry warnings and click on the Request and install certificate button.

The certificate request step

After this, the extension will generate and install the SSL certificate for you.

Certificate was installed successfully

We should now be able to see this new certificate in the Certificates page inside theTLS/SSL settings menu.

Certificate list

Back in the custom domains page, refresh to see that the domain name associated with the new certificate is now secure.

Site is now secure

To confirm that the website is really secure, just hit it through the browser and click on the padlock icon. I’m using Chrome here so other browsers will display a different icon and have a slightly different behaviour.

Browser also shows that site is secure

Great! We have an encouraging message that the connection is secure. Clicking on the Certificate icon shown above will open the detailed certificate information window. Just like what the rest of our website visitors will see, here we can also read that the certificate was issued by Let’s Encrypt.

Certificate details

While we are still on the Azure portal one final thing. Since our HTTPS connection is now secured, we can switch on the option to force the secure connection. This is done again from the TLS/SSL settings page as shown here:

Switch to toggle HTTPS only mode

Now if anyone tries to access the site through the unsecured HTTP connection, they will be redirected to the secure site. We can observe and confirm this behaviour in the network headers.

Site should now redirect to HTTPS

So that concludes our journey to install a free SSL certificate to an Azure website through the Let’s Encrypt extension. Many thanks to SJKP for sharing this useful extension with the rest of us. If you have any further questions feel free to comment below.

Buy me a coffee Buy me a coffee

0 comments

Add your comments