Microsoft cloud engineer - SharePoint, Office 365, Azure, DotNet, Angular, JavaScript.
Microsoft cloud engineer - SharePoint, Office 365, Azure, DotNet, Angular, JavaScript.

AngularJS

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.  

shades_smile

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

Code

Screenshots

image

image

image

image

image

image
image

image
image

image

image
image

image

References

VIDEO – F12 Trick to Peek at AngularJS Scope

Wanted to share trick for peeking into AngularJS scope with F12 tools and DOM selector.   After selecting any HTML DOM element you can “peek” into the “$scope” with variables available at that level.   No special browser extension or plug-ins needed.   If debugging AngularJS frequently check out Batarang for more advanced browser F12 tools.  For a quick check be sure to memorize “angular.element($0).scope()” for typing into console.   Realize that Angular (2+) has superseded AngularJS 1x.   However, many AngularJS applications continue to need support.   Tricks like this make that work easy.

Cheers

shades_smile

Code

angular.element($0).scope()

Video

References

VIDEO – Protect WebAPI data endpoint with ADAL (Azure AD)

Wanted to record brief demo of how to protect WebAPI data endpoint with ADAL (Azure Active Directory) Authentication Library.   Azure Portal enables us to register custom SPA (Single Page Application) for secure API calls to backend REST data sources.   OAuth Bearer HTTP headers are applied to provide security with JWT tokens (JSON Web Token).   Video shows all steps from Azure Portal registration to F12 validation of REST data calls.

Cheers 

shades_smile

Video

Screenshots

image
image
image
image
image
image
image
image

Code


References

FIXED – Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

When coding JavaScript with SP-PNP-JS I came across the error below and wanted to document for others.  Cheers! 

shades_smile

Error

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

image
image
image

Root Cause

When calling HTTP GET the default Header “accept: application/json” can return data as XML.  

Use F12 Developer Tools to view network traffic with HTTP headers and raw response text.

Solution

Modify JS code to initialize AngularJS with different HTTP headers.

Now SharePoint PNP api calls with Header “accept: application/json; odata=verbose” and returns data as JSON for correct parsing.

$pnp.setup({
	headers: {
		"Accept": "application/json; odata=verbose"
	}
});
image

References

© Copyright 2016
@ SPJeff

Return to Top ▲Return to Top ▲