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?
finnaly I managed the task with the following setup:
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);
}
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);
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: