CODEWITHSUNDEEP
angularsingle-page-applicationshibboleth
jannis
jannis

Reputation: 85

Shibboleth authentication for an Angular single page application (SPA)

Is it possible to use Shibboleth within an Angular4 SPA? If yes, how?

My scenario is the following: I have a SPA that can be accessed globally without login. Certain pages should only be accessed after login with Shibboleth. Therefore I'd like to authenticate the user via Shibboleth and generate a JWT for the user, which is used to authenticate against the APIs which are delivering the content for the protected page.

The problem, I am facing is, that the user has to navigate to the shibboleth-login-page on the service-provider and therefore leave the SPA to login. So I can create a JWT on a shibboleth-protected site like /shibprotected/getJWT, and redirect the user there. But how do I get the token back in my Angular-application? And how can I redirect the user back to the application then?

May I use cookies for this task?

Upvotes: 4

Views: 2741

Answers (1)

jannis
jannis

Reputation: 85

finnaly I managed the task with the following setup:

  1. in an auth-service I generate the login-URL, which can be referenced via <a href="authService.getLoginUrl('/currentpage')">Login</a>:

      getLoginUrl(returnUrl = '') {
    if (returnUrl === '' || returnUrl.startsWith('/')) {
      returnUrl = window.location.origin + returnUrl;
    }

    return environment.backend_server_url + '/shibprotected/getJWT?return_url=' + encodeURIComponent(returnUrl);
  }

  2. In /shibprotected/getJWT (which is a page protected via shibboleth on the same server) I generate the JWT and set it to a cookie. then I redirect to return_url:

      setcookie("token", $token);
  header("Location: " . $return_url);

  3. back in the angular-app I'm checking for the token in document.cookie

This approach has two disadvantages which are maybe unavoidable when using shibboleth with a SPA:

  • Cookies required
  • SPA has to be reloaded after Login

Upvotes: 4

Related Questions