How to call multiple realms dynamically?

Question

I need to call multiple realms on the basis of tenantname entered in browser. Right now we are doing is by creating different JSON files as per the tenant name. But i need to call keycloak.json directly from Keycloak server rather than putting dummy json.

Front-end using is Angular 7.

Answer 1

So here the one solution which can be achieve with some changes in current design First User will enter the url something like https://<IP>:<PORT>/<GUI-PATH>?tenantId=<TenatID> Now in your Java Script code call a rest api which will give you the detail of realmname/client-id and other keycloak related information

Pass this information your keycloak.js adapter and keycloak.js will check all the details and redirect to login page as well.

Initialize Keycloak & bootstrap app

function loadApp(keyCloakObj) {
        var script = document.createElement('script');
        script.onload = function(){
            initiializeApp(keyCloakObj)
        }
        script.src = keycloakObj.url.split("auth")[0] + "auth/js/keycloak.js";
        script.onerror = function () {
            var script = document.createElement('script');
            script.onload = function(){
                initiializeApp(keyCloakObj)
            }
            script.src = "app/auth/keycloak.js"
            document.head.appendChild(script);
        }
        document.head.appendChild(script);
    }

I just share basic code ,cant share full flow of code due to Copyright issue.