ontlogin-sdk-ui
OntLogin web component UI SDK for JavaScript provides easy integration for your application to OntLogin.
Before start
- The backend api need to be implemented with defined specification.
- Check web component compatibility. -> https://caniuse.com/?search=Custom%20Elements
- Check ontlogin-sdk-js if custom ui is required.
Getting started
via NPM package:
npm i ontlogin-ui
import "ontlogin-ui";<ont-login
url_of_get_challenge="server/requestChallenge"
url_of_submit_response="server/submitChallenge"
/>via js bundle:
<ont-login
id="ontlogin"
url_of_get_challenge="server/requestChallenge"
url_of_submit_response="server/submitChallenge"
/>
<script src="ontloginui.min.js"></script>
<script>
// add event listener to custom event
const target = document.querySelector("#ontlogin");
target.addEventListener("success", (e) => {
console.log(e.detail);
});
target.addEventListener("error", (e) => {
console.log(e.detail);
});
target.addEventListener("cancel", (e) => {
console.log(e.detail);
});
</script>Api
Params
| Name | Type | Des |
|---|---|---|
| url_of_get_challenge | string | Api url of get challenge(implement with api definition below). |
| url_of_submit_response | string | Api url of submit response(implement with api definition below). |
| show_vc_list | string | 'true'|'false'.Show vc list in dialog if exist. |
| test | string | 'true' | 'false'.Add a button to mock use scan success(test only). |
| action | string | '0' | '1'. Action type in string,Refer to action of authentication-request . |
Events
| Name | Type | Des |
|---|---|---|
| success | CustomEvent | Submit success callback,with response of url_of_submit_response in e.detail. |
| error | CustomEvent | Error callback. |
| cancel | CustomEvent | User cancel callback. |
Server api definition
url_of_get_challenge:
The Server api for get challenge with auth request.
Request/Response content type
application/json
Request body
request object refer to url-to-request-protocol
example:
{"ver":"1.0","type":"ClientHello","action":0}
Response body
challenge object refer to url-to-challenge-protocol
example:
{"ver":"1.0","type":"ServerHello","nonce":"8125419d-0ba4-11ec-a4f0-441ca8e37c61","server":{"name":"testServcer","icon":"http://somepic.jpg","url":"https://ont.io","did":"did:ont:sampletest"},"chain":["ONT"],"alg":["ES256"],"VCFilters":[{"type":"EmailCredential","trust_roots":["did:ont:testdid"],"required":true}]}
url_of_submit_response:
The Server api for submit auth response to server.
Request/Response content type
application/json
Request body
Response object refer to url-to-response-protocal
example:
{"ver":"1.0","type":"ClientResponse","nonce":"221b111a-0ba5-11ec-a4f0-441ca8e37c61","did":"did:ont:AR9NDnK3iMSZodbENnt7eX5TJ2s27fnHra","proof":{"type":"Ed25519","verificationMethod":"did:ont:AR9NDnK3iMSZodbENnt7eX5TJ2s27fnHra#key-1","created":1630556445,"value":"01c3841e922884df9288dde3c1fecbb575482c834560781454c44192b54140d3a7413d116fe81b76e3e74f88e2eb1351c120854d47189241545f66d7702cab8523"},"VPs":[]}
Response body
Anything in json