Angular单页面应用程序（SPA）的Shibboleth身份验证

Question

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?

Answer 1

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