Asked by:
callback to angular2 return HTTP Error 404.0 - Not Found using and identityServer4

Question
-
User-687613544 posted
Hi,
I try to use angular2 and identityServer4 but after login , a got a HTTP Error 404.0 - Not Found (The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.) it seems the error is related to IIS ,but how can I resolve it ?
IdentityServer configuration :
private readonly List<Client> clients = new List<Client> { new Client { ClientId = "angular_spa", ClientName = "Angular 4 Client", AllowedGrantTypes = GrantTypes.Implicit, AllowedScopes = new List<string> {"openid", "profile", "api1"}, RedirectUris = new List<string> {"http://localhost:4200/auth-callback"}, PostLogoutRedirectUris = new List<string> {"http://localhost:4200/"}, AllowedCorsOrigins = new List<string> {"http://localhost:4200"}, AllowAccessTokensViaBrowser = true } };
Angular2 configuration
export function getClientSettings(): UserManagerSettings { return { authority: 'http://localhost:5555/', client_id: 'angular_spa', redirect_uri: 'http://localhost:4200/auth-callback', post_logout_redirect_uri: 'http://localhost:4200/', response_type: "id_token token", scope: "openid profile api1", filterProtocolClaims: true, loadUserInfo: true }; }
AppRoutingModule
@NgModule({ imports: [ RouterModule.forRoot([ { path: 'home', component: HomeComponent }, { path: 'products', canActivate: [AuthGuard], data: { preload: true }, loadChildren: 'app/products/product.module#ProductModule' }, { path: 'protected', component: ProtectedComponent, canActivate: [AuthGuardService] }, { path: 'auth-callback', component: AuthCallbackComponent }, { path: 'call-api', component: CallApiComponent, canActivate: [AuthGuardService] }, { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: '**', component: PageNotFoundComponent } ]) ], exports: [RouterModule] }) export class AppRoutingModule { }
the route http://localhost:4200/auth-callback exist very well
<a routerLink="/auth-callback">auth-callback</a>
If I click on the link auth-callback, the page auth-callback is displayed. But does not displayed if we redirect from auth2.
the error message is : HTTP Error 404.0 - Not Found
the redirection url is :
http://localhost:4200/auth-callback#id_token=eyJhbGciOiJSUzI1NiIsImtpZCI6IjhjODZhZGMzNmFjOGVlZDcyYjk1NmMyMGM0OTNmYWExIiwidHlwIjoiSldUIn0.eyJuYmYiOjE1MDYyNzI0OTQsImV4cCI6MTUwNjI3Mjc5NCwiaXNzIjoiaHR0cDovL2xvY2FsaG9zdDo1NTU1IiwiYXVkIjoiYW5ndWxhcl9zcGEiLCJub25jZSI6IjM4M2EyMDhlYTk5YjQ2YWQ5ODkxYWM4ZDQwNzliMjI2IiwiaWF0IjoxNTA2MjcyNDk0LCJhdF9oYXNoIjoiU1lPZmZxX0tZOUV4NUY1QlJwM2FKUSIsInNpZCI6IjMxM2E2ZDgxNmFkZjhiMGYyZmViOTNlMDMyOTBjYzdlIiwic3ViIjoiODE4NzI3IiwiYXV0aF90aW1lIjoxNTA2MjcyNDI2LCJpZHAiOiJsb2NhbCIsImFtciI6WyJwd2QiXX0.PAEE9cuc5G3MCtda0LXgBOMASQvmekqNNfMvf-JQxV6ENOG7usuztR6MK0krJ2O_IZPDcbxkc4F1nAR0AmYBDZX9RGQqu9q-ylUm78P_woeOTwtKh7NZbHpbrWLXrI1BpZeifijkXP35YlLqEulhPNGJd7wXh-oSXASU_znCV4B9RmuBjlH1Po7hKk2KP9IsXTZBeSHbnzVV5rSO9WLGJQkxKEJ0V8uuWLdOux6kpUNtYYEnhixx7gJCLBfFSNmdKiH4GsXWb41HMCpbLMwiflu60Sr-HcsiP_eYYRJaA8l6JvSm4lEHrJ6PRpNhAWVHrEc6BxySr-NfMonZt53gtw&access_token=eyJhbGciOiJSUzI1NiIsImtpZCI6IjhjODZhZGMzNmFjOGVlZDcyYjk1NmMyMGM0OTNmYWExIiwidHlwIjoiSldUIn0.eyJuYmYiOjE1MDYyNzI0OTQsImV4cCI6MTUwNjI3NjA5NCwiaXNzIjoiaHR0cDovL2xvY2FsaG9zdDo1NTU1IiwiYXVkIjpbImh0dHA6Ly9sb2NhbGhvc3Q6NTU1NS9yZXNvdXJjZXMiLCJhcGkxIl0sImNsaWVudF9pZCI6ImFuZ3VsYXJfc3BhIiwic3ViIjoiODE4NzI3IiwiYXV0aF90aW1lIjoxNTA2MjcyNDI2LCJpZHAiOiJsb2NhbCIsInNjb3BlIjpbIm9wZW5pZCIsInByb2ZpbGUiLCJhcGkxIl0sImFtciI6WyJwd2QiXX0.kE6cbK1eVTcbneQo2Yw7voHO2soveP-LzMIblE-VyAyxUhtCeMwiHYeR2Ffu76fK9doeROFMaU0C_Z90UFwt2Z_uThPDJpx5FfmxInapLdcsBFSlUvPEsRmJiEuvRBYfPdBwrFw57DE7j3cWXOmHOQpx2co8840b83MU7zJIrqDJrJhjXNwhkDrGfa0v2vPLMfvf7niZtn4a5lGXKkzf0z2rx1aNfsvM84xYD4SQDvKnTnjG-dd4PBIfe7UXB9x1Cti60f3676MTvIMmVofjks7MqhdnustCfuZC1R3SZycdvL7foo_DkQ7PQSy2WIKgdcferhLbuDaHMe8zSah3ug&token_type=Bearer&expires_in=3600&scope=openid%20profile%20api1&state=f0c79f45772b491aaf7f915ea7c09f90&session_state=1p_ClpBY9KDR9v-FnbBlJcTEAKtvtbwWukdgi_mV3TQ.d22413b2a257b070c4ea791b02f9564a
Best regards
Tuesday, September 26, 2017 2:49 PM
All replies
-
User-1508012637 posted
Hi mously,
According to your description, please refer to the following post which might be helpful:
Best Regards
VelenDisclaimer: This response contains a reference to a third party World Wide Web site. Microsoft is providing this information as a convenience to you. Microsoft does not control these sites and has not tested any software or information found on these sites; therefore, Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there. There are inherent dangers in the use of any software found on the Internet, and Microsoft cautions you to make sure that you completely understand the risk before retrieving any software from the Internet.
Wednesday, September 27, 2017 2:34 AM -
User-687613544 posted
Here is my sample project angular client and IdentityServer
Wednesday, September 27, 2017 3:46 PM -
User-1508012637 posted
Hi mously,
Have you missed the LoginComponent in app/login folder and the SignupComponent in app/signup folder? Please post relative code for me can build successfully and help you further.
And I found you might lost the import 'rxjs/add/operator/map'; statement in app/user/user.service.ts file. Please check it.
Best Regards
VelenThursday, September 28, 2017 2:58 AM -
User-687613544 posted
Hi,
thank you very much . I have posted the updated code.
Username = "alice", Password = "alice",
Regard
Thursday, September 28, 2017 7:26 AM -
User-1508012637 posted
Hi mously,
I've tested the code and the login function works fine. But it seems that you've published the project to IIS, right? Please refer to the following post which might be helpful:
https://stackoverflow.com/questions/43785928/angular-2-hosted-on-iis-http-error-404#answer-43787391
Best Regards
VelenThursday, September 28, 2017 8:55 AM -
User-687613544 posted
Hi thanks.
I put this in config file of angular project
<?xml version="1.0" encoding="utf-8"?> <configuration> <system.webServer> <rewrite> <rules> <rule name="AngularJS Routes" stopProcessing="true"> <match url=".*" /> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> </conditions> <action type="Rewrite" url="/" /> </rule> </rules> </rewrite> </system.webServer> </configuration>
It redirect me at http://localhost:4200/home after successfull login but not at http://localhost:4200/Protected wich is my protected ressource.
When I click to protected link , I would like to login and return back to protected page.
Best regards
Thursday, September 28, 2017 9:30 AM -
User1163516801 posted
According to the implicit flow at http://openid.net/specs/openid-connect-implicit-1_0.html, the authentication request against to the auth server needs to include redirect_uri parameter, then the auth server will redirect this this uri with the authentication result. So it will redirect to router "/auth-callback" in your example.
Usually, some 3rd party js implicit flow for authentication library will leverage a hidden iframe to handle these requests, and leverage SesstionStorage or LocalStorage of HTML5 feature to store the authentication result.
You can try to use https://github.com/damienbod/angular-auth-oidc-client to implement the OpenID in your angular project.
Additionally, you can refer to the full sample with this lib at https://github.com/damienbod/angular-auth-oidc-sample-google-openid/blob/master/src/AngularClient/angularApp/app/navigation/navigation.component.ts.
Hope it helps.
Disclaimer: This response contains a reference to a third party World Wide Web site. Microsoft is providing this information as a convenience to you. Microsoft does not control these sites and has not tested any software or information found on these sites; therefore, Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there. There are inherent dangers in the use of any software found on the Internet, and Microsoft cautions you to make sure that you completely understand the risk before retrieving any software from the Internet.
Wednesday, October 4, 2017 5:07 AM