-
-
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> |
@shahnavasKazi, here's the solution I came up with:
From frameRedirect.html, redirect again back to the root of the web app (or where-ever your SPA is hosted), preserving the hash, ONLY if the frame redirect page isn't loaded in an iFrame (otherwise handleWindowCallback will just work it's magic).
No more double-loading of SPA. Example frameRedirect.html below.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Frame Redirect</title>
<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.17/js/adal.min.js"></script>
</head>
<body>
<script>
var adalConfig = {
clientId: "guid-goes-here"
};
var authContext = new AuthenticationContext(adalConfig);
authContext.handleWindowCallback();
if (window === window.parent) { window.location.replace(location.origin + location.hash); }
</script>
</body>
</html>
For anyone who comes across this gist, @balbany's frameRedirect.html sample was the winning solution for me as well. I've done a ton of Googling on this issue, and haven't found a sanctioned "best practice" from Microsoft, or anyone really. Since they've disallowed wildcards in reply URLs (which is the traditional way I've seen on other platforms' APIs expose to allow navigating anywhere into an app on a particular domain) as well the the oauth2AllowUrlPathMatching option in Azure AD configuration, that seems to strongly imply a client-side solution.
In my particular use case, I'm running a React application with react-adal in the index.html file and added this frameRedirect.html to my SPA output bundle. It Works!™
Thanks for taking the time to share your solution, @balbany.
I'm trying to use this solution but I get this error
adal.min.js:2 Uncaught TypeError: Cannot read property 'getRequestInfo' of null at AuthenticationContext.handleWindowCallback (adal.min.js:2) at test.html:14 AuthenticationContext.handleWindowCallback @ adal.min.js:2 (anonymous) @ test.html:14
What am I doing wrong ?
here is the configuration of the module
MsalModule.forRoot({ clientID: 'my-app-id', loadFrameTimeout: 20000, redirectUri: 'http://localhost:4200/assets/html/test.html', }),
I've copied-pasted the frameredirect.html ode and pasted it in a separate html file (test.html) in assets/html/
@balbany : That worked fine . Thanks!
@MarkLeMerise or someone please share some code snippet for react-adal solution. I am facing the app reload issue by using React with server side rendering. Thanks.
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.
Hi @tushargupta51, I am facing the same issue and the redirection is stucked at http://mysite.com/frameRedirect.html#/default and adal.login.error in localstorage says "Nonce is not same as undefined".
Can you please help?