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 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.
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.
Widget uses Cyberus Key JavaScript SDK, here you have the documentation.
Kind: global class
- WidgetOptions
- new WidgetOptions()
- .theme :
string
- .serverUrl :
string
- .animation :
WidgetAnimation
- .geoProvider :
GeoProvider
- .state :
string
- .nonce :
string
- .responseType :
string
- .autoplay :
boolean
- .fullOpenIdLogin :
boolean
Widget options passed to a CyberusKeyWidget constructor.
A theme of the widget. You can use: default
or eliot
.
Kind: static property of WidgetOptions
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
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
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
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
OpenId's response type. By default it's code
what means OpenId Code Flow.
Kind: static property of WidgetOptions
Determines whether the login process will be done automatically when the button is ready.
Kind: static property of WidgetOptions
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
Kind: global class
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.
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. |
Kind: static class of CyberusKeyWidget
Creates an instance of CyberusKeyWidget.
Param | Type |
---|---|
options | WidgetOptions |
Defines the widget animation.
Use one of None
, Blinking
, Waves
.
Kind: global enum
Read only: true
CyberusKey JavaScript SDK docs: https://github.com/CyberusLabs/cyberuskey-sdk/
MIT © Cyberus Labs sp. z o.o.