3. Embed Cyberus Key Widget

Introduction

A user on the front end (your web application) starts the login process. To do so, a proper request has to be prepared and called. This is the OpenID Authorization Request and it redirects the user to Cyberus Key’s login screen, providing several parameters like your Client ID, Redirect URI, and security parameters like state and nonce.

But the good news is that you don’t have to do all of this. Let’s use our Cyberus Key Widget instead!

Cyberus Key Widget

We provide the client-side Cyberus Key Widget (JavaScript) which aims to authorize a user and start the login process.

You can find the Widget in the NPM repository.

You can either embed the Cyberus Key Widget by CDN or as a module with a bundler. The minimum configuration is:

 const cyberusKeyButton = new CyberusKeyWidget({
   clientId: 'YOUR CLIENT ID',
   // Use your redirect URI.
   redirectUri: 'https://your-application.com/api/authorize',
   fullOpenIdLogin: true
 });
 // When a DOM is ready.
 cyberusKeyButton.create('widget-container-css-class-name');

Remember to adjust the above example to your front-end framework. The create method must be called after the DOM element (identified by a CSS class name) has been created.
Replace the clientId and redirectUri values with yours.

If fullOpenIdLogin is true, then the user will be redirected to cyberuskey.com to process the login. This is the recommended configuration. If it’s false, the login process is done only on your side and you will have to handle any errors.

To add further security to the login process, you can pass the state and nonce parameters. These parameters should be generated by your back-end. The values will later be passed to your back-end via a HTTP request and will need to be verified.

React/Gatsby

In the near feature, we’ll publish a React version of the Cyberus Key Widget to save time. For now, you can use the snippet component below.
If you’re not using Gatsby, then remove the useStaticQuery method call.

import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { CyberusKeyWidget } from 'cyberuskey-widget';
import { useStaticQuery, graphql } from 'gatsby';


function useButton({ clientId, redirectUri, state, nonce }) {
  const { site: { siteMetadata } } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            clientId
            rootUri
          }
        }
      }
    `
  );
  const ckButton = new CyberusKeyWidget({
    clientId: clientId || siteMetadata.clientId,
    redirectUri: redirectUri || siteMetadata.rootUri,
    fullOpenIdLogin: true,
    state,
    nonce
  });

  useEffect(() => {
    ckButton.create('dashboard-cyberuskey-widget');
  });
}

function CyberusKeyLoginButton({ clientId, redirectUri, state, nonce }) {
  useButton({ clientId, redirectUri, state, nonce });

  return (
    <div className="button-container">
      <div className="dashboard-cyberuskey-widget" />
    </div>
  );
}

CyberusKeyLoginButton.propTypes = {
  clientId: PropTypes.string,
  redirectUri: PropTypes.string,
  state: PropTypes.string,
  nonce: PropTypes.string
};

export default CyberusKeyLoginButton;