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
  

Answer 1

User-1508012637 posted

Hi mously,

According to your description, please refer to the following post which might be helpful:

https://stackoverflow.com/questions/38054707/angular-2-azure-deploy-refresh-error-the-resource-you-are-looking-for-has-been#answer-40275148 

https://hgminerva.wordpress.com/2016/04/27/hosting-angular-2-in-windows-azure-error-the-resource-you-are-looking-for-has-been-removed-had-its-name-changed-or-is-temporarily-unavailable/ 

Best Regards
Velen

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.

Answer 2

User-687613544 posted

Here is my sample project  angular client and IdentityServer

Answer 3

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
Velen

Answer 4

User-687613544 posted

Hi,

thank you very much . I have posted the updated code. 

Username = "alice", Password = "alice",

sample code here 

Regard

Answer 5

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 

https://stackoverflow.com/questions/38054707/angular-2-azure-deploy-refresh-error-the-resource-you-are-looking-for-has-been#answer-40275148 

Best Regards
Velen

Answer 6

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

Answer 7

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.