Image for post
Image for post
Original photo by Jan Antonin Kolar on Unsplash

How to built a cloud native app with Azure Functions to create, design and connect to a Azure Database for PostgreSQL using .Net Core and EntityFramework Core

Why?

Azure Functions are a lightweight, inexpensive and scalable alternative to write backend functionality. If you’ve written your backends so far in ASP.NET (Core) and connected to your relational database using EntityFramework (Core) you might wonder if this also works in a C# Function app? Turns out yes with some quirks!

In this sample I’m going to walk through the steps necessary to design a model first database using EntityFramework Core, connect to an Azure PostgreSQL database and provide simple CRUD (create, read, update, delete) functionality as a REST-style http endpoint.

Prerequisites


Image for post
Image for post
Our popup late night studio @ Gieske Studios, Pforzheim

Introduction to our studio, hardware and software setup. How we planned and executed the production and what we would do different next time.

Sometimes ideas go places. When I proposed to our local government to produce a late night show style live stream on Youtube instead of a more traditional video conference format as a COVID-19 replacement for a in person event I would have never thought that in the end we as a team of software engineers would be the ones doing the actual production. Especially as I asked the mayor of our 120k city of Pforzheim, Peter Boch, to be the talk host. To my surprise neither the mayor nor any other official said no so we ended up here:

Image for post
Image for post
Peter Boch, mayor of Pforzheim giving is opening monologue

Watch the full recording of the show on Youtube…


Image for post
Image for post
Original photo by Pero Kalimero on Unsplash

While offering a great out-of-the-box experience with repos in GitHub, setting up a cloud based dev environment with Visual Studio Codespaces and repos located in Azure DevOps requires some extra steps.

Intro

Visual Studio Codespaces provide a cloud based dev environment as a service and work with a lot of languages and runtimes like .NET Core, Node, Python and many other. Learn more about this service here: https://azure.microsoft.com/en-us/services/visual-studio-online/

I 💗 this service as I can work from any machine just with Visual Studio Code installed or even through the browser and connect to different development environments in the cloud!

All guides I’ve found so far assume the one uses GitHub as a repo host. While there is nothing wrong with GitHub I mostly use Azure DevOps for my work projects to host my repositories. It turns out that entering a DevOps git url when prompted for a repository during the creation process of the Codespace it fails as the extension is unable to authenticate. …


Image for post
Image for post
Photo by Bekky Bekks on Unsplash

How to limit access to restful APIs in Azure Functions with .NET Core by assigning users to app roles in Azure Active Directory

In this previous post I discussed how to authenticate users in Azure Functions using Authentication/Authorization (formerly know as Easy Auth): https://medium.com/medialesson/protecting-azure-function-apps-with-azure-ad-authentication-authorization-fd167ce4fe33

Authenticating users in a backend API built with .NET Core and running in Azure Functions is usually just the first step to control and limit access to resources and features to certain users or groups. Now that we know who the user is we need to decide whether to allow access to a resource based on app roles.

One important drawback to consider: app roles are created individually per app registration. This means that in typical client server situations where we have a client (e.g. Angular) and a server/backend (e.g. Azure Functions) this means we need to create app roles in both app registrations and also manage user assignments for both separately. This can be mitigated by assigning app roles to security groups but this feature is limited to Azure AD premium tenants and so not available if an organization is using the Azure AD that comes with Microsoft 365.
Read more about app roles and other options for authorization here: https://docs.microsoft.com/de-de/azure/architecture/multitenant-identity/app-roles


Image for post
Image for post
Photo by Bekky Bekks on Unsplash

How to limit access to apps, routes and features in Angular by assigning users to app roles in Azure Active Directory

In this previous post I discussed how to authenticate users in Angular using the Microsoft authentication library (MSAL) and Azure Active Directory: https://medium.com/medialesson/authenticating-angular-apps-with-azure-active-directory-using-msal-angular-1-0-d7b2f4914be9

Authenticating users in an Angular app is usually just the first step to control and limit access in an app and to features. Now that we know who the users is and that the user is a member of our organization we want to decide whether to allow access to the app, certain areas or features of the app based on app roles.

One important drawback to consider: app roles are created individually per app registration. This means that in typical client server situations where we have a client (e.g. Angular) and a server/backend (e.g. Azure Functions) this means we need to create app roles in both app registrations and also manage user assignments for both separately. This can be mitigated by assigning app roles to security groups but this feature is limited to Azure AD premium tenants and so not available if an organization is using the Azure AD that comes with Microsoft 365.
Read more about app roles and other options for authorization here: https://docs.microsoft.com/de-de/azure/architecture/multitenant-identity/app-roles


Image for post
Image for post

How my friend Tom and I built a voucher online shop in just 3 days and raised over $50,000 powered by the Microsoft Azure Cloud.

As in almost every city in the world local businesses like shops, restaurants, bars, movie theatres and cultural venues had to close in my hometown of Pforzheim due to the COVID-19 pandemic.

In mid march our city administration reached out and asked if I could help build a digital platform to help our local economy retain some of their revenue through vouchers. So I teamed up with my friend Tom, a local web designer (www.kaundvau.de), and we created a website within just 3 days that allows consumers to purchase vouchers in different sizes of their favourite restaurants, bar, shops etc.


Image for post
Image for post
Photo by Chris Barbalis on Unsplash

How to setup and serve Angular apps over HTTPs locally on Mac and Windows both with localhost and over an IP address with a self signed SSL certificate using openssl

For many reasons like callbacks from auth providers you might want to run your Angular app locally over HTTPS. While in some scenarios setting the ssl flag in the ng serve command might do the trick (which will create a temporary certificate), there are other occasions, like testing PWAs where you end up needing a fully trusted ssl certificate and no browser complaining.

In this case we need to create our own certificate, install it on our machine, trust it and finally tell the Angular CLI to use it.

Create a certificate with openssl

Here is a minimal openssl certificate configuration:

Replace commonName and subjectAltName with your IP or localhost. …


Image for post
Image for post
Original photo by Nik Shuliahin on Unsplash

How to enable Authentication/Authorization in Azure Function apps using configuration and get the signed in user in code.

In my previous blog post Authenticating Angular apps with Azure Active Directory using MSAL Angular 1.0 I explained how to secure an Angular app with Azure AD. In this story I wand to show how to extend this solution into the backend by securing an Azure Function app with a RESTful api using Azure AD.

Prerequisites

Configure a new app registration in Azure AD

To use Azure AD as an authentication provider in Angular we need to register a new app in the Azure portal: https://portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps, click on new…


Image for post
Image for post
Original photo by Damon On Road on Unsplash

Microsoft finally released Version 1.0 of its Library for Angular that facilitates the implementation of OAuth 2.0 token based authentication into Azure Active Directory.

Originally being scheduled for December 2019, MSAL Angular 1.0 was finally released on May 3rd 2020 ending a long phase of workarounds and beta versions of the Angular variant of the MSAL library for Single Page Applications (SPA). Version 1.0 introduces some breaking changes especially in the configuration part of the library. So make sure to checkout the upgrade guide here for details: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/0.x-1.x-upgrade-guide.md

Prerequisites

Configure a new app registration in Azure AD

To use Azure AD as an authentication provider in Angular we need to register a new app in the Azure portal: https://portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps, click on new…


Image for post
Image for post
Background Photo by Annie Spratt on Unsplash, Icons Microsoft

I do come across the task of creating PDF documents quite frequently and while there are a ton of open source and proprietary PDF libraries for almost any platform I was asking myself: Isn’t there a simpler way of doing this? Without caring about the drawbacks of the free libs or the cost and licensing complexity of the proprietary ones? Do I really want to care about all the settings and paging challenges?

In the age of serverless there has to be a better way! After some research I found out that this is basically a built in feature of OneDrive and Sharepoint Online as part of Office 365. …

About

Philipp Bauknecht

CEO @ medialesson. Microsoft Regional Director & MVP Windows Development. Father of identical twins. Passionate about great User Interfaces, NYC & Steaks

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store