- ABP Framework version: v5.2.2
- UI Type: Angular
- Database System: EF Core
- Tiered (for MVC) or Auth Server Separated (for Angular): yes
Hi There,
I hope you are well.
We are integrating Okta as an external login provider for our application. We have added the following configuration to the ConfigureExternalProviders function in the AuthServerModule:
.AddOpenIdConnect(OpenIdConnectDefaults.AuthenticationScheme, "Okta",
options =>
{
options.Authority = "https://xxxxxx.okta.com/oauth2/default";
options.ClientId = "my client Id";
options.ClientSecret = "my client secret";
options.ResponseType = OpenIdConnectResponseType.Code;
options.Scope.Clear();
options.Scope.Add("offline_access");
options.Scope.Add("openid");
options.Scope.Add("profile");
options.Scope.Add("email");
options.SaveTokens = true;
options.ResponseMode = OpenIdConnectResponseMode.Query;
options.Events = new OpenIdConnectEvents
{
OnRedirectToIdentityProvider = context =>
{
// Perform any custom logic before redirecting to Okta
context.ProtocolMessage.RedirectUri = "http://localhost:4200";
return Task.CompletedTask;
},
};
});
My login page now has the option to login with Okta:
This is the settings that I have in my Okta Application settings:
As you can see I have configured the redirect URL on both sides to be http:localhost:4200 which is my Angular frontend. When I login to my application using the Okta option, I see the authentication happening correctly on the Okta side and after the authentication I am redirected to http:localhost:4200. The problem is that I don't get logged into my application because I get the error 'Validating access_token failed'. I do notice that the nounce, access_token, refresh_token etc are missing from the local storage for http://localhost:4200
Please advice on what I am missing and how I can resolve this issue. Your assistance is greatly appreciated.
10 Answer(s)
-
0
-
0
-
0
Hi,
We have followed following steps:
create a app on okta (https://developer.okta.com/docs/guides/sign-into-web-app-redirect/asp-net-core-3/main/)
please add redirect url on okta of authserver (i see that you have added for angular this need to be authserver url)
and then install <PackageReference Include="Okta.AspNetCore" Version="4.5.0" /> package
add following config in appsetting.json
"Okta": { "OktaDomain": "https://dev-xxxxxxxx.okta.com", "ClientId": "0oaaxxxxxxxxxx", "ClientSecret": "VZlZPpOexxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", "AuthorizationServerId": "default" }
let us know your email and we will share your this solution if possible.
Thanks, Anjali
-
0
-
0
-
0
Hello Mohammed.sheik,
Please do let us know if this solution has worked for you?
If you are still facing the issue, please do share your solution on support@abp.io so that we can help you better.
Awaiting for your response.
Thank You, Anjali
-
0
Hello Mohammed.sheik,
Please do let us know if this solution has worked for you?
If you are still facing the issue, please do share your solution on support@abp.io so that we can help you better.
Awaiting for your response.
Thank You, Anjali
Hi Anjali,
I hope you are doing well. I am still experiencing the above exceptions and unfortunately due to company policy I cannot share the solution. Can we please arrange for a call where I could take you through all my configurations?
Thank you for the great support!
Best Regards, Mohammed
-
0
hi Mohammed
context.ProtocolMessage.RedirectUri = "http://localhost:4200";
You should not redirect to angular. It should be redirected to authserver, and then authserver will be redirected to angular.
Or can you explain why you did this?
-
0
Hi Maliming,
Angular app directs login to auth server using below url. The redirect_url parameter is set to http://localhost:4200 and that is why I have been trying to redirect to the Angular frontend from Okta.
I changed my Okta app settings to use the auth server url (https://localhost:44322/Account/Login)
and my AuthServerModule looks like this:
.AddOpenIdConnect(OpenIdConnectDefaults.AuthenticationScheme, "Okta", options => { options.Authority = "https://xxxxxx.okta.com/oauth2/default";
options.ClientId = "my client Id"; options.ClientSecret = "my client secret"; options.ResponseType = OpenIdConnectResponseType.Code; options.Scope.Clear(); options.Scope.Add("offline_access"); options.Scope.Add("openid"); options.Scope.Add("profile"); options.Scope.Add("email"); options.SaveTokens = true; options.ResponseMode = OpenIdConnectResponseMode.Query; options.Events = new OpenIdConnectEvents { OnRedirectToIdentityProvider = context => { // Perform any custom logic before redirecting to Okta context.ProtocolMessage.RedirectUri = "https://localhost:44322/Account/Login"; return Task.CompletedTask; }, }; });
The redirect from Okta to my auth server works and the URL params (Code and State) are being set however it does not log me into the application and does not redirect me to Angular frontend.
Any thoughts or advice on this?
-
0
hi
The flow should be like:
- angular request oauth2 login
- You will be redirected to authserver login page.
- Click the
Okta
external login icon in authserver login page. - You will be redirected to the
Okta
login page and complete the authentication. - You will be redirected authserver website and you already have the login state.
- authserver will generate the code and redirect to angular.
- angular get the code and use it the access_token from authserver
Please don't change any code on
OnRedirectToIdentityProvider
and don't useOkta
info in the angular app. it only uses authserver info for authentication.