Skip to content

Login Button

Jump to bottom
Mark Overmeer edited this page Dec 18, 2024 · 8 revisions

Templates for a nice "Login via Open Console" button.

Common components

Each version of the button, independent of the visualization framework, uses the same parameters. Be careful with the escaping.

Parameter $login is taken from the login answer: the url in $session->{endpoints}{user_login}. The $bearer is also taken from your application login session: the value of $session->{session}{bearer}. Both values do not contain characters which require encoding.

The $state value is a security measure, as advised by the OAuth2 spec: you should use a random value to fight replay attempts. Relate that value to the cookie of the user of your application website, and check it when the user comes back to you via the Open Console authentication. You may need hex-utf8 parameter encoding on the state value you choose.

Bootstrap 5

In this example, the templating system uses '[% ... %]' to insert parameters. The parameters are described above.

Add to the HTML in your templating system:

  #XXX untested
  #XXX Example on https://developers.google.com/identity/sign-in/web/build-button
  <input class="btn btn-primary" type="button" value="Login via Open Console"
    onClick="window.location='[% $login %]?response_type=code&state=[% $state %]&client_id=[% $bearer %]'" />

Clone this wiki locally