react-innovatielab-identity-qr
Introduction
A React component for generating a QR code that represents a question about someones InnovatieLab identity. Questions are registered on the innovatielab.nl domain. For each question an ID is generated which should be included on the questioners page. Based on this ID a QR code is generated. The user will scan this QR code with his Innovatielab identity App (follow this link on your Smart Phone). If the user agrees to the information exchange, the questioner will receive (part of) the users identity.
Creating a question happens after authentication, so the questioners identity is assured. Scanning a QR code by the user also happens after authentication, which assures the users identity. So both parties know for sure who they are dealing with.
Demo
sligro.michielmayer.nl/identity
Known Issues
- Due to browser implementations the camera can only be accessed over https or localhost.
- Only compatible with newest macOS/iOS Safari version.
Install
npm install --save react-innovatielab-identity-qr
Example
import React from 'react'
import InnovatielabIdentityQR from 'react-innovatielab-identity-qr'
class IdentityView extends React.Component {
constructor(props) {
super(props)
this.state = {
attests: []
}
}
onShowQR = (question) => {
console.log('question: ', question)
/*
will output eg:
[{
'_id': '59b913a68fd3843665f61415',
'property': 'postalCode',
'label': 'Postcode',
'operator': 'eq',
'operatorString': 'is gelijk aan'
'compareValue': '3948',
'dimension': '',
}]
*/
}
onAgree = (attests) => {
this.setState({attests})
}
onReject = (message) => {
console.log('rejection message: ', message)
}
onError = (error) => {
console.log('error: ', error)
}
render() {
return (
<div>
<InnovatielabIdentityQR questionId="59a535ea6af205300238b8f9" qrId="1234" onShowQR={this.onShowQR} onAgree={this.onAgree} onReject={this.onReject} onError ={this.onError} />
{
this.state.attests.map(attest => {
return (
<div key={attest.property}>
<div>{`${attest.label} ${attest.operatorString} ${attest.compareValue} ${attest.dimension}?`}</div>
<div>{attest.value}</div>
</div>
)
})
}
</div>
)
}
}Props
questionId
Type: string, Required
The id that refers to the question, created on the innovatielab.nl domain.
qrId
Type: string, Required
Id to identify this specific QR code instance. Required to be able to distinguish multiple QR codes using the same questionId.
onAgree
Type: function, Required, Argument: attests
Agree event handler. Called after user agreed to information exchange, and the information is received. attests keeps an array of the attribute values corresponding the original question.
onReject
Type: function, Required, Argument: message
Function to call when user rejected the information exchange.
onError
Type: function, Required, Argument: error
Function to call when something went wrong with the information request.
style
Type: object, Optional
Styling of the container element.
className
Type: string, Optional
ClassName for the container element.
Dev
Install dependencies
npm install
Build
npm run build
Tested platforms
- Safari 11 and Chrome 56 and Firefox 53 on macOs 10.12
- Chrome 55 and Firefox 50 on Android 6.0.1
- Safari 11 on IOS 10