Tag Archives: SPA
VIDEO – AngularJS SPA and WebAPI SQL database secured with Azure AD – SETUP (Part 1 of 3)
Wanted to share video walk through of how to create an AngularJS front end Single Page Application (SPA) which SQL Server WebAPI secured using Azure Active Directory authentication. Project includes PowerShell PS1 automation for App Registration within Azure AD. All HTTP data traffic POST and GET is now protect with Azure AD authentication tokens to ensure only valid users can leverage the application or HTTP data endpoints. Excellent design pattern to provide rich user experience with secure data storage, all hosted on Azure with Website, SQL, and App Registration. Cheers. 
Technical topics covered include:
- AngularJS 1x single page application (SPA)
- AngularJS routing
- ADAL login / logout user experience
- Dot Net WebAPI endpoints for HTTP GET/POST
- Dot Net Entity Framework
- Dot Net web.config lifecycle DEV/PROD
- Azure website
- Azure SQL
- Azure Active Directory – App Registration
- Azure Active Directory – Bearer token
- JWT IO – Bearer token
- Postman HTTP 401 to verify AAD security
This post is part of series with three posts:
- VIDEO – AngularJS SPA and WebAPI SQL database secured with Azure AD – SETUP (Part 1 of 3)
- VIDEO – AngularJS SPA and WebAPI SQL database secured with Azure AD – SECURITY GROUP (Part 2 of 3)
- VIDEO – AngularJS SPA and WebAPI SQL database secured with Azure AD – MS FLOW EMAIL(Part 2 of 3)
Video
Code
Screenshots
References
VIDEO – Azure AD protected Web API in an AngularJS SPA
Recently I walked through an Azure AD Web API sample project on GitHub at https://github.com/Azure-Samples/active-directory-angularjs-singlepageapp-dotnet-webapi and recorded a brief 14 minute video of the install and deployment steps. Watch below and enjoy. Cheers! 
Video
Screenshots
Error Message
Could not load type ‘System.IdentityModel.Tokens.TokenValidationParameters’ from assembly ‘System.IdentityModel.Tokens.Jwt, Version=5.0.0.127, Culture=neutral, PublicKeyToken=31bf3856ad364e35’.
( others at IdentityServer3#3017 saw the same with JWT breaking change)
Extra NuGet Package Step
Update-Package Install-Package Microsoft.AspNet.WebApi.Cors Install-Package System.IdentityModel.Tokens.Jwt -Version 4.0.2.206221351
References
Video – Get Started with SPCRUD.JS
Check out the below 10 minute video for how get started using “spcrud.js” to easily connect Angular JS applications to SharePoint List data. I created this library as a wrapper for AngularJS $http GET and POST. We can streamline the repetitive SharePoint plumbing of JSON headers, HTTP VERBs, and URL syntax. Now you can easily call “spcrud.read()” or “spcrud.update()” instead of formatting each HTTP request.
Enjoy!! 
Please leave a comment if you found this helpful.
