Keycloak + AngularJS: persist URL hash fragments after login redirect url

Question

we are using Keycloak
http://keycloak.github.io/docs/userguide/keycloak-server/html_single/index.html

and Angularjs the problem is that we need to load Angular first because our application on the home page show public information and when the user go to let's say "Checkout" then We want to show the login screen, Do you have any idea how could we do it ?

We are getting a loop URL

http://192.168.3.34:8080/?redirect_fragment=%2Fapp%2Fdashboard
            &redirect_fragment=%2Fapp%2Fdashboard
            &prompt=none&redirect_fragment=%2Fapp%2Fdashboard&prompt=none           &redirect_fragment=%2Fapp%2Fdashboard&prompt=none&redirect_fragment=%2Fapp%2Fdashboard&prompt=none&redirect_fragment=%2Fapp%2Fdashboard&prompt=none&redirect_fragment=%2Fapp%2Fdashboard&prompt=none&redirect_fragment=%2Fapp%2Fdashboard&prompt=none&redirect_fragment=%2Fapp%2Fdashboard&prompt=none&redirect_fragment=%2Fapp%2Fdashboard&prompt=none&redirect_fragment=%2Fapp%2Fdashboard&prompt=none&redirect_fragment=%2Fapp%2Fdashboard&prompt=none&redirect_fragment=%2Fapp%2Fdashboard&prompt=none&redirect_fragment=%2Fapp%2Fdashboard&prompt=none#
state=4674d401-5442-4459-8706-0b77443011bd&code=LnD4lRypAql5QkEO1mwtWHpaff1XaUeeACpY7-GP220.b6a0f296-e1a8-4b12-b34a-b1dcefa9a94f

Note We are using keycloak.login(); but it is no working Keycloak server does not accept "#/" on the redirect URL.

Thanks Francisco

Answer 1

I had this problem myself. Solved it via a modification to keycloak. themes/base/login/login.ftl:

 <form id="kc-form-login" onsubmit="login.disabled = true; return true;" action="${url.loginAction}" method="post">

Changes to:

<form id="kc-form-login" onsubmit="this.action = this.action + window.location.hash; login.disabled = true; return true;" action="${url.loginAction}" method="post">

It appends the hash from the URL onto the form post action when it's submitted. The key to fixing this was finding out that the hash is never sent to the server, but is fully controlled by the web browser.