Thank you for the video. I want to see the data in endpoints. Could you provide the ExpenseTracker database so that we can download it and restore it in ms sql server please?
Thanks for the video. It is really great. I am facing one issue as I am using enterprise application to implement SSO so in that case also it should be mandatory to have app registration. As I am facing CORS error when sending the request in the browser but when I am pasting the SAML request in the other tab it is working correctly.
Hi Ayush, Thank you so much for the kind words! I'm glad you found the video helpful. Regarding your issue, when you're using an enterprise application for SSO, it's still necessary to have app registration in Azure AD, even if you're using a pre-configured enterprise app. App registration ensures that your application is properly configured to work with Azure AD, including setting up redirect URIs and permissions. As for the CORS error, this typically happens because Azure AD and the browser security policies prevent cross-origin requests when proper configurations aren’t in place. Here are a few things you can check: App Registration: Ensure that your redirect URIs and CORS settings are configured correctly in the Azure portal for the app registration. CORS in API: Make sure that CORS is enabled in your backend API to allow requests from your frontend app's domain. You may need to whitelist specific origins in your API. SAML Request in Browser: When you're manually pasting the SAML request, it works because the browser isn't blocking it like in a programmatic request, hence why it bypasses the CORS policies. Let me know if this helps, and feel free to share more details if the issue persists!
@@learnsmartcoding Thanks for your humble reply. In my case there is one thing that my SSO Login will be based on the user's setting that wether the user has sso enabled or not and this will be checked when user will enter thier username and on behalf of it we initiate the SSO login otherwise move to next page for entering password. So for that I have to initiate the SSO login from Controller level based on the scenario required. Can you help me with that?
@learnsmartcoding like what should be settings for backend and front end in this case or they will be same like only have to do app registration and registration of enterprise application
Hi Srikanth, When the auth token expires, you typically handle it by refreshing the token before it expires. In Angular, if you're using MSAL (Microsoft Authentication Library), it automatically tries to refresh the token silently using the refresh token. You don't need to write extra code for that in most cases. However, adding an AuthGuard can help protect routes, ensuring users are authenticated before accessing them. If MSAL fails to refresh the token, it will redirect the user to authenticate. Hope this helps
@@srikanthvengala8769 Yes, it’s possible to register multiple API services for a single SPA (Single Page Application) in Azure AD. Here's how it works: Multiple API Scopes: You can configure your SPA (Angular app) to call multiple backend services (microservices), but each microservice should be registered in Azure AD with its own app registration. This is necessary so that each service can define its own permissions (scopes) and allow proper token issuance. Scopes in SPA: In your Angular app, you would request tokens for each backend API using their respective scopes. You can configure the AdConfig to include the necessary scope URLs for each of your microservices. When your app needs to call a specific microservice, it will send the appropriate token based on the scope defined for that API. Single Sign-On (SSO): While each microservice is registered separately, the user doesn't need to sign in multiple times. The SSO will take care of managing user authentication across all your services, and your Angular app will handle the tokens for different services seamlessly. So to summarize: Each microservice should be registered individually in Azure AD. Your SPA can then request access to multiple APIs by specifying the relevant scopes for each microservice. This approach is standard for microservices architecture, ensuring each service has its own security boundary, but with the convenience of using a single SPA. Take a look at this video ruclips.net/video/Pa_u6cdq6E4/видео.htmlsi=HnuvHuONCp9wHE1h Angular app calling 4 different microservices. Hope this clarifies your question!
Thanks bro. It was good Learning
Thank you for the video. I want to see the data in endpoints. Could you provide the ExpenseTracker database so that we can download it and restore it in ms sql server please?
Hi, Here is the script for the database.
github.com/learnsmartcoding/expense-tracker-web-api/blob/main/ExpenseTracker.Data/ExpenseTrackingApp.sql
Thanks for the video. It is really great. I am facing one issue as I am using enterprise application to implement SSO so in that case also it should be mandatory to have app registration. As I am facing CORS error when sending the request in the browser but when I am pasting the SAML request in the other tab it is working correctly.
Hi Ayush,
Thank you so much for the kind words! I'm glad you found the video helpful.
Regarding your issue, when you're using an enterprise application for SSO, it's still necessary to have app registration in Azure AD, even if you're using a pre-configured enterprise app. App registration ensures that your application is properly configured to work with Azure AD, including setting up redirect URIs and permissions.
As for the CORS error, this typically happens because Azure AD and the browser security policies prevent cross-origin requests when proper configurations aren’t in place. Here are a few things you can check:
App Registration: Ensure that your redirect URIs and CORS settings are configured correctly in the Azure portal for the app registration.
CORS in API: Make sure that CORS is enabled in your backend API to allow requests from your frontend app's domain. You may need to whitelist specific origins in your API.
SAML Request in Browser: When you're manually pasting the SAML request, it works because the browser isn't blocking it like in a programmatic request, hence why it bypasses the CORS policies.
Let me know if this helps, and feel free to share more details if the issue persists!
@@learnsmartcoding Thanks for your humble reply. In my case there is one thing that my SSO Login will be based on the user's setting that wether the user has sso enabled or not and this will be checked when user will enter thier username and on behalf of it we initiate the SSO login otherwise move to next page for entering password.
So for that I have to initiate the SSO login from Controller level based on the scenario required. Can you help me with that?
@learnsmartcoding like what should be settings for backend and front end in this case or they will be same like only have to do app registration and registration of enterprise application
@@learnsmartcoding Also it is mandatory to add scopes since we are using currently JWT authentication and will be adding SSO login to the application
@@learnsmartcoding Please reply. Can we connect?
What happens if auth token expires. How to handle it in angular code. Do we need to have authgaurd to refresh the token??
Hi Srikanth,
When the auth token expires, you typically handle it by refreshing the token before it expires. In Angular, if you're using MSAL (Microsoft Authentication Library), it automatically tries to refresh the token silently using the refresh token. You don't need to write extra code for that in most cases. However, adding an AuthGuard can help protect routes, ensuring users are authenticated before accessing them. If MSAL fails to refresh the token, it will redirect the user to authenticate.
Hope this helps
@@learnsmartcoding Thank you.
Is it possible to register multiple api services into single SPA app. Like calling apis to independent microservices
@@srikanthvengala8769
Yes, it’s possible to register multiple API services for a single SPA (Single Page Application) in Azure AD. Here's how it works:
Multiple API Scopes: You can configure your SPA (Angular app) to call multiple backend services (microservices), but each microservice should be registered in Azure AD with its own app registration. This is necessary so that each service can define its own permissions (scopes) and allow proper token issuance.
Scopes in SPA: In your Angular app, you would request tokens for each backend API using their respective scopes. You can configure the AdConfig to include the necessary scope URLs for each of your microservices. When your app needs to call a specific microservice, it will send the appropriate token based on the scope defined for that API.
Single Sign-On (SSO): While each microservice is registered separately, the user doesn't need to sign in multiple times. The SSO will take care of managing user authentication across all your services, and your Angular app will handle the tokens for different services seamlessly.
So to summarize:
Each microservice should be registered individually in Azure AD.
Your SPA can then request access to multiple APIs by specifying the relevant scopes for each microservice.
This approach is standard for microservices architecture, ensuring each service has its own security boundary, but with the convenience of using a single SPA.
Take a look at this video ruclips.net/video/Pa_u6cdq6E4/видео.htmlsi=HnuvHuONCp9wHE1h
Angular app calling 4 different microservices.
Hope this clarifies your question!