cyberuskey-widget

What is Cyberus Key?

Your users will never need to remember or input a password again with Cyberus Key, our one-touch universal, user authentication system.

Now you can guarantee your customers the highest level of protection against phishing attacks, identity and data theft,and more. By removing the risk of stolen passwords or credentials, you can eliminate one of the biggest cyber security threats..

Cyberus Key Widget

Cyberus Key Widget is a button that help you to integrate with Cyberus Key Authentication Server. After clicking the button an OpenID's authentication proccess will be started.

How to install?

With NPM:

npm install cyberuskey-widget

With Yarn:

yarn add cyberuskey-widget

You can also get a minified file from JSDelivr's CDN (replace the VERSION with the version you want to):

<script src="https://cdn.jsdelivr.net/npm/cyberuskey-widget@{VERSION}/dist/widget.min.js" type="text/javascript"></script>

<script type="text/javascript">
  var CyberusKeyWidgetNamespace = window['cyberuskey-widget'];
  var CyberusKeyWidget = CyberusKeyWidgetNamespace.CyberusKeyWidget;

  new CyberusKeyWidget(/* ... */);
</script>

And then you can embed the button on your web page:

import { CyberusKeyWidget, HTML5GeoProvider } from "cyberuskey-widget";

$(document).ready(() => {
const ckButton = new CyberusKeyWidget({
  clientId: window.CyberusKey.CLIENT_ID,
  redirectUri: window.CyberusKey.REDIRECT_URI,
  fullOpenIdLogin: true,
  state: window.CyberusKey.STATE,
  nonce: window.CyberusKey.NONCE
});

cyberusKeyButton.create('cyberus-key-widget-container');
});

If fullOpenIdLogin is true, then a 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 e.g. handle errors.

Documentation

Widget uses Cyberus Key JavaScript SDK, here you have the documentation.

Classes

WidgetOptions

CyberusKeyWidget

WidgetOptions

Kind: global class

• WidgetOptions
  • new WidgetOptions()
  • .theme : string
  • .serverUrl : string
  • .animation : WidgetAnimation
  • .geoProvider : GeoProvider
  • .state : string
  • .nonce : string
  • .responseType : string
  • .autoplay : boolean
  • .instructionAsDialog : boolean
  • .fullOpenIdLogin : boolean

new WidgetOptions()

Widget options passed to a CyberusKeyWidget constructor.

WidgetOptions.theme : string

A theme of the widget. You can use: default or eliot.

Kind: static property of WidgetOptions

WidgetOptions.serverUrl : string

Cyberus Key's Authentication Server URL.

Kind: static property of WidgetOptions

WidgetOptions.animation : WidgetAnimation

Animation of the widget applied during a sound transmission.

Kind: static property of WidgetOptions

WidgetOptions.geoProvider : GeoProvider

Provider of a geolocalization. If passed, then geolocalization measurement is taken. For a web browser use HTML5GeoProvider. Geolocalization measurement can be later use to compare it against the mobile's measurement (if you have set fail_on_geo_mismatch). Those measurements can be used also to general improvement of the security.

Kind: static property of WidgetOptions

WidgetOptions.state : string

RECOMMENDED. Opaque value used to maintain state between the request and the callback. Typically, CSRF, XSRF mitigation is done by cryptographically binding the value of this parameter with a browser cookie. The state parameter preserves some state object set by the client in the Authentication request and makes it available to the client in the response. It’s that unique and non-guessable value that allows you to prevent the attack by confirming if the value coming from the response matches the one you expect (the one you generated when initiating the request). The state parameter is a string so you can encode any other information in it.

The value can be passed e.g. through an encrypted cookie and validated on the client server before making a Token Request.

Kind: static property of WidgetOptions

WidgetOptions.nonce : string

String value used to associate a Client session with an ID Token, and to mitigate replay attacks. The value is passed through unmodified from the Authentication Request to the ID Token. Sufficient entropy MUST be present in the nonce values used to prevent attackers from guessing values.

Kind: static property of WidgetOptions

WidgetOptions.responseType : string

OpenId's response type. By default it's code what means OpenId Code Flow.

Kind: static property of WidgetOptions

WidgetOptions.autoplay : boolean

Determines whether the login process will be done automatically when the button is ready.

Kind: static property of WidgetOptions

WidgetOptions.instructionAsDialog : boolean

Determines whether the instruction should be presented as dialog or as a link.

Kind: static property of WidgetOptions

WidgetOptions.fullOpenIdLogin : boolean

If set to true, then the login process will be done through the Cyberus Key Dashboard. So, you'll be redirected to the other page to login. If it's false, then the login goes directly to the Cyberus Key API.

Kind: static property of WidgetOptions

CyberusKeyWidget

Kind: global class

• CyberusKeyWidget
  • new CyberusKeyWidget()
  • instance
    • .create(containingElementClassName)
  • static
    • .CyberusKeyWidget
      • new CyberusKeyWidget(options)

new CyberusKeyWidget()

Class represents a UI button that uses cyberuskey-sdk and allows to make a login with Cyberus Key Authentication Server.

If you miss some docs, try find them here, in Cyberus Key JavaScript SDK documentation .

Example:

import { CyberusKeyWidget, HTML5GeoProvider } from "cyberuskey-widget";
$(document).ready(() => {
const ckButton = new CyberusKeyWidget({
clientId: window.CyberusKey.CLIENT_ID,
redirectUri: window.CyberusKey.REDIRECT_URI,
fullOpenIdLogin: true,
state: window.CyberusKey.STATE,
nonce: window.CyberusKey.NONCE
});
cyberusKeyButton.create('cyberus-key-widget-container');
});
If fullOpenIdLogin is true, then a 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 e.g. handle errors.

cyberusKeyWidget.create(containingElementClassName)

Creates a Cyberus Key button element in the DOM tree.

Kind: instance method of CyberusKeyWidget

Param	Type	Description
containingElementClassName	string	CSS class name of the containing DOM element for the Cyberus Key Widget.

CyberusKeyWidget.CyberusKeyWidget

Kind: static class of CyberusKeyWidget

new CyberusKeyWidget(options)

Creates an instance of CyberusKeyWidget.

Param	Type
options	WidgetOptions

WidgetAnimation : enum

Defines the widget animation. Use one of None, Blinking, Waves.

Kind: global enum
Read only: true

Links

CyberusKey JavaScript SDK docs: https://github.com/CyberusLabs/cyberuskey-sdk/

License

MIT © Cyberus Labs sp. z o.o.