Global frontend-only verification system for web3 dapps.
Demo dapp using SkyID login: https://sky-note.hns.siasky.net/
Read security logs in CHANGELOG.md
Just copy this code to your HTML:
<script>
// get portal url from response header
fetch("", {method: 'HEAD'})
.then( response => response.headers)
.then( headers => {
let portal = headers.get('skynet-portal-api');
let devMode = false;
if (!portal){
// if no header, default to siasky.net
portal = "https://siasky.net"
devMode = true;
}
let portalNoProtocol = portal.replace(/^https?\:\/\//i, "");
// path for sky-id, easier than subdomain logic
let path = 'https://sky-id.hns.' + portalNoProtocol;
// create script tag
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = path+"/skyid.js";
script.onload = ()=>{initSkyID(path, devMode)}; //once loaded, call method to run code that relies on it
document.head.appendChild(script);
});
var initSkyID = function(path){
var skyid = new SkyID('App Name', null, {customSkyidUrl:path});
}
</script>// detect if app is opened on localhost for development
if (window.location.hostname == 'idtest.local' || window.location.hostname == 'localhost' || window.location.protocol == 'file:') {
var devMode = true
} else {
var devMode = false
}
var opts = { 'devMode': devMode }
var skyid = new SkyID('App name', skyidEventCallback, opts)
function skyidEventCallback(message) {
switch (message) {
case 'login_fail':
console.log('Login failed')
break;
case 'login_success':
console.log('Login succeeded!')
fetchNote()
break;
case 'destroy':
console.log('Logout succeeded!')
break;
default:
console.log(message)
break;
}
}| Option | default |
|---|---|
| devMode | false |
| disableLoadingScreen | false |
| customSkyidUrl | null |
| onUploadProgress | null |
skyid.sessionStart()skyid.sessionDestroy()If you want, you can use special HTML classes, so you don't need to listen to SkyID callbacks.
-
show-if-logged-in- Setdisplayto''if user logged in -
hide-if-logged-in- Setdisplaytononeif user logged in -
show-if-initialized- Setdisplayto''if SkyID initialized -
hide-if-initialized- Setdisplaytononeif SkyID initialized
Example:
<div class="show-if-logged-in"> You are logged in! </div>
You can also combine these classes:
<div class="hide-if-initialized">Loading...</div>
<div class="show-if-initialized hide-if-logged-in" style="display:none"> Loaded and you are not logged in :( </div>
<div class="show-if-initialized show-if-logged-in" style="display:none"> Loaded and you are logged in! </div>It is important to use style="display:none" and not a CSS class the display property (bad example class="display-none") because SkyID will only reset the display attribute and not the CSS class
SkyID uses SkyDB under the hood to save, modify, and fetch files. The only difference is that you don't need to remember for your secret key - SkyID generates deterministic keypairs instead.
let yourObject = { key1: 'value1' }
skyid.setJSON('filename', yourObject, function(response) {
if (response != true) {
alert('Sorry, skyid.setFile failed :(')
}
})You can store any JSON data, for example notes, settings, or a list of your uploaded files.
skyid.getJSON('filename', function(response) {
if (response == false) {
alert('Sorry, skyid.getFile failed :(')
}
console.log(response)
})skyid.setRegistry('filename', 'IADUs8d9CQjUO34LmdaaNPK_STuZo24rpKVfYW3wPPM2uQ', function(success) {
if (success == false) {
alert('Sorry, skyid.setRegistry failed :(')
}
})skyid.getRegistry('filename', function(entry) {
if (entry == false) {
alert('Sorry, skyid.getRegistry failed :(')
}
console.log(entry)
})skydbFile = skyid.getRegistryUrl('filename')<input id="my_input" type="file" multiple="" webkitdirectory="true">let files = document.getElementById['my_input'].files
skyid.uploadDirectory(files, function(skylink) {
console.log('File uploaded:', skylink)
})let file = document.getElementById['my_input'].files[0]
skyid.uploadEncryptedFile(file, 'derivationPath', function(skylink) {
console.log('Uploaded:', skylink)
})derivationPath can be any string. It will be hashed with the user's app-seed, no need to make it long since the app-seed is not public. It is recommended to use unique derivationPath to each file, so users can share decription keys for one file without revealing the other files
You can put a callback function to the onUploadProgress option both for upload and download.
let skylink = 'sia:/...'
skyid.downloadEncryptedFile(skylink, 'derivationPath', function(blobUrl){
console.log('File downloaded', blobUrl)
})RFC: https://forum.sia.tech/t/discussion-about-sky-id/64
@Delivator
❤ Thank you! ❤
Taek, wkibbler, redsolver, Nemo, pjbrone, kreelud, Mortal-Killer, RBZL
cd SkyID
npm install
You need to compile your node-js files (from the src folder) to a web-browser friendly javascript. Type
npx webpack
You'll see 3 new .js file in the dist folder. If you want to edit javascript, you can make changes inside the src folder and run npx webpack again. (Of course you can use npx webpack --watch so it will watch and compile automatically if you change something.
You can just open the /dist/index.html in your browser.
If you're using the file:// protocol (or idtest.local as localhost domain), SkyID will recognise you're in development mode and siasky.net will be used as default Skynet portal.
Chrome won't save cookies with file:// protocol. You can use Firefox, use idtest.local as localhost domain, or upload the dist folder to Skynet.
We have a SkyID-example-note-dapp, so you can clone it. Don't forget to change the source of skyid.js if you want to test with self-hosted SkyID (open image)
To be able to test cross-domain things, you need to setup two local virtual-host domains. If you have Wamp.NET installed (what I really recommend), this will be easy. You just need to create two sites pointing to your local SkyID projects: idtest.local for SkyID and skynote.local for the example dapp (open image).
