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:
Inside the app itself, click on the Custom domains menu:
And proceed by clicking the + Add custom domain button. Fill in your domain name.
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:
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.
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:
Then click on the + Add button:
Search for the Azure Let’s Encrypt extension by SKJP from the marketplace.
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.
You will get a notification of the installation status:
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 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.
After some time, an information screen about the existing and available custom domains shows up.
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.
After this, the extension will generate and install the SSL certificate for you.
We should now be able to see this new certificate in the Certificates page inside theTLS/SSL settings menu.
Back in the custom domains page, refresh to see that the domain name associated with the new certificate 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.
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.
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:
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.
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.