-
-
Save tushargupta51/5fa6d000357120adbc8fd1d5c68853c4 to your computer and use it in GitHub Desktop.
| 'use strict'; | |
| angular.module('todoApp', ['ngRoute','AdalAngular']) | |
| .config(['$routeProvider', '$httpProvider', 'adalAuthenticationServiceProvider', function ($routeProvider, $httpProvider, adalProvider) { | |
| $routeProvider.when("/Home", { | |
| controller: "homeCtrl", | |
| templateUrl: "/App/Views/Home.html", | |
| }).when("/TodoList", { | |
| controller: "todoListCtrl", | |
| templateUrl: "/App/Views/TodoList.html", | |
| requireADLogin: true, | |
| }).when("/UserData", { | |
| controller: "userDataCtrl", | |
| templateUrl: "/App/Views/UserData.html", | |
| }).otherwise({ redirectTo: "/Home" }); | |
| adalProvider.init( | |
| { | |
| instance: 'https://login.microsoftonline.com/', | |
| tenant: 'Enter your tenant name here e.g. contoso.onmicrosoft.com', | |
| clientId: 'Enter your client ID here e.g. e9a5a8b6-8af7-4719-9821-0deef255f68e', | |
| redirectUri: 'Enter the url where your special html for iframe is located e.g. https://localhost:12345/frameRedirect.html' | |
| //cacheLocation: 'localStorage', // enable this for IE, as sessionStorage does not work for localhost. | |
| }, | |
| $httpProvider | |
| ); | |
| }]); |
| <html ng-app="todoApp"> | |
| <body> | |
| <script src="<local path to angular.js>"></script> | |
| <script src="<local path to adal.js>"></script> | |
| <script src="<local path to adal-angular.js>"></script> | |
| <script type="text/javascript"> | |
| angular.module('todoApp', ['AdalAngular']) | |
| .config(['$httpProvider', 'adalAuthenticationServiceProvider', function ($httpProvider, adalProvider) { | |
| adalProvider.init( | |
| { | |
| instance: 'https://login.microsoftonline.com/', | |
| tenant: 'Enter your tenant name here e.g. contoso.onmicrosoft.com', | |
| clientId: 'Enter your client ID here e.g. e9a5a8b6-8af7-4719-9821-0deef255f68e', | |
| redirectUri: 'Enter the url where your special html for iframe is located e.g. https://localhost:12345/frameRedirect.html' | |
| //cacheLocation: 'localStorage', // enable this for IE, as sessionStorage does not work for localhost. | |
| }, | |
| $httpProvider | |
| ); | |
| }]); | |
| // Copy over the event listeners for loginSuccess, loginFailure and stateMismatch from main app.js | |
| </script> | |
| </body> | |
| </html> |
For those that might face this issue using angular 2, here's the additional steps to make @balbany solution work.
https://gist.github.com/camilogiraldo/d29f66f4509eb3fcdaad7f543a94ca46
@MarkLeMerise Can I ask where in your project you added this file? I also have a react project but not sure where to add the frameRedirect.html file. Any tips would be greatly appreciated!
I would encourage people here to upvote @balbany solution so that others find it easy to check out the comment.
@ChristopherHButler, I've distilled the setup in my app into its own Gist. Hopefully, it helps.
You'll see the files, how they interact, and what you need in your Azure AD setup. In addition, I included a screenshot of my dist directory. When deployed, the index.html and redirect.html files exist as siblings.
@balbany/@tushargupta51 - authContext.handleWindowCallback(); throws uncaught DOMException - Blocked a frame with origin '' from accessing a cross origin. Any idea on this issue ? I know its too late.
@vbutani, I can't speak for SSR, but @balbany's answer is what worked for me. Copy the
frameRedirect.htmlfile (substitute in your own client ID) into your code base. Configure Azure AD to redirect to that file.