Thank you for this video, I've look at a few tutorials but to be fair they were over complicated, I followed your video successfully and appreciated your explanations.
this is amazingly good explained bro, congrats! Also, i have a question, the filter of the interaction type works to avoid the msal loop in some angular implementations right?
Thanks for the feedback. MSAL supports two types of azure ad authentication. Popup based and redirect based.. If you use Popup based, It will open a popup for login , if you choose redirect, it will redirect the user to azure login page. In this example, I have shown Redirect based interaction type. Please subscribe to the channel, if you have not subscribed yet. Thank you.
First off, thank you for the video. I agree it is well explained, but extremely hard to follow from time to time. I know this is an explanatory video, rather than a type along video but. I had some difficulty with overlays from Visual Studio Code over de the actual code. Jumping from subject to subject and switching files. So I would advice, take it a bit easy when jumping from file to file and please pay attention to indentation.
Thanks for the feedback. Please subscribe to the channel if you have not subscribed yet. Here is the source code - github.com/AzureTeachNet/AzureTeachTutorials/tree/Angular_WebAPI_AzureAD_Authentication_Authorization
Awesome explanation, am getting the below error: AADSTS9002326: Cross-origin token redemption is permitted only for the 'Single-Page Application' client-type.
I get a "No suitable injection token for parameter 'msalService' of class AppComponent" error when creating the msalService constructor. Could this be the version of Angular (14.2.11) that I'm running?
Hi AzureTeachNet , i´m subscribed however i´m trying to find this approach but on supported modern ANGULAR STANDALONE ( which does not use module.ts ) do you know how to achieve that? MSFT doc does not explain well either. thanks.
Hi, question what could be the problem in this scenario. If I refresh on the link "{mainurl}/page" the screen shows " the resource you are looking for has been remove, blah..blah ." But there is no issue if the refresh of page is done at the parent url.
Is it possible to get the user detail who tries to access the angular application but don't have permission to access the angular application that has implemented azure ad for authentication?
github.com/AzureTeachNet/AzureTeachTutorials/tree/Angular_WebAPI_AzureAD_Authentication_Authorization Here you go. Please subscribe to the channel if you have not subscribed yet.
Great Video. Thanks. Also, I followed your steps but after logging out, I am not being redirected to my application but the screen is stuck on the microsoft logout screen which says "You've signed out of your account". Please let me know if I have missed something.
did you ever figure this out? I am having the same issue. I have already cleared the browser cache and tried it out in firefox and chrome. Besides this line of code: this.authService.logoutRedirect({ postLogoutRedirectUri: 'localhost:4200/'}); Is there something else we need to configure in azure to be able to redirect on logout? The redirect for login is working fine obviously but the logout stays where you've mentioned.
what is stopping you in keeping the ids here? If you feel about security, even if you add a backend call, still it is on client side and can be viewed by the users in developer tools.
@@TechPuzzle_Haven Then you can add an api which returns an encrypted or base64 encoded appid details. You should call it before your app loads. You can decrypt it on client side and hook it to azure configuration in your app. Base64 encode is easy as it is readily available in javascript.
yes. you can add MSAL Guard on the home page itself in Routing Module. Refer routing module the code in github. There is a lot in the channel. Please subscribe to the channel if you have not subscribed yet. Thank you.
Here is the code - github.com/AzureTeachNet/AzureTeachTutorials/tree/Angular_WebAPI_AzureAD_Authentication_Authorization. I believe it was created in angular 13.0. Please subscribe to the channel if you have not subscribed yet. Thanks.
I've an issue. The app that I'm building required auth for all the routes accept for login route. I put the canActivat:[Msalguard] on all of them. So when the user goes to route and tries to log them in and then sends them back the redirect uri that's been set in the azure dashboa. how do fix this?
if you add CanActivate:MSALGuard, it should work unless you have configuration issues. Please take code from my github repo and test your scenario. If it is working in my code, please compare and see where you are missing.
@@azureteachnet How the canActivate: [MsalGuard] know if the user is already logged in. Because I think that's what I'm missing. If they are logged in the should allow access to that route without asking them to login again
@@mazwrld Generally, All the frontend frameworks like angular uses Guards. It will check for the presense of access token in local storage. If the token is present and is valid , not expired the framework will assume that the user is already logged in.
@@azureteachnet I just checked my local storage and I'm getting {"failedRequests":[865,"605465d4-5114-4fad-8bf2-71275a7cbbce"],"errors":["invalid_request"],"cacheHits":0}. That's my problem. The login isn't being saved to local storage for some reason
@@mazwrld could you please take code from my git repo and compare configuraitons? github.com/AzureTeachNet/AzureTeachTutorials/tree/Angular_WebAPI_AzureAD_Authentication_Authorization
Have you run into “Cross-Origin token redemption is permitted only for the ‘Single Page Application’ client type” error. Confused on where to go from here. I guess it’s an issue with the Origin header being sent to the login. Any ideas?
I want to note just in case someone else has this problem. If you have already configured a web application on Azure and then add an SPA platform this might cause the error I was getting. Setting up an SPA application on Azure from scratch should fix this
If you are using web api as backend, allow cors in startup/program.cs class. Here is full video which has working app for Angular + Azure AD integration with Web API + Azure AD - ua-cam.com/video/98T1CumHofI/v-deo.html If this is helpful to you.. please subscribe to the channel also share it with your friends.
github.com/AzureTeachNet/AzureTeachTutorials/tree/Angular_WebAPI_AzureAD_Authentication_Authorization Please subscribe to the channel if you have not subscribed yet.
V13. here is the git link - github.com/AzureTeachNet/AzureTeachTutorials/tree/Angular_WebAPI_AzureAD_Authentication_Authorization/azuread-angular-demo. Please subscribe to the channel if you have not subscribed yet.
github.com/AzureTeachNet/AzureTeachTutorials/tree/Angular_WebAPI_AzureAD_Authentication_Authorization Please subscribe to the channel if you have not subscribed yet.
Thank you very much for creating SSO application this simple. It is a great help to the learners. Its working!!
Thanks for the feedback. Please subscribe to the channel if you have not subscribed yet. Thanks,
out of all tutorials and docs i founf, this was the most helpful. tysm king!
Thanks for your comment. Please subscribe to the channel if you have not subscribed yet. 🙂
Thank you for this video, I've look at a few tutorials but to be fair they were over complicated, I followed your video successfully and appreciated your explanations.
Thanks a lot for the feedback. Please subscribe to the channel if you have not subscribed yet.
Thanks a lot..!!!! You have the solution, chatgpt must to learn to you !!!!
Thanks for the feedback 🙂. Please subscribe to the channel if you have not subscribed yet. Thanks.
this is amazingly good explained bro, congrats!
Also, i have a question, the filter of the interaction type works to avoid the msal loop in some angular implementations right?
Thanks for the feedback. MSAL supports two types of azure ad authentication. Popup based and redirect based.. If you use Popup based, It will open a popup for login , if you choose redirect, it will redirect the user to azure login page. In this example, I have shown Redirect based interaction type.
Please subscribe to the channel, if you have not subscribed yet. Thank you.
First off, thank you for the video. I agree it is well explained, but extremely hard to follow from time to time.
I know this is an explanatory video, rather than a type along video but.
I had some difficulty with overlays from Visual Studio Code over de the actual code.
Jumping from subject to subject and switching files.
So I would advice, take it a bit easy when jumping from file to file and please pay attention to indentation.
Great Video.Thanks
Thanks, this works for me.
Thanks for the feedback. Pleasee subscribe to the channel if you have not subscribed yet.
Amazing tutorial. you have explained it well. will i get sample code of this tutorial.
Thanks for the feedback. Please subscribe to the channel if you have not subscribed yet.
Here is the source code - github.com/AzureTeachNet/AzureTeachTutorials/tree/Angular_WebAPI_AzureAD_Authentication_Authorization
Awesome explanation, am getting the below error:
AADSTS9002326: Cross-origin token redemption is permitted only for the 'Single-Page Application' client-type.
Hi, how to redirect /login-failed route if login is not failed.
THANK YOU!!!!!!!
Thanks for the feedback. Please subscribe to the channel if you have not susbcribed yet.
Unable to perform routing after logging in and even on reload, it asks to sign in again, could you please help ? It's urgent.
I get a "No suitable injection token for parameter 'msalService' of class AppComponent" error when creating the msalService constructor. Could this be the version of Angular (14.2.11) that I'm running?
Hi AzureTeachNet , i´m subscribed however i´m trying to find this approach but on supported modern ANGULAR STANDALONE ( which does not use module.ts ) do you know how to achieve that? MSFT doc does not explain well either. thanks.
In our project we are using Angular 16 which is latest. Almost similar configurations are working. will find some time and make video. Thanks.
If our application is an SPA using angular and dotnet core then how do we register in azure? As an SPA or web application?
Front end should be registered as SPA. The channel already have the video with SPA front end and WebAPI backend with Azure AD. Thanks.
Hi, question what could be the problem in this scenario. If I refresh on the link "{mainurl}/page" the screen shows " the resource you are looking for has been remove, blah..blah ." But there is no issue if the refresh of page is done at the parent url.
Hi, Great video. I have a small question. Can we logout without navigating to the AD account selection screen? Thank you
you can try removing the token from the local storage. Of course, I did not try it as I never got such requirement. :-)
Is it possible to get the user detail who tries to access the angular application but don't have permission to access the angular application that has implemented azure ad for authentication?
Does anyone have any idea how to implement Azure Ad Authentication using MSAL in Angular 8?
do you have a tutorial how to authenticate angular app using nodejs express api using (azure ad) ?
Nope. Node.js is not our core stack.
Hello...Thanks for this video.I had a query..is it possible to do the skipping of the "Choose account.." pop up after log out.
That's is done by browser, not angular, because browser is saving the previously logged account on browser
Hi, I have this problem: 'MsalModule' does not appear to be an NgModule class.
Did you get it?? If you did pls help
Fluid attack is marking localStorage use as a vulnerability, is there another way to secure save msal token id?
can you try using sessionStorage?
where is the source code demo ? do you have any githiub repo ?
github.com/AzureTeachNet/AzureTeachTutorials/tree/Angular_WebAPI_AzureAD_Authentication_Authorization
Here you go. Please subscribe to the channel if you have not subscribed yet.
Great Video. Thanks.
Also, I followed your steps but after logging out, I am not being redirected to my application but the screen is stuck on the microsoft logout screen which says "You've signed out of your account". Please let me know if I have missed something.
Try clearing the browser cache.
did you ever figure this out? I am having the same issue. I have already cleared the browser cache and tried it out in firefox and chrome. Besides this line of code: this.authService.logoutRedirect({ postLogoutRedirectUri: 'localhost:4200/'});
Is there something else we need to configure in azure to be able to redirect on logout? The redirect for login is working fine obviously but the logout stays where you've mentioned.
Hi @vaibhavkale2463 I know it's been 2 years but do you remember how you fixed it? Clearing the cache did not work for me. 🥲
Thank you.. is there any way we get those clientid and tenant id from backend and then use it in app.module.ts file.
what is stopping you in keeping the ids here? If you feel about security, even if you add a backend call, still it is on client side and can be viewed by the users in developer tools.
@@azureteachnet you are right .. I have told my client but they don't want to keep these IDs on the frontend side.
@@TechPuzzle_Haven Then you can add an api which returns an encrypted or base64 encoded appid details. You should call it before your app loads. You can decrypt it on client side and hook it to azure configuration in your app. Base64 encode is easy as it is readily available in javascript.
Great video..!! Thanks. Can we show the login page of Microsoft without hitting login button
yes. you can add MSAL Guard on the home page itself in Routing Module. Refer routing module the code in github.
There is a lot in the channel. Please subscribe to the channel if you have not subscribed yet. Thank you.
Thank you so much . Let me try. Do subscribed👍
yes, put the login button code on ngOnInit :)
thank you for amazing tutorial , can you please provide code if possible ,i am currently getting error in angular 14 so
Here is the code - github.com/AzureTeachNet/AzureTeachTutorials/tree/Angular_WebAPI_AzureAD_Authentication_Authorization. I believe it was created in angular 13.0. Please subscribe to the channel if you have not subscribed yet. Thanks.
I've an issue. The app that I'm building required auth for all the routes accept for login route. I put the canActivat:[Msalguard] on all of them. So when the user goes to route and tries to log them in and then sends them back the redirect uri that's been set in the azure dashboa. how do fix this?
if you add CanActivate:MSALGuard, it should work unless you have configuration issues. Please take code from my github repo and test your scenario. If it is working in my code, please compare and see where you are missing.
@@azureteachnet How the canActivate: [MsalGuard] know if the user is already logged in. Because I think that's what I'm missing. If they are logged in the should allow access to that route without asking them to login again
@@mazwrld Generally, All the frontend frameworks like angular uses Guards. It will check for the presense of access token in local storage. If the token is present and is valid , not expired the framework will assume that the user is already logged in.
@@azureteachnet I just checked my local storage and I'm getting {"failedRequests":[865,"605465d4-5114-4fad-8bf2-71275a7cbbce"],"errors":["invalid_request"],"cacheHits":0}. That's my problem. The login isn't being saved to local storage for some reason
@@mazwrld could you please take code from my git repo and compare configuraitons? github.com/AzureTeachNet/AzureTeachTutorials/tree/Angular_WebAPI_AzureAD_Authentication_Authorization
Have you run into “Cross-Origin token redemption is permitted only for the ‘Single Page Application’ client type” error. Confused on where to go from here. I guess it’s an issue with the Origin header being sent to the login. Any ideas?
nope. are you using the same version of MSAL package. I guess, there was an upgrade to MSAL after I posted this video.
@@azureteachnet yeah looks like msal-angular and msal-browser are 2.3.2 and 2.26.0 respectively … I think you used 2.1.1 and 2.22.0
I want to note just in case someone else has this problem. If you have already configured a web application on Azure and then add an SPA platform this might cause the error I was getting. Setting up an SPA application on Azure from scratch should fix this
I am also facing this issue ...how you fixed this.....i am using 2.3.3 and 2.27.0 respectively
Hi, I am getting issue like Msal is not compatible with angular Ivy". Do you know how to resolve?
disable IVY in angular.json file.
@@azureteachnet hi thankyou so much your reply. Actually what is IVY ?
Hi, Do you have any plan to make video on ADFS with passport saml using nodejs.
I have plans to make video using Saml authentication but not with nodejs as I have expertise on .Net + Azure only. Thank you.
@@azureteachnet that's too fine. Waiting
In node js, how can we do this?
Hi i am getting the error while running it in the console
What error that it is showing
Cannot read properties of undefined (reading 'isUserLoggedIn')
And due to which my profile is not getting displayed
After doing this I'm getting cors exception can you please help me
If you are using web api as backend, allow cors in startup/program.cs class. Here is full video which has working app for Angular + Azure AD integration with Web API + Azure AD - ua-cam.com/video/98T1CumHofI/v-deo.html
If this is helpful to you.. please subscribe to the channel also share it with your friends.
helpful Thanks, is possible to get the current user email ?
It is possible. You can get it from the token claims. I guess the git repo have the details.
@@azureteachnet thanks
Do you have any github for this source code .
github.com/AzureTeachNet/AzureTeachTutorials/tree/Angular_WebAPI_AzureAD_Authentication_Authorization
Please subscribe to the channel if you have not subscribed yet.
what is the version of angular?
V13. here is the git link - github.com/AzureTeachNet/AzureTeachTutorials/tree/Angular_WebAPI_AzureAD_Authentication_Authorization/azuread-angular-demo.
Please subscribe to the channel if you have not subscribed yet.
github link ?
github.com/AzureTeachNet/AzureTeachTutorials/tree/Angular_WebAPI_AzureAD_Authentication_Authorization
Thanks man , I really appreciate your good work
where is the source code?
github.com/AzureTeachNet/AzureTeachTutorials/tree/Angular_WebAPI_AzureAD_Authentication_Authorization
Please subscribe to the channel if you have not subscribed yet.
22.30