Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Test page for testing login after cloud confirmation #105

Open
xgp opened this issue May 5, 2022 · 2 comments
Open

Test page for testing login after cloud confirmation #105

xgp opened this issue May 5, 2022 · 2 comments
Labels
backlog draft in progress

Comments

@xgp
Copy link
Member

xgp commented May 5, 2022

  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
Copy link
Member Author

xgp commented May 5, 2022

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

  • need to figure out how to load keycloak.js
  • can use the same keycloak.json as the wizard
  • the keycloak.login(...) needs to have the options prompt=login and idpHint=<alias>
  • UI should show claims email, given_name, family_name, preferred_username once the user is logged in.

@xgp
Copy link
Member Author

xgp commented May 5, 2022 

<!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>

@xgp xgp added draft in progress backlog labels Oct 20, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
backlog draft in progress
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@xgp