Search code examples
single-page-applicationidentityserver4openid-connecthello.js

IdentityServer4 with SPA and hellojs


I created an IdentityServer based on the dotnet new template "IdentityServer4 Quickstart UI (UI assets only)" (is4ui).

This works well along with a server-rendered MVC application but i can't get it to work with a SPA using hellojs.

I was fiddling with the urls to get the login-page from Identity Server displayed. The login-logic is running fine but i think any little piece is missing to propertly redirect to my client app with an access token.

This is the code i use to initialize hellojs:

const AuthorityUrl = 'http://localhost:5000';
hello.init({
  'openidconnectdemo': {
    oauth: {
      version: '2',
      auth: AuthorityUrl + '/Account/Login',
      grant: AuthorityUrl + '/Grant'
    },
    scope_delim: ' '
  }
});

hello.init({
  openidconnectdemo: this.authConfig.clientId
});

And this is the login code

hello.login('openidconnectdemo', {
  redirect_uri: this.authConfig.redirectUrl,
  scope: `openid profile`,
  response_type: 'token',
  display: 'page',
});

In this code in AccountController, Identity Server tries to redirect to the application but this fails as the ReturnUrl is null:

                if (Url.IsLocalUrl(model.ReturnUrl))
                {
                    return Redirect(model.ReturnUrl);
                }
                else if (string.IsNullOrEmpty(model.ReturnUrl))
                {
                    return Redirect("~/");
                }
                else
                {
                    // user might have clicked on a malicious link - should be logged
                    throw new Exception("invalid return URL");
                }

Do i have to modify Identity Server in order to get them work together or is there something missing on the client part?

Thanks for any advise!


Solution

  • I'd probably recommend using oidc-client-js as it is a full implementation of OIDC and should be much easier to get working.

    That said, it looks like your first issue here is that the auth URL should point at the authorize endpoint and not the sign in UI - i.e. it should be /connect/authorize rather than /account/login.