{"_id":"@aceblock/aceblock-login-qr","_rev":"7-48e3664723d429f3d4d7ae2511a2931d","time":{"0.0.1-beta1":"2019-08-28T11:03:07.239Z","created":"2019-09-13T08:15:10.817Z","0.0.1-beta2":"2019-09-13T08:15:11.196Z","modified":"2022-04-04T11:10:22.834Z"},"name":"@aceblock/aceblock-login-qr","dist-tags":{"latest":"0.0.1-beta2"},"versions":{"0.0.1-beta2":{"name":"@aceblock/aceblock-login-qr","version":"0.0.1-beta2","description":"Simple login with AceBlock ID (SSI)","main":"build/index.js","scripts":{"build":"babel ./src -d ./lib","dev":"nodemon server.js","lint":"eslint ./src","test":"echo \"Error: no test specified\" && exit 1","prepublishOnly":"npm run build"},"repository":{"type":"git","url":"git+https://kzajc@bitbucket.org/netis/aceblock-login-package.git"},"keywords":["login","AceBlock","SSI"],"author":{"name":"Netis - Blockchain techonologies"},"license":"MIT","devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","connect":"^3.7.0","ejs":"^2.6.2","eslint":"^6.2.1","express":"^4.17.1","nodemon":"^1.19.1","serve-static":"^1.14.1"},"dependencies":{"eth-ecies":"^1.0.3","ethereumjs-tx":"^2.1.0","ethereumjs-util":"^6.1.0","ethereumjs-wallet":"^0.6.3","fs":"0.0.1-security","web3":"^1.2.1"},"gitHead":"400fb9157f8a66b44d56eb9c7c430069e3fa0a8b","homepage":"https://bitbucket.org/netis/aceblock-login-package#readme","_id":"@aceblock/aceblock-login-qr@0.0.1-beta2","_nodeVersion":"10.15.1","_npmVersion":"6.7.0","dist":{"integrity":"sha512-1U57HidyapBedqgAghh0IX90LQKrnGKWxlI2PIDlZ23oYACOpiv3z+w7wW55nbeybs6Obqs7jlgxNm6OYIWkHA==","shasum":"82fa3926f01605d377cbc15d6d35088b81d2f6b8","tarball":"https://registry.npmjs.org/@aceblock/aceblock-login-qr/-/aceblock-login-qr-0.0.1-beta2.tgz","fileCount":9,"unpackedSize":144270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJde1APCRA9TVsSAnZWagAA2HAP/0Sust0AYpRVPUHpYC7g\nhtZmxq7iOe03zfT18gn9qn4dQ4GtAuaC5cjm920olZsjeXf1qBVJuBhfbAvX\nvu1iHWWUuUVuWwjeRPi7bpeik0jWAdjw19PYKb9hI2cY+2YxatDUXlKNHWET\nXDwVO/w+OuEcRq9XqXovwifieppCZwKn6ZjveJyA61g40nmMMgW3suVEnGRw\n2q6yaVWOE8N9acI6TZr31DCLKrzbIbVu3zW6hva3CDAY6vp/MB+ptzf7ijpV\n44DjcfV+tCRa6JrHfL29BpsgMr04QgJaolOEIBAP7Z813OXT19flooTr4tpB\n77wQBtaaMXaYeDq3hIPjpGHeW5Hx8jGLI2qKdfeekdBi5MAxID4ReT7Avjcu\nayZYrHnhCgkkNkJWIOdD1YFjsGRtoEnqQgKd5uu1L4UJr92uDyMMArLG/Afa\nga6JW3sIuAGYoXfn4bmJmhY7I9cqxdjZV8N72mNXWQSQC9mSdsum4zbhIYJD\nFjbO8jT8S+sqRBw6R70bV6E9xNpo96+SdacPW0gzr57SWsKcMIOjBYzcPq0a\nxrF/nuoyfQb8xqLZoGh4kyqw+1V75ogT72O7WIcwJEOIFpuS2ABhUnHx/v6m\n47xrWrdm4PO1+u4TjPEBq0mnE+6FYtn3J/kzF4h1dZUiKLZjlDzDwwh6zLZM\n7u56\r\n=8/uz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHdd5WwXHUIJQ61KnztVZHglgT6F/C68bFigcbXVmKn3AiAleCGHlLnIueSF/OdLZk9gqQnzoqDpc7jtKt3VRAzuYQ=="}]},"maintainers":[{"name":"aceblock","email":"insajder.alert@gmail.com"}],"_npmUser":{"name":"aceblock","email":"insajder.alert@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/aceblock-login-qr_0.0.1-beta2_1568362511043_0.0931558515716242"},"_hasShrinkwrap":false}},"maintainers":[{"name":"aceblock","email":"insajder.alert@gmail.com"}],"description":"Simple login with AceBlock ID (SSI)","homepage":"https://bitbucket.org/netis/aceblock-login-package#readme","keywords":["login","AceBlock","SSI"],"repository":{"type":"git","url":"git+https://kzajc@bitbucket.org/netis/aceblock-login-package.git"},"author":{"name":"Netis - Blockchain techonologies"},"license":"MIT","readme":"# AceBlock login package\r\n\r\n**THIS PACKAGE IS CURRENTLY FOR DEMONSTRATIVE PURPOSES ONLY, AND THUS NOT READY FOR PRODUCTION**  \r\n**IF YOU WANT SECURE VERSION OF AceID, PLEASE CONTACT info[AT]netis.si**  \r\n\r\n**THIS PACKAGE IS COMPATIBILE WITH PREDECESSOR OF AceID MOBILE APP, NxxtechID**  \r\n**AceID MOBILE APP WILL BE COMPATIBILE WITH VERSIONS 1.0.0 AND GRATER** \r\n\r\n[TOC]\r\n\r\n## Register to use AceBlock Login Service\r\n\r\nEach service, that wants to use AceID login, must first register in AceID service registry, available at *to be set*. If service is not registered, user cant call register/login to your page.  \r\n\r\nIf you intend to use only *demo version*, you do not have to register.\r\n\r\n## Demo version\r\n\r\nInstructions below are written for production mode. To use it in demo mode, look at the end of this document.\r\n\r\n## Default Config fields\r\n\r\n`AceBlockConfig.json` contains the parameters, which are the same for all AceBlock login users. It is loaded from AceBlock server. Currently it is available at https://212.93.226.188.nip.io/AceBlock/AceBlockConfig.json\r\n\r\nIt has the following fields\r\n\r\n| Field             | Content                                           |\r\n| ----------------- | ------------------------------------------------- |\r\n| bcURL             | Http endopint to the AceBlock blockchain client   |\r\n| bcABI             | Interface of login contract                       |\r\n| contractAddress   | Login contract address                            |\r\n| IpfsEndpoint      | Http endopint to the AceBlock IPFS client         |\r\n| QRrefresh         | Time in ms, after QR content is refreshed         |\r\n\r\n## Page Specific Config fields\r\n\r\n`AceBlockLoginConfig.json` contains the parameters, specific for every portal/page. It should be saved on server, where webpage is hosted.\r\n\r\nIt has the following fields\r\n\r\n| Field                 | Content                                           |\r\n| --------------------- | ------------------------------------------------- |\r\n| accessToOptionalItems | List of user data, that are not neccessary for the service, allowing user to decide to share it or not |\r\n| accessToRequiredItems | List of user data, that not neccessary for the service, allowing user to decide to share it or not     |\r\n| authSC                | Smart contract addreeses, for which webpage gets the authorization to perform actions on user behalf   |\r\n| portalAddress         | Portal or webpage address                                                                              |\r\n| RedirectURL           | URL where page should redirect after user logs in                                                      |\r\n| demo                  | Inidicator if only demo mode                                                                            |\r\n\r\n### accessToOptionalItems and accessToRequiredItems\r\n\r\n`accessToOptionalItems` and `accessToRequiredItems` are comma separated lists of items that we require from users. Items are represented with numerical keys, as described at\r\nhttps://212.93.226.188.nip.io/AceBlock/userDataFields.json . List might be updated in the future.\r\n\r\nFor example, you want following users data\r\n\r\n1. Needed for service: *user's phone, first name, last name and email*\r\n\r\n2. Not needed for service, but might be useful for other purposes: *state, zip coe, country and nationality*\r\n\r\nTo get them, add following lines to `AceBlockLoginConfig.json`\r\n```\r\n    \"accessToRequiredItems\": \"1,2,4,6\",\r\n    \"accessToOptionalItems\": \"7,8,9,10\"\r\n```\r\n\r\n### authSC [to be changed from 1.0.0]\r\n\r\nSince users private key cannot be shared directly with webpage (or any other services), we introduce this method, where webpage can perform simple actions on contracts, which are authorized by user. If webpage wants to use this feature, QR code must include list of contracts for which user grants rights.\r\n\r\nFor example, if you wants for your page to write on users behalf on contract at address \"0xca23a138b9b069224d94a77edfce5c5504b0140d\" add to `AceBlockLoginConfig.json`\r\n```\r\n    \"authSC\": [\"0xca23a138b9b069224d94a77edfce5c5504b0140d\"]\r\n```\r\n\r\nFuture changes: interchain operability. Together with contract you would have to specifiy on which chain it is (chainID)\r\n\r\n### portalAddress [to be deprecated from 1.0.0]\r\n\r\n`portalAddress` is unique identifier for every web portal, so ID app can know where it is loging in (or registering). Currently, this is simple field, while in the production app, app will get portal address from QR signature.\r\n\r\n\r\n## QR CODE\r\n\r\nCode is generated from data from `AceBlockLoginConfig.json` and signed with either server private key (for regular web app) or with site temporary ID (for single page web app).\r\n\r\n## Using AceBlock Login Service\r\n\r\n### Single page web app\r\n\r\n#### As a node module\r\n\r\nFirst install npm package\r\n\r\n`npm -i @aceblock/aceblock-login-qr`\r\n\r\nPrepare html\r\n\r\n```html\r\n<body>\r\n    <div id=\"AceBlockQRplace\"></div>\r\n</body>\r\n```\r\n\r\nThen import it in your app.\r\n\r\n```js\r\nconst aceBlock = require(\"@aceblock/aceblock-login-qr\")\r\n\r\n// generate QR code and present it in element named elementID\r\nconst elementID = \"AceBlockQRplace\"\r\naceBlock.displayQR(elementID)\r\n\r\n// generate QR code, and wait for QR img tag (new event every 60 sec)\r\naceBlock.displayQR()\r\nwindow.addEventListener('qrContent', (data) => {\r\n    document.getElementById(\"AceBlockQRplace\").innerHTML = data.qrContent\r\n})\r\n\r\n// get only QRData (new event every 60 sec)\r\naceBlock.getQRData()\r\nwindow.addEventListener('qrContent', (data) => {\r\n    console.log(data.qrContent) // make image out of it and diplay on your page\r\n})\r\n\r\nwindow.addEventListener('aceBlockData', (data) => {\r\n    // if you called displayQR() or qrContent(), this events also give indication if login was succesfull or not, so you can manage login element here\r\n    if (data.userData) {\r\n        document.getElementById(\"AceBlockQRplace\").innerHTML = \"Login succesful\"\r\n        setTimeout(function(){\r\n            document.getElementById(\"AceBlockQRplace\").style.display = 'none'\r\n        }, 2000)\r\n    }\r\n\r\n    // in any case, you get user data\r\n    console.log(\"User data\", data.userData)\r\n\r\n});\r\n\r\n```\r\n\r\n#### Browserified (CDN)\r\n\r\nPackage is available on\r\n\r\nhttps://212.93.226.188.nip.io/AceBlock/js/aceblock-login-qr.js  \r\nhttps://212.93.226.188.nip.io/AceBlock/js/aceblock-login-qr.min.js (minified) \r\n\r\nYou can either download it and load it locally, or you can load it directly from our servers (in the future also from the IPFS).  \r\n\r\n``` html\r\n<head> \r\n    ...\r\n    <script type=\"text/javascript\" src=\"https://212.93.226.188.nip.io/AceBlock/js/aceblock-login-qr.js\"></script>\r\n    ...\r\n</head>    \r\n```\r\n\r\nNow you have 3 options to implement login on a page, with detailed description below.\r\n\r\n1. Let package display QR code on page\r\n2. Let package generate QR code html, but diplay it manually\r\n3. Let package only prepare QR content, then generate and display QR code manually\r\n\r\n**1. Let package display QR code on page**\r\n\r\nAll you have to do is to create a div where QR will be displayed and button to initiate the login process. Click on a button should trigger function `displayQR(elementID)`, where `elementID` is div id where code should be displayed.  \r\n\r\n``` html\r\n<body>\r\n    <div id=\"AceBlockQRplace\"></div>\r\n    <button onclick=\"displayQR('AceBlockQRplace'); this.style.display = 'none'\">Login with AceBlock</button>\r\n</body>\r\n```\r\n\r\nWhen user succesfully logs in, you will get user data (look at section \"getting user data\") or error message.\r\n\r\n**2. Let package generate QR code html, but diplay it manually**\r\n\r\nCode is similar as in previous case, except `displayQR()` is called without any argument. Then you need a separate js file, where you listen for event `qrContent` and then act accordingly when data comes. In this case you get html `img` tag, so you just need to present it wherever you want.  \r\n\r\n``` html\r\n<body>\r\n    <div id=\"AceBlockQRplace\"></div>\r\n    <button onclick=\"displayQR(); this.style.display = 'none'\">Login with AceBlock</button>\r\n</body>\r\n```\r\n\r\nIn `app.js`  \r\n\r\n``` js\r\nwindow.addEventListener('qrContent', (data) => {\r\n    document.getElementById(\"AceBlockQRplace\").innerHTML = data.qrContent\r\n})\r\n\r\n```\r\n\r\n**3. Let package only prepare QR content, then generate and display QR code manually**\r\n\r\nInsetead of calling `displayQR()`, you now call `getQRData()`. Again, in separate js file, listen for event `qrContent` and then act accordingly when data comes. In this case you get just a base64 encoded content of qr code, so you have to generate QR image yourself.  \r\nNote: our choice of QR code generator is optimized to work with AceBlockID app, so using your own version might lead to performance drop.\r\n\r\n``` html\r\n<body>\r\n    <div id=\"AceBlockQRplace\"></div>\r\n    <button onclick=\"getQRData(); this.style.display = 'none'\">Show QR code AceBlock</button>\r\n</body>\r\n\r\n```  \r\n\r\nIn `app.js`\r\n\r\n``` js\r\nwindow.addEventListener('qrContent', (data) => {\r\n    console.log(data.qrContent) // make image out of it and diplay on your page\r\n})\r\n\r\n```\r\n\r\n#### Getting user data\r\n\r\nWhen user succesfully log in, she shares data with page. Data can fetched with listening to event `aceBlockData`. Since user can change data on her mobile phone during when her session is still active or even revoke access, you need to monitor for these changes and act accoringly\r\n\r\nIn `app.js`\r\n\r\n``` js\r\nwindow.addEventListener('aceBlockData', (data) => {\r\n    // if you called displayQR() or qrContent(), this events also give indication if login was succesfull or not, so you can manage login element here\r\n    if (data.userData) {\r\n        document.getElementById(\"AceBlockQRplace\").innerHTML = \"Login succesful\"\r\n        setTimeout(function(){\r\n            document.getElementById(\"AceBlockQRplace\").style.display = 'none'\r\n        }, 2000)\r\n    }\r\n\r\n    // in any case, you get user data\r\n    console.log(\"User data\", data.userData)\r\n\r\n});\r\n```\r\n\r\n#### Handling access with mobile page\r\n\r\nYou do not need to cover the case, when user hase AceBlockID already installed, since package handle login from mobile device automatically (without the need to scan QR code).\r\nIf user does not have app installed, you should redirect it to download page. (instructions to come)\r\n\r\n### Regular web app\r\n\r\n*WIP*\r\n\r\n### Native Mobile app\r\n\r\n*WIP*\r\n\r\n# Demo mode\r\n\r\nTo enable demo mode, do the following:\r\n\r\n* In `AceBlockLoginConfig.json` set  \"demo\" : true\r\n* Loads necessary dependencies, by adding in `index.html` to head\r\n``` html\r\n<head>\r\n        <script type=\"text/javascript\" src=\"https://212.93.226.188.nip.io/AceBlock/js/aceblock-login-qr.js\"></script>\r\n\r\n        <!-- jquery, popper, bootstrap, bootbox -->\r\n        <script src=\"https://code.jquery.com/jquery-3.3.1.slim.min.js\" integrity=\"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo\" crossorigin=\"anonymous\"></script>\r\n        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js\" integrity=\"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1\" crossorigin=\"anonymous\"></script>\r\n        <link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css\" integrity=\"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T\" crossorigin=\"anonymous\">\r\n        <script src=\"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js\" integrity=\"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM\" crossorigin=\"anonymous\"></script>\r\n        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.3.2/bootbox.min.js\"></script>\r\n\r\n</head>\r\n```\r\n","readmeFilename":"README.md"}