Ends in:
2 DAYS
14 HRS
25 MIN
20 SEC
Ends in:
2 D
14 H
25 M
20 S
Open Closed

Azure AD Integration with Angular & Dotnet Core #4865


User avatar
0
vrkbandaru created
  • ABP Framework version: v7.0.0
  • UI type: Angular
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): yes
  • Exception message and stack trace:
  • Steps to reproduce the issue:"

Requirement: Need to Integrate Azure AD with Angular & Dotnet Core Microservice Solution, for this I have done below things (trying with Sample template).

I have created sample project with below command, Project successfully created and DbMigrations also done.

abp new Tasconnect.AzureAD -csf --tiered -dbms PostgreSQL --ui angular --separate-auth-server --version 7.0.0

I followed the below guide - https://community.abp.io/posts/how-to-setup-azure-active-directory-and-integrate-abp-angular-application-lyk87w5l?_ga=2.190040555.1947306436.1679285896-1009902313.1678032354

Application registered in Azure portal and done below code changes: Auth Server: AzureADAuthServerModule.cs Auth Server AppSettings.json

then running both Dotnet Core and Angular Application but Angular is giving "404" error.

Dotnet Core: https://localhost:44344/

https://localhost:44336/

Angular: Error showing the as resource not available, but its running

URL is returning some data.

  1. Why Angular Application is showing "404" error, Could you please provide the resolution for this?
  2. is Azure AD Integration works with ABP 4.3.1 Framework (Separate Identity Server/)?
  3. Could you please provide the steps, which are working?
  4. is there any changes/configurations required in Angular App?

Thank & Regards, Venkat Bandaru


33 Answer(s)
  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    I can't reproduce the problem with your steps

    is Azure AD Integration works with ABP 4.3.1 Framework (Separate Identity Server/)?

    Yes, it should work.

  • User Avatar
    0
    vrkbandaru created

    Hi,

    I can't reproduce the problem with your steps

    is Azure AD Integration works with ABP 4.3.1 Framework (Separate Identity Server/)?

    Yes, it should work.

    I am using sample template only, with above mentioned command, I tried multiple times, but same issue persists.

    without Azure AD configurations also experiencing the same issue, please assist on this

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Can you share the project with me? shiwei.liang@volosoft.com

  • User Avatar
    0
    vrkbandaru created

    Can you share the project with me? shiwei.liang@volosoft.com

    zipped folder size is 173MB, How can I send through email?

    Run the below command abp new Tasconnect.AzureAD -csf --tiered -dbms PostgreSQL --ui angular --separate-auth-server --version 7.0.0

    Angular app generated through this command is not running (Dotnet core is running).

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    zipped folder size is 173MB, How can I send through email?

    You can use one drive or google drive.

    abp new Tasconnect.AzureAD -csf --tiered -dbms PostgreSQL --ui angular --separate-auth-server --version 7.0.0 Angular app generated through this command is not running (Dotnet core is running).

    I tried it and it worked for me

  • User Avatar
    0
    vrkbandaru created

    zipped folder size is 173MB, How can I send through email?

    You can use one drive or google drive.

    abp new Tasconnect.AzureAD -csf --tiered -dbms PostgreSQL --ui angular --separate-auth-server --version 7.0.0 Angular app generated through this command is not running (Dotnet core is running).

    I tried it and it worked for me

    Onedrive link shared to your email id -shiwei.liang@volosoft.com

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    There is no problem with the project you provided:

    My steps:

    • Create database and run the AuthServer& HttpApi.Host projects
    • Run yarn install & yarn start on the angular folder
  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Can I check it remotely via zoom?

  • User Avatar
    0
    vrkbandaru created

    There is no problem with the project you provided:

    My steps:

    • Create database and run the AuthServer& HttpApi.Host projects
    • Run yarn install & yarn start on the angular folder

    I too done the same but in Angular Application I am getting 404

  • User Avatar
    0
    vrkbandaru created

    Can I check it remotely via zoom?

    yes, we can have a zoom call.

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    ok, I have sent an email to you.

  • User Avatar
    0
    vrkbandaru created

    ok, I have sent an email to you.

    ok, thank you, replied to that email.

  • User Avatar
    0
    vrkbandaru created

    ok, I have sent an email to you.

    ok, thank you, replied to that email.

    Thanks for your call, as discussed in call, you need to reply on the below.

    For Azure Ad Integration, we have done the code changes only in Dotnet Core application, but Angular Application also displaying the "Azure AD OpenId" button on the screen, Could you please explain how Angular is displaying this button? Waiting for your reply on this question.

    Note: Similar functionality I need to implement in my Enterprise application (in Custom Login Page).

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    in Custom Login Page

    Where did you customize the Login page? Angular or MVC?

    Can you share some screenshots?

  • User Avatar
    0
    vrkbandaru created

    in Custom Login Page

    Where did you customize the Login page? Angular or MVC?

    Can you share some screenshots?

    in Angular Login page theme changed. Please explain how Angular application placing the "Azure ADOpenId" button?

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    Your angular application use Resource owner flow, it's different.

    It's not related to ABP but Microsoft. you can check the document: https://learn.microsoft.com/en-us/azure/active-directory-b2c/configure-authentication-sample-angular-spa-app

    • It has nothing to do with the AuthServer backend, This means that after Azure AD logs in, you need to register (create) the user if the does not exist in the database.
  • User Avatar
    0
    vrkbandaru created

    Hi,

    Your angular application use Resource owner flow, it's different.

    It's not related to ABP but Microsoft. you can check the document: https://learn.microsoft.com/en-us/azure/active-directory-b2c/configure-authentication-sample-angular-spa-app

    • It has nothing to do with the AuthServer backend, This means that after Azure AD logs in, you need to register (create) the user if the does not exist in the database.

    Could you please guide me on below?

    1. for now, I need to allow both flows " Resource owner flow" and "Azure AD OpenId" Login for my application, please guide me on this.
    2. is there any ABP documentation on "Resource owner flow", if yes please provide links.
  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    The recommended way is to use code flow, all steps have been completed in the backend and all you need to do is a few simple configuration steps.

    for now, I need to allow both flows " Resource owner flow" and "Azure AD OpenId" Login for my application, please guide me on this. is there any ABP documentation on "Resource owner flow", if yes please provide links.

    Sorry, but there is no such document from ABP. But the Azure AD document is detailed and also has some videos on youtube: https://www.youtube.com/watch?v=vjpKYSmvRKQ

    You have a lot of work to do besides that. I can give you some points:

    • When users log in from Azure AD, it also needs to log in to the local account

    You can custom a grant_type e.g: AzureAdLogin and pass the access_token(from AzureAD) to call Azure Ad API to get the user profile and create a user it does not exist in the database https://identityserver4.readthedocs.io/en/latest/topics/extension_grants.html

  • User Avatar
    0
    vrkbandaru created

    Hi,

    The recommended way is to use code flow, all steps have been completed in the backend and all you need to do is a few simple configuration steps.

    for now, I need to allow both flows " Resource owner flow" and "Azure AD OpenId" Login for my application, please guide me on this. is there any ABP documentation on "Resource owner flow", if yes please provide links.

    Sorry, but there is no such document from ABP. But the Azure AD document is detailed and also has some videos on youtube: https://www.youtube.com/watch?v=vjpKYSmvRKQ

    You have a lot of work to do besides that. I can give you some points:

    • When users log in from Azure AD, it also needs to log in to the local account

    You can custom a grant_type e.g: AzureAdLogin and pass the access_token(from AzureAD) to call Azure Ad API to get the user profile and create a user it does not exist in the database https://identityserver4.readthedocs.io/en/latest/topics/extension_grants.html

    1. From Backend (Tiered Identity Server), I am able to login using Azure AD Account (after successful login, user id also inserting in to abpusers table).
    2. From Angular Application, as you said that we are following "Resource owner flow", I am getting only username, password screen, there is no button for Azure AD OpenId button to login to Azure AD Account, for this I have changed the configuration in "environment.ts" to go with "Authorization code flow", but while running the Angular application, the web page is not displaying any thing, its giving only "Can';t get" error on the screen.

    Could you please suggest on further steps (OR) I am ready for zoom call also.

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    Please use the authorization code flow.

    const oAuthConfig = {
      ....
      responseType: 'code',
      ....
    };
    
  • User Avatar
    0
    vrkbandaru created

    Hi,

    Please use the authorization code flow.

    const oAuthConfig = { 
      .... 
      responseType: 'code', 
      .... 
    }; 
    

    using the same only in Angular app, as in below screen shot but not working. any changes required from .net core side?

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    Could you share a GIF image?

  • User Avatar
    0
    vrkbandaru created

    Hi,

    Could you share a GIF image?

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    What happens if you click the login button, will it redirect to the auth server login page?

  • User Avatar
    0
    vrkbandaru created

    Hi,

    What happens if you click the login button, will it redirect to the auth server login page?

    After changing he configuration from "Resource Owner flow" to "Code Flow" in "Environment.ts" file, Angular Application is displaying the below page, there is no login button on the page. ABP Framework Version is - 4.3.1.

Made with ❤️ on ABP v9.1.0-preview. Updated on December 02, 2024, 12:35