Redirecting to IdentityServer login page instead of Angular login page #8314

Repunjay_TASC created 5 months ago

ABP Framework version: 8.3.1
UI Type: Angular
Database System: EF Core (PostgreSQL)
Tiered (for MVC) or Auth Server Separated (for Angular): yes

Once I run the below base URL in the browser, instead of loading the Angular login page, the IdentityServer login page is loaded.

For your reference pls find attached screen shot.

After adding the redirectUri and responseType parameters in my environment.ts file as part of the SSO OIDC integration, the SSO OIDC integration is working as expected. However, it is breaking the existing functionality.

If I comment out the redirectUri parameter, my Angular login page loads successfully. However, without commenting out the redirectUri parameter, how can I handle both scenarios: the normal user login page and the SSO OIDC login functionality?

const baseUrl = 'http://localhost:4200';
const oAuthConfig = {
  issuer: 'https://localhost:44350/',
  redirectUri: baseUrl,
  clientId: '',
  responseType: 'code',
  scope: 'offline_access ',
  requireHttps: true,
  showDebugInformation: true,
  requireHttps: true,
};

liangshiwei created 5 months ago

Support Team Fullstack Developer

Hi,

The Angular login page is not supported for external login support, so you have to redirect to the IdentityServer first.

Repunjay_TASC created 5 months ago

Ok got it.

In my existing application, I want to handle two approaches:

1.Users are able to log in using the ABP Angular page (these are not external users).

2.Some of our users are external users and need to log in via SSO (external login).

To enable external login using SSO, I have added the following code in the home module.

This ensures that whenever a user visits the specified URL, they are automatically redirected to the external login page. After authentication, the user is redirected back to the ABP auth server, and this functionality is working as expected.

like this ticket.
https://abp.io/support/questions/7788/Custom-Redirection-to-third-party-IdP-Login-Page-and-Dashboard-Post-Authentication-in-ABPIO?CurrentPage=2

liangshiwei created 5 months ago

Support Team Fullstack Developer

Hi,

I because it is difficult to implement

Users are able to log in using the ABP Angular page (these are not external users).
Some of our users are external users and need to log in via SSO (external login).

How do you know which method the user should use when they are not logged in?

Repunjay_TASC created 5 months ago

Hi,

I because it is difficult to implement

Users are able to log in using the ABP Angular page (these are not external users).

We will make it very simple .

**1. If I comment out the parameters redirectUri: baseUrl and responseType: 'code' from the environment.ts file, the Angular login page loads successfully. **

Like below

Note: The application is already running live using the first approach.

Some of our users are external users and need to log in via SSO (external login).

How do you know which method the user should use when they are not logged in?

2. For sso oidc integration angular side i have added below code changes.

redirectUri: baseUrl and responseType: 'code' added in environment.ts file.

We have a requirement where we provide a URL to the client, like below:
http://localhost:4200/?idp=oidc
Whenever a user visits the specified URL, they should first land on the home module, and I have added the following code.

Check the condition, and if it matches, they are automatically redirected to the external login page.
After authentication, the user is redirected back to the ABP auth server then we cross check user exists or not , then we add user in DB with role and redirected to angular and this functionality is working as expected.

Exception: If I comment out from the environment.ts file, the first approach works as expected. However, for SSO, setting redirectUri: baseUrl is mandatory for successful SSO integration.