Cyberuskey-widget NPM

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

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()

WidgetOptions.theme : string

Kind: static property of WidgetOptions

WidgetOptions.serverUrl : string

Kind: static property of WidgetOptions

WidgetOptions.animation : WidgetAnimation

Kind: static property of WidgetOptions

WidgetOptions.geoProvider : GeoProvider

Kind: static property of WidgetOptions

WidgetOptions.state : string

Kind: static property of WidgetOptions

WidgetOptions.nonce : string

Kind: static property of WidgetOptions

WidgetOptions.responseType : string

Kind: static property of WidgetOptions

WidgetOptions.autoplay : boolean

Kind: static property of WidgetOptions

WidgetOptions.instructionAsDialog : boolean

Kind: static property of WidgetOptions

WidgetOptions.fullOpenIdLogin : boolean

Kind: static property of WidgetOptions

CyberusKeyWidget

Kind: global class

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

new CyberusKeyWidget()

$(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.