https://github.com/ryanninodizon/azureserverlessapp-with-auth-for-dotnet-angular
Azure Serverless template project using Azure Functions, Angular, Azure Cosmos DB and APIM with MSAL
https://github.com/ryanninodizon/azureserverlessapp-with-auth-for-dotnet-angular
angular angular17-standalone api apimanagement authentication authorization azure azure-functions cosmosdb dotnet dotnet-framework identity-platform microsoft microsoft-azure microsoft-identity-platform msal msal-angular msal-library serverless single-page-applications
Last synced: about 2 months ago
JSON representation
Azure Serverless template project using Azure Functions, Angular, Azure Cosmos DB and APIM with MSAL
- Host: GitHub
- URL: https://github.com/ryanninodizon/azureserverlessapp-with-auth-for-dotnet-angular
- Owner: ryanninodizon
- License: mit
- Created: 2024-05-09T19:59:43.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-03T06:10:11.000Z (5 months ago)
- Last Synced: 2025-03-28T20:46:43.405Z (2 months ago)
- Topics: angular, angular17-standalone, api, apimanagement, authentication, authorization, azure, azure-functions, cosmosdb, dotnet, dotnet-framework, identity-platform, microsoft, microsoft-azure, microsoft-identity-platform, msal, msal-angular, msal-library, serverless, single-page-applications
- Language: Bicep
- Homepage: https://youtu.be/D9fWa6KOhHg
- Size: 5.58 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Azure Serverless Template using Angular-standalone, Azure Functions App, Cosmos DB and APIM
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](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-angular "msal-angular")
> I created the Angular frontend by following the tutorial on [Angualr.dev](https://angular.dev/tutorials "Angualr.dev")
> The Photos/mages that are being generated are coming from [Lorem Picsum](https://picsum.photos/ "Lorem Picsum")
# Simple Architecture Diagram
# Prerequisites
Make sure to install these development tools and SDKs.
- [Azure Developer CLI](https://learn.microsoft.com/en-us/azure/developer/azure-developer-cli/install-azd?tabs=winget-windows%2Cbrew-mac%2Cscript-linux&pivots=os-windows "Azure Developer CLI") - for a quick Azure deployment.
- [Node.js with npm (18.17.1+) ](https://nodejs.org/en "Node.js with npm (18.17.1+) ")- for Angular installation and SPA development.
- [Azure SDK Tools](https://azure.github.io/azure-sdk/ "Azure SDK Tools") - for wokring with Azure Functions locally and other any Azure services related stuff.
- [.NET Runtime](https://dotnet.microsoft.com/en-us/ ".NET Runtime")
- [Angular CLI](https://angular.io/cli "Angular CLI")
- [Docker](https://www.docker.com "Docker") - this is needed when you run azd up locally
# How to make this working?
### Update environment values
You have to get the **ClientId** and **TenantId** from the App Registration page and update this file:
> frontend-angular/src/environments/environment.dev.ts
```json
msalConfig: {
auth: {
clientId: ,
authority: 'https://login.microsoftonline.com/'
}
}
```
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](https://youtu.be/QZnX_KXTpfI&t=60s "How to use the Microsoft Identity Platform with Angular Application")
### Install Angular dependencies and run
```csharp
npm install
```
```csharp
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
```javascript
//Getting access token from localStorage Session
let token = localStorage.getItem(" - 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}`
}
});
```
### Install CosmosClient dependency
```bash
dotnet add package Microsoft.Azure.Cosmos
```
Update this **CosmosDbConfig** class. Add the necessary values. Get it from Azure portal.
```csharp
namespace Serverless.Api
{
public static class CosmosDbConfig{
public static readonly string PrimaryKey = "";
public static readonly string EndpointUri = "";
public static readonly string DbName = "";
public static readonly string DbContainerName = "your ";
}
}
```
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](https://youtu.be/D9fWa6KOhHg "Serverless Backend API using Azure Functions and Cosmos DB")
# Docker Build and Run locally
```json
docker build -t angular-with-msal-template .
docker run -d -p 8080:80 angular-with-msal-template
```
# Import Azure Function App to Azure API Management
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](https://learn.microsoft.com/en-us/azure/api-management/import-function-app-as-api "Import an Azure Function App as an API in Azure API Management")
# Azure Deployment
Deploying this template project can be easily done using Azure Developer CLI - make sure to install this locally - get it [here](https://learn.microsoft.com/en-us/azure/developer/azure-developer-cli/install-azd?tabs=winget-windows%2Cbrew-mac%2Cscript-linux&pivots=os-windows "here").
```bash
# 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
```
# Screenshots
#### Welcome page
#### List page (local build)
