-
Notifications
You must be signed in to change notification settings - Fork 372
FAQs
Adal uses iframes to renew tokens silently in the background. AAD returns the token back to the redirect_uri specified in the token request (this redirect_uri must be registered with AAD). Since the response is a 302, it results in the html corresponding to the redirect_uri getting loaded in the iframe. Usually, it's the app's root/default page. This causes an app's reload. In other cases, if the app's root page requires authentication, it might lead to nested iframes or xframe deny error. Since, adal cannot cancel the 302 issued by AAD, it cannot prevent the redirect_uri from getting loaded in the iframe. But, there are workarounds for this that one can use to avoid the entire app reloading again or other errors caused because of this:
-
Specify a different html for the iframe:
Set redirect_uri property on config to a simple page, that does not require authentication. You have to make sure that it matches with the redirect_uri registered in AAD portal. This will not affect user's login experience as Adal saves the start page when user begins the login process and redirects back to the exact location after login is completed.
Here is an example of template html you can use. You will need to make some modifications for this to work with your specific app:
`
<html ng-app="todoApp">
<body>
<script src="../../App/Scripts/angular.js"></script> //replace this with the path to angular.js
<script src="../../App/Scripts/adal.js"></script> //replace this with the path to adal.js
<script src="../../App/Scripts/adal-angular.js"></script> //replace this with the path to adal-angular.js
<script type="text/javascript">
angular.module('todoApp', ['AdalAngular'])
.config(['$httpProvider', 'adalAuthenticationServiceProvider', function ($httpProvider, adalProvider) {
adalProvider.init(
{
clientId: 'clientid', // replace this with your app's client id
},
$httpProvider
);
}]);
console.log("frame loaded");
</script>
</body>
</html>
`
- Conditional initialization in your main app.js file: If your app is structured similar to our sample single-page app where there is one central Javascript file (app.js in the sample) that defines the app's initialization, routing and other stuff, you can use an if...else based on whether the app is loading in an iframe or not. Something like this:
`
'use strict';
if (window !== window.parent) {
angular.module('todoApp', ['AdalAngular'])
.config(['$httpProvider', 'adalAuthenticationServiceProvider', function ($httpProvider, adalProvider) {
adalProvider.init(
{
clientId: 'clientId',
},
$httpProvider
);
}]);
console.log("Frame loaded");
}
else {
// existing code
}
`