Open Closed

Custom Redirection to third-party IdP Login Page and Dashboard Post-Authentication in ABP.IO #7788


User avatar
0
Repunjay_TASC created
  • ABP Framework version: 8.0
  • UI Type: Angular
  • Database System: EF Core (PostgreSQL)
  • Auth Server Separated (for Angular): yes
  • Exception message and full stack trace:
  • Steps to reproduce the issue:

Objective: To bypass the ABP.IO login page and redirect users directly to the IdP’s login page, and after successful authentication, redirect them to application’s dashboard.

Description :- I have integrated OpenIdConnect with a third-party Identity Provider (IdP) in a new ABP.IO template project, and it is working as expected. However, we have a requirement where, when a client clicks on our application logo (which is already configured within their application), they should be redirected directly to the IdP's login page instead of the ABP.IO login page. After authentication with the IdP, the user should be redirected to our dashboard.

I need assistance how to handle routing and above scenario in abp.io template.

<br> I don't want to show below screen for OpenIdConnect login user.


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

    Hi,

    It's easy to do, you can disable the local login on the setting page

  • User Avatar
    0
    Repunjay_TASC created

    Thanks for update; I have created new abp.io template project and this Account option not visible for me what configuration required to visible this options.

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    Seems like you are using the open-source template.

    This feature is a port of the abp account pro module.

    you can try removing the account module and installing the account pro module to use this feature.

  • User Avatar
    0
    Repunjay_TASC created

    how to remove account module and install the account pro module ? Can you pls provide steps

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    after my check, replacing modules requires changes to database tables. It may be troublesome to migrate data.

    you can try this

    public class MySettingDefinitionProvider : SettingDefinitionProvider
    {
        public override void Define(ISettingDefinitionContext context)
        {
            var enableLocalLoginSetting = context.GetOrNull("Abp.Account.EnableLocalLogin");
    
            if (enableLocalLoginSetting != null)
            {
                enableLocalLoginSetting.DefaultValue = "false";
            }
        }
    }
    
  • User Avatar
    0
    Repunjay_TASC created

    Hi liangshiwei,

    As per you suggestion i have added above code in project , however, it's not working as expected. After click on login page directly redirected to IDP , please find attached screen shot.

    It causes my existing login function to fail if the user is not a third-party user. When the user clicks the login button, they are automatically redirected to the IDP login page, which results in a failure scenario

    Login should handle both the scenario.

    1. Existing ABP.IO login page.
    2. when a client clicks on our application logo (which is already configured within their application), they should be redirected directly to the IdP's login page instead of the ABP.IO login page. After authentication with the IdP, the user should be redirected to our dashboard.
  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    sorry, maybe I misunderstood. so you want to keep the abp login page.

    when a client clicks on our application logo (which is already configured within their application),

    where is the logo? can you share the screenshot?

  • User Avatar
    0
    Repunjay_TASC created

    Hi,

    sorry, maybe I misunderstood. so you want to keep the abp login page.

    when a client clicks on our application logo (which is already configured within their application),

    where is the logo? can you share the screenshot?

    1.Existing User ABP.IO login page.

    2.when a client clicks on our application logo (which is already configured within their application), they should be redirected directly to the IdP's login page instead of the ABP.IO login page. After authentication with the IdP, the user should be redirected to our dashboard. Note :- Point no 2 i don't want to show any login page directly redirected to IDP

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    Although I don’t know what the logo looks like, but you can add a Controller to redirect to IDP login page.

    for example:

    <a href="/idp/login"><img .../></a>
    
    public class IDPController : AbpControllerBase
    {
        public IActionResult Login()
        {
            var returnUrl = "<YourURL>/dashbaord";
            var provider = "<SchameName>"; //OpenIdConnect
            var redirectUrl = Url.Page("/Account/Login", pageHandler: "ExternalLoginCallback", values: new { ReturnUrl });
            var properties = SignInManager.ConfigureExternalAuthenticationProperties(provider, redirectUrl);
            properties.Items["scheme"] = provider;
            
            return Challenge(properties, provider);
        }
    }
    
  • User Avatar
    0
    Repunjay_TASC created

    Hi,

    Although I don’t know what the logo looks like, but you can add a Controller to redirect to IDP login page.

    for example:

    <a href="/idp/login"><img .../></a> 
    
    public class IDPController : AbpControllerBase 
    { 
        public IActionResult Login() 
        { 
            var returnUrl = "<YourURL>/dashbaord"; 
            var provider = "<SchameName>"; //OpenIdConnect 
            var redirectUrl = Url.Page("/Account/Login", pageHandler: "ExternalLoginCallback", values: new { ReturnUrl }); 
            var properties = SignInManager.ConfigureExternalAuthenticationProperties(provider, redirectUrl); 
            properties.Items["scheme"] = provider; 
             
            return Challenge(properties, provider); 
        } 
    } 
    


    this code we will provide in client side with correct endpoint url .

    And below code we will add in our controller side.

    I have two question.

    1. No need to add any code change in our angular side?
    2. Above code automatically redirected angular page dashboard ?
  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    I have one question to you no need to add any code change in our angular side automatically redirected our dashboard ?

    you can set the reutrnUrl to redirect to the dashboard

  • User Avatar
    0
    Repunjay_TASC created

    I have two question.

    No need to add any code change in our angular side?

    Above code automatically redirected angular page dashboard ?

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    i think so, you can give it a try

  • User Avatar
    0
    Repunjay_TASC created

    let me try and get back to you. Mean while if you confirm this it will help full to us. Thanks in advance.

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    okay

  • User Avatar
    0
    Repunjay_TASC created

    I have one question to you no need to add any code change in our angular side automatically redirected our dashboard ?

    you can set the reutrnUrl to redirect to the dashboard

    This code is not working.

    Can you please provide an exact solution? This is a high priority, and we have already started implementation for our client. We are currently stuck due to the above issue, and it has been escalating internally.

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    This code is not working.

    can you explain more? which part not working, share a GIF image or some screenshots

  • User Avatar
    0
    Repunjay_TASC created

    below point is not working

    when a client clicks on our application logo (which is already configured within their application), they should be redirected directly to the IdP's login page instead of the ABP.IO login page. After authentication with the IdP, the user should be redirected to our dashboard.

    After authenticated with IDP user should be redirected dashboard in angular page .

    1. what changes required in angular side as well as api side which handle callback url and properly route in dashboard .
  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Just like I said above

    The logo href link must like this

  • User Avatar
    0
    Repunjay_TASC created

    Hi can you pls give me your email id i will share you my project over email can you pls try your side . I tried what you suggested still facing error.

    I will share sample IDP credentials as well which is for Testing purpose

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    shiwei.liang@volosoft.com

  • User Avatar
    0
    Repunjay_TASC created

    I have shared project using WeTransfer pls check email, However, shared some information as well

  • User Avatar
    0
    Repunjay_TASC created

    Any update ?

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Sorry, your code confuses me.

    If you want to log in as an external user, why does this controller need authorization? and you should put the controller into the AuthServer project.

    First you can run below URL in brower after authenticated with IDP automatically redirected login method which is present in controller. UR; :- https://localhost:44373/api/oidc/authorize

    It gives me an error

    when I run the angular project, i didn't see any logo

  • User Avatar
    0
    Repunjay_TASC created

    It's call back URL issue, Once you able to successfully login with idp redirected specific endpoint . let me fix in IDP side

Made with ❤️ on ABP v9.0.0-preview Updated on September 18, 2024, 12:46