I built this template project using Angular17-Standalone, Azure Functions, CosmosDB and APIM, along with MSAL (Microsoft Authentication Library) for authentication and authorization. I hope this will serve as a useful starting point for anyone exploring serverless development and the Microsoft Identity platform.
The integration of MSAL is based on this official MSAL JavaScript template: msal-angular
I created the Angular frontend by following the tutorial on Angualr.dev
The Photos/mages that are being generated are coming from Lorem Picsum
Make sure to install these development tools and SDKs.
You have to get the ClientId and TenantId from the App Registration page and update this file:
frontend-angular/src/environments/environment.dev.ts
msalConfig: {
auth: {
clientId: <client-id>,
authority: 'https://login.microsoftonline.com/<tenant-id>'
}
}
watch my YouTube video if you want to know how to get the clientId and TenantId How to use the Microsoft Identity Platform with Angular Application
npm install
ng start or ng serve
Update the httpRyanInterceptor to match how you prefer to get an Access Token, which you will then use for Bearer Authorization.
/frontend-angular/src/app/http-ryan.interceptor.ts
//Getting access token from localStorage Session
let token = localStorage.getItem("<msal.access_token> - this can be different, so I strongly suggest to use the MSAL object to get the correct value");
let secret = token?.split(",")[4].split(":")[1].toString();
secret = secret?.substring(1, secret.length - 1);
const authToken = secret;
// Clone the request and add the authorization header
const authReq = req.clone({
setHeaders: {
Authorization: `Bearer ${authToken}`
}
});
dotnet add package Microsoft.Azure.Cosmos
Update this CosmosDbConfig class. Add the necessary values. Get it from Azure portal.
namespace Serverless.Api
{
public static class CosmosDbConfig{
public static readonly string PrimaryKey = "<CosmosDb Primary Key>";
public static readonly string EndpointUri = "<CosmosDb Endpoint URI>";
public static readonly string DbName = "<your cosmos-db-name>";
public static readonly string DbContainerName = "your <cosmos-db-container-name>";
}
}
Feel free to watch my YouTube video if you want to see how I created different Azure Services for this template project: Serverless Backend API using Azure Functions and Cosmos DB
docker build -t angular-with-msal-template .
docker run -d -p 8080:80 angular-with-msal-template
You can visit this official documentation to learn how to secure and import a Function app to Azure API Management: Import an Azure Function App as an API in Azure API Management
Deploying this template project can be easily done using Azure Developer CLI - make sure to install this locally - get it here.
# Make sure to login to your Azure Subscription account by executing this azd command
azd auth login
# You can still execute this to make sure everything is ok.
azd init
# Provision and deploy to Azure
azd up
# Delete any created servcices/resouces when you don't need it anymore
azd down