search

p2-inc / idp-wizard

Identity Provider setup wizards for Keycloak
https://phasetwo.io
Other
1 stars 1 forks source link

Test page for testing login after `cloud` confirmation #105

Open xgp opened 2 years ago

xgp commented 2 years ago
  1. Alias of the created identity provider will be different than the submitted value. This must be taken from the Location header of the successful creation of an idp and used when creating the mappers. The Location header will be a full URL. The alias will be a UUID at the last segment, following the last /.
  2. There should be a description of how to try the completed idp. Something like "Test the identity provider (this will log you out of the wizard, or you can open it in an incognito window)". This should be a normal realm login link with prompt=login and kc_idp_hint=<alias>
xgp commented 2 years ago

Can this be a single html SPA that is served from the same place as the wizard?

xgp commented 2 years ago 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Login Test</title>
  <style>
    .wrapper {
    position: absolute;
    left: 10px;
    top: 10px;
    bottom: 10px;
    right: 10px;
    }
    .menu {
    padding: 10px;
    margin-bottom: 10px;
    }

    .content {
    background-color: #eee;
    border: 1px solid #ccc;
    padding: 10px;

    -webkit-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.5);
    box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.5);
    }

    .content .message {
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
    font-size: 40px;
    }

    #token-content {
    font-size: 20px;
    padding: 5px;
    white-space: pre;
    text-transform: none;
    }
  </style>
  <script type="text/javascript">
    let keycloakUrl = "https://app.phasetwo.io/auth"

    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = keycloakUrl+"/js/keycloak.js";

    document.getElementsByTagName('head')[0].appendChild(script);

    window.onload = function () {

      window.keycloak = new Keycloak();

      const options = {onLoad: 'login-required', scope:'openid email profile', checkLoginIframe: false, checkLoginIframeInterval: 1, pkceMethod: 'S256', prompt: 'login'}; 

      const hint = getIdPHint();
      console.log("idpHint", hint);

      if (hint) options['idpHint'] = hint;

      keycloak.init(options)
    .success(function () {

      if (keycloak.authenticated) {
            showProfile();
      } else {
            welcome();
      }

      document.body.style.display = 'block';
    });

      keycloak.onAuthLogout = welcome;
    };

    function getIdPHint() {
      const queryString = window.location.search;
      if (queryString) {
    const urlParams = new URLSearchParams(queryString);
    return urlParams.get("idpHint");
      }
      return null;
    }

    function welcome() {
      show('welcome');
    }

    function showProfile() {

      if (keycloak.tokenParsed['given_name']) {
    document.getElementById('firstName').innerHTML = keycloak.tokenParsed['given_name'];
      }
      if (keycloak.tokenParsed['family_name']) {
    document.getElementById('lastName').innerHTML = keycloak.tokenParsed['family_name'];
      }
      if (keycloak.tokenParsed['preferred_username']) {
    document.getElementById('username').innerHTML = keycloak.tokenParsed['preferred_username'];
      }
      if (keycloak.tokenParsed['email']) {
    document.getElementById('email').innerHTML = keycloak.tokenParsed['email'];
      }

      document.getElementById('token-content').innerHTML = JSON.stringify(keycloak.idTokenParsed, null, '    ');

      show('profile');
    }

    function show(id) {
      document.getElementById('welcome').style.display = 'none';
      document.getElementById('profile').style.display = 'none';
      document.getElementById(id).style.display = 'block';
    }
  </script>
</head>

<body style="display: none;">

<div class="wrapper" id="welcome" style="display: none;">
    <div class="menu">
        <button name="loginBtn" onclick="keycloak.login()">Login</button>
    </div>

    <div class="content">
        <div class="message">Please login</div>
    </div>
</div>

<div class="wrapper" id="profile" style="display: none;">
    <div class="menu">
        <button name="logoutBtn" onclick="keycloak.logout()">Logout</button>
    </div>

    <div class="content">
        <div id="profile-content" class="message">
            <table cellpadding="0" cellspacing="0">
                <tr>
                    <td class="label">First name</td>
                    <td><span id="firstName"></span></td>
                </tr>
                <tr class="even">
                    <td class="label">Last name</td>
                    <td><span id="lastName"></span></td>
                </tr>
                <tr>
                    <td class="label">Username</td>
                    <td><span id="username"></span></td>
                </tr>
                <tr class="even">
                    <td class="label">Email</td>
                    <td><span id="email"></span></td>
                </tr>
            </table>
        </div>
    </div>

    <div class="content">
        <div id="token-content" class="message"></div>
    </div>
</div>

</body>

</html>