Last active
February 24, 2021 04:25
-
-
Save tushargupta51/5fa6d000357120adbc8fd1d5c68853c4 to your computer and use it in GitHub Desktop.
App reloading inside iFrame when renewing token - Solution 2
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| '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 | |
| ); | |
| }]); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
@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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I would encourage people here to upvote @balbany solution so that others find it easy to check out the comment.