search

AzureAD / microsoft-authentication-library-for-js

Microsoft Authentication Library (MSAL) for JS
http://aka.ms/aadv2
MIT License
3.66k stars 2.65k forks source link

Sample Code for Angular 8 (msal-angular) #1011

Closed stevenruizhang closed 4 years ago

stevenruizhang commented 5 years ago

1) the "@azure/msal-angular": "0.1.4" support for Angular 8 for Azure AD? 2) if support, any guideline and sample code provided for Angular 8?

PaybackMan commented 5 years ago

I thought we should be using @azure/msal instead. Just more confusion from msal...

jasonnutter commented 5 years ago

@stevenruizhang Out of the box, msal-angular is built to support Angular 4/5, however, I know we have customers who are able to use it with newer versions of Angular (e.g. by installing rxjs-compat). Unfortunately, we haven't been able to put together a sample that demonstrates, but we will soon.

This quarter, I will personally be working on updating msal-angular to use v1 of msal and to support the newer versions of Angular out of the box. It will also be a priority to improve documentation and samples for msal-angular.

stevenruizhang commented 5 years ago

@jasonnutter thanks Jason, may i know when the earliest day the new v1 version and documentation, samples will be available? We want to know the specific day so meeting the project timeline. Also i can get the id_token which not include the scp information(that is correct), but i also get the same access_token with id_token, the access_token should be contain the scp information which use to be verified by other resource API. So how can i get the access_token which contain scp in msal-angular, do i need call some method? or configure some values in protectedResourceMap?

jasonnutter commented 5 years ago

@stevenruizhang Unfortunately, I cannot provide an exact date for when the new version will be released. All I can say currently is that we are committing to have it completed by the end of the year, although I am planning to have it completed before then, and beta versions ready even earlier. We will make an announcement when samples and beta versions are ready.

With that said, have you tried using @azure/msal-angular with Angular 8? What errors do you get? I have worked with other customers who were able to get it working with newer versions of Angular, e.g. https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/990

To get an access token with the scp claim, you should request an access token specifically for that API (i.e. don't use the access_token returned with the id_token).

cwoolum commented 5 years ago

I am using Angular 8 with API's that are backed by Azure AD B2C. The protected resource map is key to fetching the correct access tokens.

I have an Application in Azure AD for my Portal and then one for each service I call. Each of your services will have a published scope and your portal needs to have the scope for each service added to API Access to allow the end user to automatically consent without a popup window. image

When the app tries to access the service, it'll see if it already has the access token and if not, authenticate with the claims specific to the service you are tying to access.

The resource map ends up looking something like this:

protectedResourceMap: [
    ['https://mycoolservice.com/places', ['https://mycoolservice.onmicrosoft.com/places-admin-service/user_impersonation']],
    ['https://mycoolservice.com/partners', ['https://mycoolservice.onmicrosoft.com/partners-admin-service/user_impersonation']],    
    ['https://graph.microsoft.com/v1.0/me', ['user.read']]] as [string, string[]][]
WolfyUK commented 5 years ago

@stevenruizhang I have had a go at updating the sample in this repo to Angular 6, which may help with a further update to Angular 8.

enniob commented 5 years ago

Using rxjs-compat will work with the latest version of Angular, but just watch out since your bundle size will increase and there are some other issues with it.

stevenruizhang commented 4 years ago

@jasonnutter I try to add the script mentioned in https://github.com/AzureAD/microsoft-authentication-library-for-js/wiki/Using-msal.js-with-Internet-Explorer in the angular 8 , but still get issue (screenshot2,3)

When access the site in IE11. Seems like MSAL.js not support ES5 because I target to build with es5 in Angular follow link https://angular.io/guide/deployment#differential-loading(screenshot1), the source still es6 in IE11(I saw class keyword in screenshot below), any idea?

I can not find any solution in https://github.com/AzureAD/microsoft-authentication-library-for-js/wiki/Known-issues-on-IE-and-Edge-Browser Below is the version I used: @azure/msal-angular:0.1.2 "msal": "0.2.1", "dependencies": { "@angular/animations": "^8.0.2", "@angular/common": "^8.0.2", "@angular/compiler": "^8.0.2", "@angular/core": "^8.0.2", "@angular/forms": "^8.0.2", "@angular/http": "^8.0.0-beta.10", "@angular/platform-browser": "^8.0.2", "@angular/platform-browser-dynamic": "^8.0.2", "@angular/router": "^8.0.2", "@azure/msal-angular": "^0.1.2", "bootstrap": "^4.3.1", "classlist.js": "^1.1.20150312", "core-js": "^2.4.1", "date-fns": "^1.29.0", "ng-zorro-antd": "^8.3.0", "ng2-slim-loading-bar": "^4.0.0", "ngx-bootstrap": "^5.1.2", "ngx-csv": "^0.3.1", "ngx-store": "^2.1.0", "rxjs": "^6.3.3", "rxjs-compat": "^6.0.0-rc.0", "tether": "^1.4.6", "web-animations-js": "^2.3.2", "zone.js": "^0.9.1" }, "devDependencies": { "@angular-devkit/build-angular": "^0.800.3", "@angular/cli": "^8.0.3", "@angular/compiler-cli": "^8.0.2", "@angular/language-service": "^8.0.2", "@types/jasmine": "~2.8.3", "@types/jasminewd2": "~2.0.2", "@types/node": "~6.0.60", "codelyzer": "^5.1.0", "jasmine-core": "~2.8.0", "jasmine-spec-reporter": "~4.2.1", "karma": "^4.0.1", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "karma-junit-reporter": "^1.2.0", "karma-mocha-reporter": "^2.2.3", "lighthouse": "^5.1.0", "protractor": "^5.4.0", "retire": "^1.6.0", "tar": "^4.4.2", "ts-node": "~7.0.0", "tslint": "~5.15.0", "typescript": "~3.4.5", "webpack-bundle-analyzer": "^3.3.2" } Why this library can not build into ES5 (which support for legency IE11) ?

1 2 3

enniob commented 4 years ago

@stevenruizhang I'm working on a project that is using Angular 8 and I'm converting this library since we cannot use rxjs-compact in production. So once I'm done and finish testing I will put a PR for it.

cwoolum commented 4 years ago

@enniob, There are already some existing PRs for Angular 8 but they have been rejected while they are waiting for the msal.js 1.0 upgrade.

enniob commented 4 years ago

@cwoolum thanks for letting me know I guess I missed that when I was looking at the repo.

stevenruizhang commented 4 years ago

@jasonnutter I try to add the script mentioned in https://github.com/AzureAD/microsoft-authentication-library-for-js/wiki/Using-msal.js-with-Internet-Explorer in the angular 8 , but still get issue (screenshot2,3)

When access the site in IE11. Seems like MSAL.js not support ES5 because I target to build with es5 in Angular follow link https://angular.io/guide/deployment#differential-loading(screenshot1), the source still es6 in IE11(I saw class keyword in screenshot below), any idea?

I can not find any solution in https://github.com/AzureAD/microsoft-authentication-library-for-js/wiki/Known-issues-on-IE-and-Edge-Browser Below is the version I used: @azure/msal-angular:0.1.2 "msal": "0.2.1", "dependencies": { "@angular/animations": "^8.0.2", "@angular/common": "^8.0.2", "@angular/compiler": "^8.0.2", "@angular/core": "^8.0.2", "@angular/forms": "^8.0.2", "@angular/http": "^8.0.0-beta.10", "@angular/platform-browser": "^8.0.2", "@angular/platform-browser-dynamic": "^8.0.2", "@angular/router": "^8.0.2", "@azure/msal-angular": "^0.1.2", "bootstrap": "^4.3.1", "classlist.js": "^1.1.20150312", "core-js": "^2.4.1", "date-fns": "^1.29.0", "ng-zorro-antd": "^8.3.0", "ng2-slim-loading-bar": "^4.0.0", "ngx-bootstrap": "^5.1.2", "ngx-csv": "^0.3.1", "ngx-store": "^2.1.0", "rxjs": "^6.3.3", "rxjs-compat": "^6.0.0-rc.0", "tether": "^1.4.6", "web-animations-js": "^2.3.2", "zone.js": "^0.9.1" }, "devDependencies": { "@angular-devkit/build-angular": "^0.800.3", "@angular/cli": "^8.0.3", "@angular/compiler-cli": "^8.0.2", "@angular/language-service": "^8.0.2", "@types/jasmine": "~2.8.3", "@types/jasminewd2": "~2.0.2", "@types/node": "~6.0.60", "codelyzer": "^5.1.0", "jasmine-core": "~2.8.0", "jasmine-spec-reporter": "~4.2.1", "karma": "^4.0.1", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "karma-junit-reporter": "^1.2.0", "karma-mocha-reporter": "^2.2.3", "lighthouse": "^5.1.0", "protractor": "^5.4.0", "retire": "^1.6.0", "tar": "^4.4.2", "ts-node": "~7.0.0", "tslint": "~5.15.0", "typescript": "~3.4.5", "webpack-bundle-analyzer": "^3.3.2" } Why this library can not build into ES5 (which support for legency IE11) ?

1 2 3

Updates: After i upgrade msal-angular to "0.1.4", it can work in IE, seems like the compatibility issue with IE11 was resolved in this version. But i got below issue when firstly login into the application, i can get the id token in session storage, but when API call need access token(MSAL provided) , it will get error when MSAL get this token, this issue sometime happen in IE, chrome , after refresh the page, the api work well. In the angular project, we are not subscribe to event callbacks for MSAL. I can not find this issue when i use msal-angular 0.1.2.

@jasonnutter, is this the issue for MSAL or Angular wrapper? Any work around? Will include this fix in next MSAL Angular 1.0.0 release at the end of this Dec? IE 11 private mode, version:11.864 error below

image

Chrome Incognito mode, version:78.0.3904 error below Token renewal operation failed due to timeout|Token Renewal Failed

jasonnutter commented 4 years ago

@stevenruizhang Can you please open a new github issue with the problem you are seeing? It will help us more effectively track and solve your issue, thanks!

GirishGowda37 commented 4 years ago

I have a set up angular 7 +MSAL . I have been asked to get access token to call web api (deployed in azure) . But my understanding is HttpInterceptor (msalInterceptor) will take care of it. please let me know how does authorization works here

jasonnutter commented 4 years ago

@GirishGowda37 If you need to protect a custom web api, you need to create a custom scope in the Azure Portal. You can read more about that here: https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-configure-app-expose-web-apis#expose-a-new-scope-through-the-ui

Please open a separate issue if you have further questions, thanks!

sanleong commented 4 years ago

After long research trying to find something compatible with Angular 8 I found this library: https://www.npmjs.com/package/microsoft-adal-angular6. Pretty easy to implement and authentication is a breeze... Hope this help...

cwoolum commented 4 years ago

I'm pretty sure ADAL was replaced by this library.. I don't think it's supported anymore.

jasonnutter commented 4 years ago

Also, please note that microsoft-adal-angular6 is a third-party library, for which our team cannot provide support.

sanleong commented 4 years ago

@jasonnutter then, What would be your recommendation for Angular 8 implementation of AzureAD?

jasonnutter commented 4 years ago

@sanleong I have worked with customers that are to use @azure/msal-angular with Angular 8, given some work on your side (e.g. installing rxjs-compat). And as mentioned, we're working on a new version of @azure/msal-angular with out of the box support for the new versions of Angular, and are planning to have preview versions available by the end of the year.

pepiku commented 4 years ago

Hi guys! End of year has passed, any new on the release date for a version that supports angular 8? Version 1.0.0-alpha.1 seems still to depend on angular 4 and rxjs 5.

jasonnutter commented 4 years ago

@pepiku Yep, we'll have something very soon!

jaleleddineagrebi commented 4 years ago

Any news on the release for a version that supports rxjs 6@jasonnutter !!!!

Choran66 commented 4 years ago

@pepiku Yep, we'll have something very soon!

"Very soon" is not a helpful response for those of us with schedules.

d-daeda commented 4 years ago

Try creating a microservice with lambda implementing the graphQL so the need for this library is removed.

jasonnutter commented 4 years ago

@stevenruizhang @jaleleddineagrebi @Choran66 There is a new beta for MSAL Angular with rxjs 6 support, including samples for Angular 6, 7, 8 (9 coming soon). Please see this upgrade guide for details: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev-angular-1.0-protectedresources/lib/msal-angular/docs/0.x-1.x-upgrade-guide.md

Apologies again for the delay, and let me know if you have any feedback.

sonphnt commented 4 years ago

This sample does not work in my case. I got this exception.

Application 'xxxxxxxxx' is not configured as a multi-tenant application. Usage of the /common endpoint is not supported for such applications created after '10/15/2018'. Use a tenant-specific endpoint or configure the application to be multi-tenant.

I created an Azure App in AD as Single Tenant for my organization only Tried to remove the part "/common" in authority URL and the sample is not loading any more with some weird errors in log.

And that would be better if we could have a full sample Angular 8 + Azure AD + Web API because since most angular apps will communicate with WebAPI that will require some more settings

jasonnutter commented 4 years ago

@sonphnt If your app is single tenant, your authority url should something like: https://login.microsoftonline.com/<mytenant>.onmicrosoft.com. This url should be visible on the Overview page for your tenant in the Azure Portal under Azure Activity Directory.

And yes, I agree that we should include calling a custom Web API in our samples, I'll make sure we do that.

rajbaral commented 4 years ago

Hello @jasonnutter, thank you for this sample code. I am able to login after replacing the client id, and some setting on azure, it works perfectly and replace the /common with our azure tenant id. But my question is, how do we set up for other tenant to access this application and more importantly how do I control this to only those tenant that exist in our database?

jasonnutter commented 4 years ago

@rajbaral Please read this documentation to learn how to build a multi-tenant application and how to control which tenants have access: https://docs.microsoft.com/en-us/azure/active-directory/develop/howto-convert-app-to-be-multi-tenant#understand-user-and-admin-consent

od82078 commented 4 years ago

@cwoolum regarding your example of your protectedResourceMap

would the "https://mycoolservice.com" be the host application and the "https://mycoolservice.onmicrosoft.com" the host application? I've got a similar sort of scenario wherein I've added my API Permissions but am unsure which URLs to use for my protectedResourceMap.

Cheers

cwoolum commented 4 years ago

https://mycoolservice.com would be the url for your service. https://mycoolservice.onmicrosoft.com would be the scope defined in Azure AD B2C.

You can think of the protectedResourceMap as a mapping from Urls to scopes. When you make a call to a service, MSAL will look at this map and see if any of the mappings match the URL you are requesting. If it finds a match, MSAL will attempt to fetch an authorization for those claims.

od82078 commented 4 years ago

@cwoolum That makes sense, Thanks! Another question I have is, is there any way for me to give msal an access token and have it NOT login? I'm currently using MSAL_CONFIG in my bootstrap to set it all up, but it forces me to login. I want to be able to essentially say "here, I've got this access token already so skip the login" does that make sense?

cwoolum commented 4 years ago

That's a question for @jasonnutter. Might want to create a new separate issue to track that.

jasonnutter commented 4 years ago

@odeera-lgim MSAL requires knowledge of a user session in order to obtain an access token. If you know the user already has an active session with AAD, you can silently request an ID token for that session (which is this context is analogous to signing in) by making a call to acquireTokenSilent with clientId as the only scope along with either sid or loginHint (we're working on formalizing this concept into a top-level API in #1166). If this completes successfully, you can then call one of the APIs to acquire an access token.

Can you please clarify what you would need MSAL for if you already have an access token (e.g. that was acquired server-side)?

jasonnutter commented 4 years ago

I'm actually going to close this issue, as the original ask (Angular 8 sample using the new version of MSAL Angular) is complete. If you have further questions (especially questions unrelated to the sample itself), please open a new issue, thanks!

llakhani commented 4 years ago

I implemented @azure/angular-msal 1.0.0 with msal 1.2.2 in my angular 8 application , (that uses web api of .NET Core 3.1). I'm not understanding how logout works. My application requirement is like, on page load of any page it checks if login otherwise redirect to login page. But application not having logout functionality. So when in browser new tab, from azure portal user signed out, then application page changes, shouldn't it ask for login again? and how refresh token automatically works?