{"id":25646546,"url":"https://github.com/ryanninodizon/azureserverlessapp-with-auth-for-dotnet-angular","last_synced_at":"2025-04-15T13:53:54.971Z","repository":{"id":239080554,"uuid":"798450994","full_name":"ryanninodizon/AzureServerlessApp-with-auth-for-dotnet-angular","owner":"ryanninodizon","description":"Azure Serverless template project using Azure Functions, Angular, Azure Cosmos DB and APIM with MSAL","archived":false,"fork":false,"pushed_at":"2025-01-03T06:10:11.000Z","size":5854,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-28T20:46:43.405Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://youtu.be/D9fWa6KOhHg","language":"Bicep","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ryanninodizon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-09T19:59:43.000Z","updated_at":"2025-02-12T06:20:15.000Z","dependencies_parsed_at":"2024-05-19T09:23:37.231Z","dependency_job_id":"bb042184-b2cd-4ea9-9f19-5e7dadac6663","html_url":"https://github.com/ryanninodizon/AzureServerlessApp-with-auth-for-dotnet-angular","commit_stats":null,"previous_names":["ryannninodizon/azure-serverlessapp-template-for-dotnet-angular","ryanninodizon/azureserverlessapp-with-auth-for-dotnet-angular"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanninodizon%2FAzureServerlessApp-with-auth-for-dotnet-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanninodizon%2FAzureServerlessApp-with-auth-for-dotnet-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanninodizon%2FAzureServerlessApp-with-auth-for-dotnet-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanninodizon%2FAzureServerlessApp-with-auth-for-dotnet-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryanninodizon","download_url":"https://codeload.github.com/ryanninodizon/AzureServerlessApp-with-auth-for-dotnet-angular/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249085475,"owners_count":21210267,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2025-02-23T10:27:54.957Z","updated_at":"2025-04-15T13:53:54.947Z","avatar_url":"https://github.com/ryanninodizon.png","language":"Bicep","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Azure Serverless Template using Angular-standalone, Azure Functions App, Cosmos DB and APIM\n\nI 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.\n\n\u003e 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\")\n\n\u003e I created the Angular frontend by following the tutorial on [Angualr.dev](https://angular.dev/tutorials \"Angualr.dev\") \n\n\u003e The Photos/mages that are being generated are coming from [Lorem Picsum](https://picsum.photos/ \"Lorem Picsum\")\n\n![](https://github.com/ryannninodizon/Azure-ServerlessApp-Template-for-Dotnet-Angular/blob/main/banner.png)\n\n# Simple Architecture Diagram \n![](https://github.com/ryannninodizon/Azure-ServerlessApp-Template-for-Dotnet-Angular/blob/main/serverless-application-flow.png)\n\n# Prerequisites\nMake sure to install these development tools and SDKs.\n- [Azure Developer CLI](https://learn.microsoft.com/en-us/azure/developer/azure-developer-cli/install-azd?tabs=winget-windows%2Cbrew-mac%2Cscript-linux\u0026pivots=os-windows \"Azure Developer CLI\") - for a quick Azure deployment.\n- [Node.js with npm (18.17.1+) ](https://nodejs.org/en \"Node.js with npm (18.17.1+) \")- for Angular installation and SPA development.\n- [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.\n- [.NET Runtime](https://dotnet.microsoft.com/en-us/ \".NET Runtime\")\n- [Angular CLI](https://angular.io/cli \"Angular CLI\")\n- [Docker](https://www.docker.com \"Docker\") - this is needed when you run azd up locally\n\n# How to make this working?\n### Update environment values \nYou have to get the **ClientId** and **TenantId** from the App Registration page and update this file: \n\u003e frontend-angular/src/environments/environment.dev.ts\n\n```json\n msalConfig: {\n        auth: {\n            clientId: \u003cclient-id\u003e,\n            authority: 'https://login.microsoftonline.com/\u003ctenant-id\u003e'\n        }\n    }\n```\n\nwatch 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\u0026t=60s \"How to use the Microsoft Identity Platform with Angular Application\")    \n\n### Install Angular dependencies and run\n```csharp\nnpm install\n```\n```csharp\nng start or ng serve\n```\nUpdate the **httpRyanInterceptor** to match how you prefer to get an Access Token, which you will then use for Bearer Authorization.\n\u003e /frontend-angular/src/app/http-ryan.interceptor.ts\n\n```javascript\n//Getting access token from localStorage Session\n  let token = localStorage.getItem(\"\u003cmsal.access_token\u003e - this can be different, so I strongly suggest to use the MSAL object to get the correct value\"); \n  let secret = token?.split(\",\")[4].split(\":\")[1].toString();\n  secret = secret?.substring(1, secret.length - 1);\n  \n  const authToken = secret; \n  // Clone the request and add the authorization header\n  const authReq = req.clone({\n    setHeaders: {      \n      Authorization: `Bearer ${authToken}`\n    }\n  });\n```\n\n### Install CosmosClient dependency\n\n```bash\ndotnet add package Microsoft.Azure.Cosmos\n```\n\nUpdate this **CosmosDbConfig** class. Add the necessary values. Get it from Azure portal. \n```csharp\nnamespace Serverless.Api\n{\n    public static class CosmosDbConfig{\n        public static readonly string PrimaryKey = \"\u003cCosmosDb Primary Key\u003e\";\n        public static readonly string EndpointUri = \"\u003cCosmosDb Endpoint URI\u003e\";\n        public static readonly string DbName = \"\u003cyour cosmos-db-name\u003e\";\n        public static readonly string DbContainerName = \"your \u003ccosmos-db-container-name\u003e\";\n    }\n}\n```\n\nFeel 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\")\n\n# Docker Build and Run locally\n```json\ndocker build -t angular-with-msal-template .\ndocker run -d -p 8080:80 angular-with-msal-template\n```\n![](https://github.com/ryanninodizon/AzureServerlessApp-with-auth-for-dotnet-angular/blob/main/docker-build-and-run.gif)\n\n# Import Azure Function App to Azure API Management\nYou 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\")\n\n# Azure Deployment\nDeploying 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\u0026pivots=os-windows \"here\").\n```bash\n# Make sure to login to your Azure Subscription account by executing this azd command \nazd auth login\n\n# You can still execute this to make sure everything is ok.\nazd init\n\n# Provision and deploy to Azure\nazd up\n\n# Delete any created servcices/resouces when you don't need it anymore\nazd down\n```\n![](https://github.com/ryanninodizon/AzureServerlessApp-with-auth-for-dotnet-angular/blob/main/azd-execution.JPG)\n\n# Screenshots\n#### Welcome page\n![](https://github.com/ryanninodizon/AzureServerlessApp-with-auth-for-dotnet-angular/blob/main/deployed-to-azure.JPG)\n\n\n#### List page (local build)\n![](https://github.com/ryannninodizon/msal-angular17-with-listdata/blob/main/Screenshots/list-page.JPG)\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanninodizon%2Fazureserverlessapp-with-auth-for-dotnet-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryanninodizon%2Fazureserverlessapp-with-auth-for-dotnet-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanninodizon%2Fazureserverlessapp-with-auth-for-dotnet-angular/lists"}