{{ 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 <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 }}