With Azure Websites authentication/authorization in preview as described here: http://azure.microsoft.com/blog/2014/11/13/azure-websites-authentication-authorization/ could this website feature be used to simplify the protection of a SPA hosted in Azure, while still giving access to the token from AngularJS?

I am using ng-strict-di in my angular app. Upon startup, I get the following error with the library:

adalAuthenticationService is not using explicit annotation and cannot be invoked in strict mode

I thought it may be just a case of wrapping the function block inside an array, but other errors were caused by doing this (as so):

AdalModule.provider('adalAuthenticationService', [function () {
    return new AdalService();
}]);

Service side wants to only return idtoken for the app. Other webapi calls will ask for an access token.
This requires change in the flow for idtoken-accestoken logic.

In our vanilla adal.js sample, after the login flow completes, adal does not redirect the user to the same view/page/place in the app that the login request originated. I’m not sure if this is a requirement for GA, but it seems like something that most developers will want.

Currently, adal stores the pre-request location of the window in browser storage:
this._saveItem(this.CONSTANTS.STORAGE.LOGIN_REQUEST, window.location);

But it doesn’t send the user back there in the handleWindowCallback function. Instead, it just replaces the hash with the empty string:
window.location.hash = '';

Since the handleWindowCallback function isn’t used in adal-angular.js, it seems like it would be a pretty quick fix to make this work. As it stands, our sample handles the redirect like this, which is a bit more difficult:
// Check For & Handle Redirect From AAD After Login
var isCallback = authContext.isCallback(window.location.hash);
authContext.handleWindowCallback();
$errorMessage.html(authContext.getLoginError());

if (isCallback && !authContext.getLoginError()) {
    window.location = authContext._getItem(authContext.CONSTANTS.STORAGE.LOGIN_REQUEST);
}

Hello,

I'm implementing the adal js library for a mobile project project with cordova. Everething works fine but when the token expires and the application starts refreshing in the iframe it will end up in an infinite loop. Two iframes are added one with the names adalRenewFrame and undefined. My configuration looks like this.

var localUri = window.location.href;
var redirectUri = "http://redirect_uri";

var config = {
    tenant: "xxxx",
    clientId: 'xxxx',
    endpoints: {
        "/api": "xxxx",
    },
    displayCall: function(url){
        var ref = window.open(url, '_blank', 'location=no');
        ref.addEventListener('loadstart', function(event) {
            if((event.url).indexOf(redirectUri) === 0) {
                ref.close();
                window.location.href = event.url.replace(redirectUri + "/", localUri);
                window.location.reload();
            } 
        });
    },
    cacheLocation: "localStorage"
};

if(localUri.indexOf("http://") !== 0 && localUri.indexOf("https://") !== 0){
    config.redirectUri = redirectUri;
}

adalAuthenticationServiceProvider.init(config, $httpProvider);

IE10 has an issue when rewriting constant like window.
This happens in adal.js en adal-anguler.js for testing purpose:

//if (typeof module !== 'undefined' && module.exports) {
// var window, localStorage, angular, document, sessionStorage; => this line
// module.exports.inject = function (windowInj, storageInj, documentInj, MathInj, angularInj, conf) {
// window = windowInj;
// localStorage = storageInj;
// sessionStorage = storageInj;
// document = documentInj;
// Math = MathInj; // jshint ignore:line
// angular = angularInj;
// return new AuthenticationContext(conf);
// };
//}

For now I'm commenting the lines

setting userInfo on the rootscope is a kind of misguiding. Services should not make changes to scopes without explicitly being asked for.

It would be a better option to broadcast once the _oauthInfo has changed, devs who are interested in accessing user information can register to the event and populate this to the required scope.

This is great stuff! When do you guys plan to add support for multi-tenant applications. Currently it only works when I login from the same tenant. For example, my app is registered in contoso.com, if I login with the user from contoso.com - all is good. But when I try to login from contoso-partner.com it does not work, even though I enabled application to be multi-tenant (in azure portal). Here is the error:

Additional technical information:
Correlation ID: 6fca5212-fb8f-4d08-8572-49fa4bcbf75d
Timestamp: 2014-11-06 20:56:16Z
AADSTS50008: SAML token is invalid.

Also, MFA (multi factor auth). I expect it will be handled by the login.windows.net itself (currently is).

Thanks,
Serg

access token call should have domain hint and similar

I'm pretty inexperienced with AngularJS so if I've done something wromg please forgive me; given this code snippet:

$scope.signIn = function () {
adalService.login();
};

$scope.signOut = function () {
adalService.logOut();
};

// optional
$scope.$on("adal:loginSuccess", function () {
adalUserSvc.setUser();
});

// optional
$scope.$on("adal:loginFailure", function () {
adalUserSvc.loginFailure();
});

// optional
$scope.$on("adal:notAuthorized", function (event, rejection, forResource) {
adalUserSvc.notAuthorized(event, rejection, forResource);
});

$scope.$on("adalUserSvc:signedInChanged", function (event, args) {
$scope.signedIn = adalUserSvc.info.signedIn;
$scope.username = adalUserSvc.info.username;
});

I find that the loginSuccess event does fire until I try to move away from this controller / view. I fell like I should have 'then' command after the login function call to make it update or something. Have I missed something simple ?

there are always two iframes loaded on the page. One with the correct id and one with id undefined.

Fix: Loadframe method is not passing frame name

I know about the issue with reusing Windows Account in WAAD, but I think a lot of people will stumble upon the same issue.

One of my azure subscriptions is related to my Windows Account (former LiveID) when trying to authenticate that user, ADAL.JS throws an error when it tries to extract the ID token within _extractIdToken

@omercs looks like when adal-angular.js was broken out from adal.js, this issue was not copied over: daf67c9

I'm now seeing the same dynamic routing lost variable issue as that merged issue.

Don't know if this repo is the right place, but at least I ran in the issue when using the latest adal-js build. Long story short, is it possible to use adal-js in conjunction with Azure Mobile Services?

In the provider you should still use proper dependency injection annotation.
See: https://docs.angularjs.org/guide/di

Since you are using Inline annotation elsewhere you would likely use that again such as this:

this.$get = ['$rootScope', '$window', '$http', '$q', '$location', '$timeout', function ($rootScope, $window, $http, $q, $location, $timeout) {
  ..
}]

https://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml

Hi there,
When developing with the adaljs and angular library on a cordova project the login and logout functions could use some better support.
For the login function there is a displaycall available where I use the inappbrowser plugin so I can close the login page after login is successful. The logout function doesn't have this config option yet. I've worked around that by using the following code:

/**
* Logout user will redirect page to logout endpoint. 
* After logout, it will redirect to post_logout page if provided.
*/
AuthenticationContext.prototype.logOut = function () {
    this.clearCache();
    var tenant = 'common';
    var logout = '';
    this._user = null;
    if (this.config.tenant) {
        tenant = this.config.tenant;
    }

    if (this.config.instance) {
        this.instance = this.config.instance;
    }

    if (this.config.postLogoutRedirectUri) {
        logout = 'post_logout_redirect_uri=' + encodeURIComponent(this.config.postLogoutRedirectUri);
    }

    var urlNavigate = this.instance + tenant + '/oauth2/logout?' + logout;

    this._logstatus('Logout navigate to: ' + urlNavigate);
    //this.promptUser(urlNavigate);

    // Use a hidden inappbrowser view to navigate to the logout url
    var ref = window.open(urlNavigate, '_blank', 'hidden=yes');
    ref.addEventListener('loadstop', ref.Close());

};

I've hidden the frame because it isn't possible to navigate back to the app after the logout redirect has taken place.

Could you build a config option to be able to handle this better or more flexible?

Line 1040 at https://github.com/AzureAD/azure-activedirectory-library-for-js/blob/master/lib/adal.js
Add return config.

ADAL working for win 8.1 but not with win 8
is there any operating system prerequisite for using ADAL ?

I was wondering if d.ts is already in place somewhere...

Current pull request

In angular, if a route contains a $routeParam (example route: '/orders/:orderId') then on redirection, both on initial rerouting to azure login, as well as when a token expires, on returning to the route, the value of the $routeParam (in this example, orderId) is lost.

Instead of being routed back to '/orders/1' for example, user lands back on '/orders/:orderId'.

I would understand that you want this library to be a single file that developers can easily use and be ready to go with Angular but having them coupled like this seems more confusing to me.

I expect adal.js library to only be concerned with managing authentication and each Spa framework to provide their own file which levelerages apis from adal.js. You could easily move the angular specific services to angular.adal.js and start a convention that each framework: Ember, React, Backbone, etc have [name].adal.js as the filename.

Also, this repo would be specifically for iterating on the ADAL library, and use a separate repo (such as: SinglePageApp-DotNet) which demonstrates ADAL used with Angular and only that repo would have the angular specific information. This would allow people to open issues only concerned with adal.js here, and other issues with the angular implementation somewhere else instead of having people unsure where to provide feedback.

we have C# project as a simple sample. Add sample for developers using other platforms. Nodejs based site.

(check headers). We might be getting 401 for other reasons

For the sample - in case of error on login, don’t redirect again to the STS - add view for showing login errors (and offer button for retrying the login)

I have followed your instructions but authentication fails and prints the following to the console:

The returned id_token is not parseable.
Route change event for:/
Start login at:https://localhost:44308/#
Navigate url:https://login.windows.net/myapp.onmicrosoft.com/oauth2/authorize
Navigate to:https://login.windows.net/myapp.onmicrosoft.com/oauth2/authorize
TypeError: Cannot read property 'data' of undefined

Then my web app redirects to its home page, authenication fails again and redirects again to homepage... infinitely...

in pull request

Route change will renew the token

Authentication works well when navigating around Angular routes (using requireADLogin) but when attempting to access an endpoint, I'm not issued a refresh token if it has already expired. The request is submitted without an idtoken in the header and I receive a 401 unauthorized response. I tried adding the endpoints flag in the provider, but still no authorization.

Any reason why refresh tokens are properly issued with Angular routes (requireADLogin) but not when sitting idle for awhile and then attempting to hit an endpoint that requires said token?

Thanks.

ADAL implementation for UI is working fine ,

but my Web Api REST service is separate solution , and will be deployed on another endpoint ,
is ADAL can secure service too ?

Tokeninterceptor is redirecting user to login page, when user hits the protected route. All incoming requests are rejected. Hottowel template is expecting a reason in the reject call.
Update interceptor code to:

if (authService.loginInProgress()) {
     return $q.reject('login in progress');

AuthenticationContext.prototype.methodName is not compacted. These needs to be moved inside.

I think adaljs should add support for authentication using a pop-up instead of a full redirect.

There are two major benefits to using this technique:

• Much easier for developers!
• Works with SPA frameworks.

Much easier for developers!

With the pop-up method more of the conceptual complexity can be abstracted into the adaljs library and the developer can have much easier time using the library. Adaljs currently does a full redirect and then in order to work with angularjs router there is a bunch of code like:

$rootScope.$on('$locationChangeStart', locationChangeHandler);
....
var locationChangeHandler = function () {
                var hash = $window.location.hash;

                if (_adal.isCallback(hash)) {
                    // callback can come from login or iframe request

                    var requestInfo = _adal.getRequestInfo(hash);
                    _adal.saveTokenFromHash(requestInfo);
....

This is watching the url and if it has a parameter of 'id_token' then it saves the tokens etc.. This logic is currently exposed to the framework such as AngularJS and would have to re-written for every framework which is the largest barrier to using adaljs. Now imagine you have to rewrite all of this for Ember, React, Knockout, etc... way too much overhead especially when people have to try to integrate into existing projects which may already have complex router configurations.

I hope in the future adaljs is modeled after other major JS OAuth SDK's such as Facebook or Google.
FB: http://connect.facebook.net/en_US/all.js
Google: https://apis.google.com/js/client.js?onload=googleApiLoaded

With pop-up style of authentication you can get rid of all url watching stuff in angular and have a simple call like:

FB.login(function(fbResponse) {
  if (fbResponse.authResponse) {
    Ember.run(function() {
      resolve({ accessToken: fbResponse.authResponse.accessToken });
    });
  } else {
    reject();
  }
});

This encapsulates the entire login process in one asynchronous call! Yes, with pop-ups there is a the possibility that pop-ups maybe disabled, but the benefits out weigh this greatly. Especially if this is an option the developer can choose. Just realize what that means for ease of use! FB/Google SDK's handle setting up the window and watching that frame's url for change and closing then it has redirected. I assume this is extremely similar to how the Windows 8 WebAuthenticationBroker works.

Works with SPA frameworks.

The first point was more about how the pop-up can greatly simply needed code and reduce learning for developers, this second point is more about just explaining why the full redirect breaks other SPA frameworks and the pop-up solves the issue. Most SPA frameworks have a router which watches for changes in the hash which correlate to a route as seen in AngularJS. With the full redirect happens the router will attempt to navigate to route 'id_token' which won't exist and thus cause an error. It seems that AAD is always putting the id_token in the hash portion of the url such as adal.html#id_token=eyJ0eXAiOiJKV1Qi... when I would expect it to be able to control this and put it in the search portion of the url such as adal.html?id_token=eyJ0eXAiOiJKV1Qi.... Even if I change the line:

str.push('redirect_uri=' + encodeURIComponent(obj.redirectUri) + '%3F');

I assumed it would append the id_token=asdfasdf to the ? but it still overrides and uses hash. I assume this is because the hash portion of the url can be changed without page refresh, but perhaps someone can clarify if this is infact customizable by the adaljs request to AAD.

Hi,
I have implemented the adal library in Visual Studio Hybrid App (Cordova)
When I try to run in in the ripple emulator I got

"Refused to display 'https://login.microsoftonline.com/login.srf?wa=wsignin1.0&wtrealm=....'
in a frame because it set 'X-Frame-Options' to 'deny'."

It is working fine on a native device.

Is there a way to allow login.microsoftonline.com to accept rendering in an iFrame?
Also, the page normally redirect to an sts adfs server. Maybe there is a way to redirect directly to the sts uri?

Thanks

All samples currently use AngularJS. Can you provide a sample that does not use AngularJS?

Description:
If a user is logged in, but the idToken is expired, then they navigate to a page with requireADLogin, 2 refresh operations are issued: one in an iFrame and another via a main page redirect.

in $locationChangeStart, if the location is not a callback, it updates the auth cache. If the idToken is expired, getCachedToken will return null. This causes the else clause in the event to trigger. when acquireToken is called, the idToken will start being refreshed via an iFrame.

Then the $routeChangeStart event triggers. At this point, authData.isAuthenticated is false due to the cache refresh in locationChangeStart. If the page they are navigating to has requireADLogin, it will call adal.login(), trying to log the user in on the main page as well.

I believe if an iFrame refresh is happening, the main page should not redirect.

Changing this:
if (!_oauthData.isAuthenticated) {

To:
if (!_oauthData.isAuthenticated && !_adal._renewActive) {

in the routeChangeHandler in adal-angular.js should resolve this issue.

uniqueid
displayableid
givenname
familyname
identityprovider

Initial login should show username. Idtoken request should chain to the initial login call. This should work for full page redirect.

If I add the library to a project that uses html5mode and enter a URL with a # on the end (e.g. http://localhost:9000# or http://localhost:9000/# ) the developer console is battered with errors:

Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []

If I turn off html5mode or remove the adalAuthenticationServiceProvider.init call in app.js then everything is fine. I've had a quick look through but I cannot see what's causing it. I've added a sample at https://github.com/ruddles/ADALIssue which you can clone, npm install && bower install, grunt serve and then test the app by opening the developer console, and add a # to the end of the URL.

I've tested this in both chrome and firefox on a mac.

It would be nice if you could provide TypeScript declaration files for adal.js and adal-angular.js

Angular routes should be protected and redirected to login page, if router specifies a keyword to protect.