@eid-easy/eideasy-widget
Version:
eID Easy Widget is a client-side embeddable component for creating electronic signatures and identifying users through eID Easy API.
304 lines (285 loc) • 10 kB
HTML
<html lang=""><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="/favicon.ico">
<title>@eid-easy/eideasy-widget</title>
<style>
h2 {
text-align: center;
margin-top: 40px;
}
.container {
max-width: 768px;
margin: 0 auto;
}
.widgetHolder {
max-width: 490px;
//max-width: 700px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<noscript>
<strong>We're sorry but @eid-easy/eideasy-widget doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript>
<div class="container">
<div style="margin-top: 10px; margin-bottom: 10px;">
<label for="langPicker">Language:</label>
<select name="langPicker" id="langPicker">
<option value="cs">Czech</option>
<option value="nl">Dutch</option>
<option value="en" selected="">English</option>
<option value="et">Estonian</option>
<option value="fi">Finnish</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="it">Italian</option>
<option value="lv">Latvian</option>
<option value="lt">Lithuanian</option>
<option value="pl">Polish</option>
<option value="pt">Portuguese</option>
<option value="ru">Russian</option>
<option value="es">Spanish</option>
<option value="sv">Swedish</option>
</select>
</div>
<h2>Signatures</h2>
<div id="signingWidgetHolder" class="widgetHolder"></div>
<h2>Signature Certs</h2>
<div id="signingCertWidgetHolder" class="widgetHolder"></div>
<h2>Identification</h2>
<div id="identificationWidgetHolder" class="widgetHolder"></div>
</div>
<script>
function initIdentificationWidget(widgetHolder) {
const eidEasyWidget = document.createElement('eideasy-widget');
const settings = {
countryCode: 'EE', // ISO 3166 two letter country code
language: 'en', // ISO 639-1 two letter language code,
sandbox: true,
clientId: '9kKmNtYQ7LDOlHvasAE9oYQ0gKS4V4Bl',
redirectUri: 'https://id.eideasy.eu/admin/oauthlogin', // this gets used for redirects e.g. when using eParaksts mobile
apiEndpoints: {
base: () => 'https://id.eideasy.eu',
identityStart: () => 'https://eid-sample-app.eu/api/identity/start',
identityFinish: () => 'https://eid-sample-app.eu/api/identity/finish',
},
translations: {
'et': {
"message": "Mina olen antud kasutaja poolt i18n !!",
},
'en': {
message: "I am provided in settings",
}
}, // translations object to override existing translations
// identification: true or 'all' will enable all methods
// if you want to enable specific methods, then use
// identification: ['ee-id-login', 'lv-id-login'],
enabledMethods: {
identification: 'all',
//identification: ['ee-id-login', 'lv-id-login'],
},
// mode: 'oidcAuthorize',
clientInfo: {
websiteName: 'TestWebsite.test',
companyName: 'TestCompany',
},
selectedMethod: null,
enabledCountries: 'all',
// use these to prefill the input values
inputValues: {
//idcode: '',
// phone: '00000766',
},
modifyRequestSettings: (currentSettings) => {
return {
data: {
xsrf_token: 'some-token',
},
}
},
formatFlashMessage: (message) => {
if (message.response && message.response.status) {
if (message.response.status === 419) {
message.text = 'Session expired, please refresh your browser';
}
}
return message;
},
onSuccess: function (data) {
console.log('!!!!!! success !!!!!!!');
console.log(data);
},
onFail: function (error) {
console.log('!!!!!! fail !!!!!!!');
console.log(error);
},
onStarted: function (data) {
console.log('!!!!!! started !!!!!!!');
console.log(data);
},
methodsConfigFilter(methods) {
console.log(
methods.identification.filter(({actionType}) => actionType.includes('eparaksts'))
);
const modifiedMethods = {};
modifiedMethods.signature = methods.signature.map((method) => {
if (method.actionType === 'smart-id-signature') {
method.supportedCountries.push('FI');
return method;
}
});
modifiedMethods.signature = methods.identification.map((method) => {
if (method.actionType === 'smartid') {
method.supportedCountries.push('FI');
return method;
}
});
return methods;
},
modifyEndpointUrl(urlString) {
return urlString;
},
oauthParamState: 'custom-state-value-from-widget',
fieldAutocomplete: true,
allowMethodChange: true,
}
Object.keys(settings).forEach(key => {
eidEasyWidget[key] = settings[key];
});
widgetHolder.appendChild(eidEasyWidget);
return eidEasyWidget;
}
function initSigningWidget(widgetHolder, methods = [], mode = null) {
const eidEasyWidget = document.createElement('eideasy-widget');
const settings = {
debug: true,
countryCode: 'EE', // ISO 3166 two letter country code
language: 'en', // ISO 639-1 two letter language code,
sandbox: true,
clientId: '9kKmNtYQ7LDOlHvasAE9oYQ0gKS4V4Bl',
docId: 'eeHyfsOFU22CJfOn8n3ruBGn7Oiry6BFwZ3dbC2S',
apiEndpoints: {
// base: () => 'http://localhost:8000',
base: () => 'https://id.eideasy.eu',
},
translations: {
'et': {
"message": "Mina olen antud kasutaja poolt i18n !!",
},
'en': {
message: "I am provided in settings",
}
}, // translations object to override existing translations
// identification: true or 'all' will enable all methods
// if you want to enable specific methods, then use
// identification: ['ee-id-login', 'lv-id-login'],
enabledMethods: {
signature: methods.length > 0 ? methods : 'all',
},
selectedMethod: null,
enabledCountries: 'all',
// use these to prefill the input values
inputValues: {
// idcode: '',
//phone: '00000766',
//callingCode: '+372',
},
modifyRequestSettings: (currentSettings) => {
return {
data: {
xsrf_token: 'some-token',
},
}
},
formatFlashMessage: (message) => {
if (message.response && message.response.status) {
if (message.response.status === 419) {
message.text = 'Session expired, please refresh your browser';
}
}
return message;
},
beforeMethodSelection: function(data) {
console.log('-------- beforeMethodSelection ----------');
console.log(data);
// returning false here prevents the flow from proceeding further
// return false;
// you can provide additional config for methods here
/*
return {
additionalMethodConfig: {
docId: 'asfjalsfalshfakfhaslkfhas',
}
}
*/
},
onSuccess: function (data) {
console.log('!!!!!! success !!!!!!!');
console.log(data);
},
onFail: function (error) {
console.log('!!!!!! fail !!!!!!!');
console.log(error);
},
onStarted: function (data) {
console.log('!!!!!! started !!!!!!!');
console.log(data);
},
remoteMonitoringEnabled: true,
otpEmail: 'mj@eideasy.com',
redirect: res => {
console.log('redirecting to', res.data.redirect_uri);
window.location.href = res.data.redirect_uri;
},
//emailToken: 'gher0eqq9drrh5u6',
//otpPhone: '+37255548246',
isOtpSent: false,
//otpFlow: 'start-at-method-selection',
requireHandwrittenSignature: true,
fieldAutocomplete: true,
showSignatureLevel: true,
// waitForChallengeCode: true,
mode,
//showSignaturePolicyLink: false,
//showPoweredByEidEasyLink: false,
// uiTheme: {
// colorPrimary: '#d51111',
// colorSecondary: '#00ff00',
// textColor: '#0000ff',
// buttonTextColor: 'rgb(6,192,164)',
// buttonColor: '#000000',
// buttonColorHover: '#252323',
// inputLabelColor: '#04048d',
// fontFamily: '"Gill Sans", sans-serif',
// fontSize: '16px',
// fontWeight: 'bold',
// },
}
Object.keys(settings).forEach(key => {
eidEasyWidget[key] = settings[key];
});
widgetHolder.appendChild(eidEasyWidget);
return eidEasyWidget;
}
const signingWidget = initSigningWidget(document.getElementById('signingWidgetHolder'));
const signingCertWidget = initSigningWidget(
document.getElementById('signingCertWidgetHolder'),
['id-signature', 'lt-id-signature', 'lv-id-signature', 'fi-id-signature'],
'cscApiAuthorizeCredential'
);
const identificationWidget = initIdentificationWidget(document.getElementById('identificationWidgetHolder'));
document
.getElementById('langPicker')
.addEventListener('change', (e) => {
identificationWidget.language = e.target.value;
signingWidget.language = e.target.value;
signingCertWidget.language = e.target.value;
});
</script>
<!-- built files will be auto injected -->
<script src="/full/eideasy-widget.umd.min.js"></script></body></html>