Newer
Older
OktaOauth / templates / authentication / login.tmpl
@Yangyang Xie Yangyang Xie on 12 Jun 2022 5 KB first commit
{{ define "authentication/login.tmpl" }}
<html>
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

<!-- widget stuff here -->
<script src="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.16.0/js/okta-sign-in.min.js" type="text/javascript"></script>
<link href="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.16.0/css/okta-sign-in.min.css" type="text/css" rel="stylesheet"/>
<link href="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.16.0/css/okta-theme.css" type="text/css" rel="stylesheet"/>
</head>
  <body>
    <div class="container md-12 mt-3">
      <h1 class="text-center">Okta Single Sign On (SSO)</h1>
      <div id="messageBox" class="alert alert-primary">
        Please Login with your Okta credential
      </div>
      <div id="signout" style="display:none">
     <button type="button" class="btn btn-danger" onclick="signout()">Sign Out</button>
      </div>
      <!-- where the sign-in form will be displayed -->
      <div id="okta-login-container"></div>

      <br/>
      <hr />

      <div id="response" style="display:none">
      <h3>Kubeconfig File &nbsp;&nbsp;&nbsp;<span><a href="" id="downloadUrl"  class="btn btn-primary" download="config">Download</a></span></h3>
      <pre id="kubeconfig">
apiVersion: v1
clusters:
- cluster:
    certificate-authority-data: {{ .kubeCA }}
    server: {{ .kubeAPIServer }}
  name: kubernetes
contexts:
- context:
    cluster: kubernetes
    user: %username%
  name: kubernetes-admin@kubernetes
current-context: kubernetes-admin@kubernetes
kind: Config
preferences: {}
users:
- name: %username%
  user:
    auth-provider:
      config:
        id-token: %idToken%
      name: oidc
      </pre>

      <hr />
      <h3>Okta Response Payload:</h3>
      <pre id="idTokenPayload">N/A</pre>
      </div>
    </div>

  </body>


<!-- use the Okta widget to power authentication! -->
<script type="text/javascript">

  // Hide the response block.
  document.getElementById("response").style.display = "none";
  // Hide the signout button.
  document.getElementById("signout").style.display = "none";

  var oktaSignIn = new OktaSignIn({
    baseUrl: "https://{{ .orgURL }}",
    clientId: "{{ .clientID }}",
    authParams: {
      issuer: "https://{{ .orgURL }}/oauth2/default",
      responseType: ['token', 'id_token'],
      display: 'page'
    }
  });

  if (oktaSignIn.token.hasTokensInUrl()) {
    oktaSignIn.token.parseTokensFromUrl(
      // If we get here, the user just logged in.

      function success(res) {
        var accessTokenPayload = res[0];
        var idTokenPayload = res[1];
        oktaSignIn.tokenManager.add('accessToken', accessTokenPayload);
        oktaSignIn.tokenManager.add('idToken', idTokenPayload);
        window.location.hash='';
        renderResponse(accessTokenPayload, idTokenPayload);
      },
      function error(err) {
        console.error(err);
      }
    );
  } else {
    oktaSignIn.session.get(function (res) {
      // If we get here, the user is already signed in.
      var data = localStorage.getItem("okta-token-storage");
      if (data == null ){
            oktaSignIn.renderEl(
              { el: '#okta-login-container' },
              function success(res) {},
              function error(err) {
                console.error(err);
              }
            );
            return;
      } 
      var res =JSON.parse(data)
      var accessToken = res.accessToken;
      var idToken = res.idToken;
      console.log(res)
      renderResponse(accessToken, idToken);

    });
  }



  function renderResponse(accessTokenPayload, idTokenPayload){
        document.getElementById("response").style.display = "block";
        document.getElementById("signout").style.display = "block";
        document.getElementById("idTokenPayload").innerHTML=JSON.stringify(idTokenPayload, null, 3);
        document.getElementById("messageBox").className ="alert alert-success";
        document.getElementById("messageBox").innerHTML = "Hello, " + idTokenPayload.claims.email + "! You have logged in! :)";
        generateKubeconfig(idTokenPayload.claims.email, idTokenPayload.idToken)
  }

  function generateKubeconfig(username, idToken){
      var config = document.getElementById("kubeconfig").innerHTML;
      config= config.replaceAll("%username%", username);
      config= config.replaceAll("%idToken%", idToken);
      document.getElementById("kubeconfig").innerHTML = config;
      generateDownloadButton(config)
  };

  function signout(){
    oktaSignIn.signOut();
    localStorage.removeItem("okta-token-storage")
    location.reload();
  };

function generateDownloadButton(str) {
  var url = "data:application/octet-stream;charset=utf-8," + str;
  document.getElementById('downloadUrl').href = url;

};
</script>


</html>

{{ end }}