设备注册
This commit is contained in:
myh
parent
3b691766d0
commit
a639f284ea
28
frontend/src/components/RegisterDevice.css
Normal file
28
frontend/src/components/RegisterDevice.css
Normal file
@ -0,0 +1,28 @@
|
||||
.steps-content {
|
||||
margin-top: 16px;
|
||||
border: 1px dashed #e9e9e9;
|
||||
border-radius: 6px;
|
||||
background-color: #fafafa;
|
||||
padding: 80px 40px;
|
||||
}
|
||||
|
||||
.steps-action {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.dynamic-delete-button {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
font-size: 24px;
|
||||
color: #999;
|
||||
transition: all .3s;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.dynamic-delete-button:hover {
|
||||
color: #777;
|
||||
}
|
||||
.dynamic-delete-button[disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
526
frontend/src/components/RegisterDevice.js
Normal file
526
frontend/src/components/RegisterDevice.js
Normal file
@ -0,0 +1,526 @@
|
||||
import getWeb3 from '../utils/web3';
|
||||
import DeviceManager, { getDefaultAccount } from '../DeviceManager';
|
||||
|
||||
import elliptic from 'elliptic';
|
||||
import ethWallet from 'ethereumjs-wallet';
|
||||
import { sha3, addHexPrefix, setLengthLeft } from 'ethereumjs-util';
|
||||
import { merkleRoot } from 'merkle-tree-solidity';
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import './RegisterDevice.css';
|
||||
|
||||
import { Steps, Button, Input, Card, Spin, Alert, Divider, Form, Icon, Dropdown, Menu, message, notification } from 'antd';
|
||||
|
||||
const Step = Steps.Step;
|
||||
const { Meta } = Card;
|
||||
const EC = elliptic.ec;
|
||||
const FormItem = Form.Item;
|
||||
|
||||
const steps = [{
|
||||
title: 'Identifier',
|
||||
}, {
|
||||
title: 'Metadata',
|
||||
}, {
|
||||
title: 'Firmware',
|
||||
}, {
|
||||
title: 'Confirm',
|
||||
}];
|
||||
|
||||
const openNotificationWithIcon = (type, message, description) => {
|
||||
notification[type]({
|
||||
message,
|
||||
description
|
||||
});
|
||||
};
|
||||
|
||||
class RegisterDevice extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = this.getInitialState();
|
||||
}
|
||||
|
||||
getInitialState() {
|
||||
return {
|
||||
loading: false,
|
||||
current: 0,
|
||||
identifier: '',
|
||||
metadataHash: '',
|
||||
firmwareHash: '',
|
||||
showIdentifierInfo: false,
|
||||
publicKey: '',
|
||||
privateKey: '',
|
||||
address: '',
|
||||
metadata: [{ value: '' }],
|
||||
firmware: '',
|
||||
curve: '',
|
||||
deviceId: '',
|
||||
};
|
||||
}
|
||||
|
||||
reset() {
|
||||
this.setState(this.getInitialState());
|
||||
}
|
||||
|
||||
async componentWillMount() {
|
||||
try {
|
||||
let results = await getWeb3;
|
||||
|
||||
this.setState({
|
||||
web3: results.web3,
|
||||
});
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
message.error(error.message);
|
||||
}
|
||||
}
|
||||
|
||||
async watchForChanges(txHash) {
|
||||
let instance = await DeviceManager;
|
||||
let deviceCreatedEvent = instance.DeviceCreated()
|
||||
|
||||
deviceCreatedEvent.watch((error, result) => {
|
||||
if (!error) {
|
||||
if (result.transactionHash === txHash) {
|
||||
openNotificationWithIcon('success', 'Transaction mined', 'Your device has been registered.');
|
||||
this.state.deviceCreatedEvent.stopWatching();
|
||||
this.setState({
|
||||
loading: false,
|
||||
deviceId: result.args.deviceId.toNumber()
|
||||
})
|
||||
this.next();
|
||||
}
|
||||
} else {
|
||||
console.error(error);
|
||||
}
|
||||
});
|
||||
|
||||
this.setState({
|
||||
deviceCreatedEvent
|
||||
})
|
||||
}
|
||||
|
||||
next() {
|
||||
const { current, identifier/*, metadataHash, firmwareHash*/ } = this.state;
|
||||
|
||||
if ((current === 0) && (identifier === null || identifier === '')) {
|
||||
message.error('Invalid identifier: can\'t be empty');
|
||||
//} else if ((current === 1) && (metadataHash === null || metadataHash === '')) {
|
||||
// message.error('Invalid metadata hash.');
|
||||
//} else if ((current === 2) && (firmwareHash === null || firmwareHash === '')) {
|
||||
// message.error('Invalid firmware hash.');
|
||||
} else {
|
||||
this.setState(prevState => ({ current: prevState.current + 1 }));
|
||||
}
|
||||
}
|
||||
prev() {
|
||||
const current = this.state.current - 1;
|
||||
this.setState({ current });
|
||||
}
|
||||
|
||||
gotoStep(i) {
|
||||
this.setState({ current: i });
|
||||
}
|
||||
|
||||
handleChange(e) {
|
||||
this.setState({
|
||||
[e.target.name]: e.target.value,
|
||||
});
|
||||
|
||||
if (this.state.current === 0) {
|
||||
this.setState({
|
||||
showIdentifierInfo: false
|
||||
});
|
||||
}
|
||||
|
||||
if (this.state.current === 0 && e.target.name === 'identifier') {
|
||||
this.setState({
|
||||
showIdentifierInfo: false,
|
||||
publicKey: '',
|
||||
privateKey: '',
|
||||
address: '',
|
||||
curve: ''
|
||||
});
|
||||
}
|
||||
|
||||
if (this.state.current === 1 && e.target.name === 'metadataHash') {
|
||||
this.setState({
|
||||
metadata: [{ value: '' }]
|
||||
});
|
||||
}
|
||||
|
||||
if (this.state.current === 2 && e.target.name === 'firmwareHash') {
|
||||
this.setState({
|
||||
firmware: ''
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
generateEthWallet() {
|
||||
console.log(`Generating new Ethereum wallet`);
|
||||
const newWallet = ethWallet.generate();
|
||||
|
||||
let publicKey = newWallet.getPublicKey().toString('hex');
|
||||
let privateKey = newWallet.getPrivateKey().toString('hex');
|
||||
let address = newWallet.getAddressString();
|
||||
|
||||
console.log(`Private key: ${privateKey}`);
|
||||
console.log(`Public key: ${publicKey}`);
|
||||
console.log(`Address: ${address}`);
|
||||
|
||||
this.setState({
|
||||
identifier: address,
|
||||
showIdentifierInfo: true,
|
||||
address,
|
||||
publicKey,
|
||||
privateKey,
|
||||
curve: 'secp256k1'
|
||||
})
|
||||
}
|
||||
|
||||
generateEcKeyPair(curve) {
|
||||
let ec = new EC(curve);
|
||||
console.log(`Generating new ${curve} key pair`);
|
||||
let keyPair = ec.genKeyPair();
|
||||
|
||||
let publicKey = keyPair.getPublic(true, 'hex');
|
||||
let privateKey = keyPair.getPrivate('hex');
|
||||
|
||||
console.log(`Private key: ${privateKey}`);
|
||||
console.log(`Public key compressed: ${publicKey}`);
|
||||
console.log(`Public key uncompressed: ${keyPair.getPublic().encode('hex')}`);
|
||||
|
||||
this.setState({
|
||||
identifier: publicKey,
|
||||
showIdentifierInfo: true,
|
||||
address: '',
|
||||
publicKey,
|
||||
privateKey,
|
||||
curve
|
||||
})
|
||||
}
|
||||
|
||||
calculateMetadataHash() {
|
||||
let elements = this.state.metadata.map(el => sha3(el.value));
|
||||
console.log(`Generating Merkle root hash`);
|
||||
|
||||
let metadataRootSha3 = merkleRoot(elements);
|
||||
console.log(`Merkle root hash ${metadataRootSha3.toString('hex')}`);
|
||||
|
||||
this.setState({
|
||||
metadataHash: metadataRootSha3.toString('hex')
|
||||
})
|
||||
}
|
||||
|
||||
calculateFirmwareHash() {
|
||||
let firmwareHash = sha3(this.state.firmware);
|
||||
|
||||
this.setState({
|
||||
firmwareHash: firmwareHash.toString('hex')
|
||||
})
|
||||
}
|
||||
|
||||
removeMetadataField(k) {
|
||||
const { metadata } = this.state;
|
||||
metadata.splice(k, 1);
|
||||
this.setState({
|
||||
metadata
|
||||
})
|
||||
}
|
||||
|
||||
addMetadataField() {
|
||||
const { metadata } = this.state;
|
||||
metadata.push({ value: '' });
|
||||
this.setState({
|
||||
metadata
|
||||
});
|
||||
}
|
||||
|
||||
handleMetadataChange(e, index) {
|
||||
const { metadata } = this.state;
|
||||
metadata[index].value = e.target.value;
|
||||
|
||||
this.setState({
|
||||
metadata
|
||||
});
|
||||
}
|
||||
|
||||
downloadConfiguration() {
|
||||
const { identifier, metadataHash, firmwareHash, metadata, firmware, address, publicKey, privateKey, curve, deviceId } = this.state;
|
||||
|
||||
const configuration = {
|
||||
identifier,
|
||||
metadataHash,
|
||||
firmwareHash,
|
||||
};
|
||||
|
||||
if (metadata.length > 0 && metadata[0].value !== '' && metadataHash !== '') {
|
||||
configuration.metadata = metadata.map(el => el.value);
|
||||
}
|
||||
|
||||
if (firmware !== '' && firmwareHash !== '') {
|
||||
configuration.firmware = firmware;
|
||||
}
|
||||
|
||||
if (address !== '') {
|
||||
configuration.address = address;
|
||||
}
|
||||
|
||||
if (publicKey !== '') {
|
||||
configuration.publicKey = publicKey;
|
||||
}
|
||||
|
||||
if (privateKey !== '') {
|
||||
configuration.privateKey = privateKey;
|
||||
}
|
||||
|
||||
if (curve !== '') {
|
||||
configuration.curve = curve;
|
||||
}
|
||||
|
||||
if (deviceId !== '') {
|
||||
configuration.deviceId = deviceId;
|
||||
}
|
||||
|
||||
let configurationJson = JSON.stringify(configuration);
|
||||
|
||||
let element = document.createElement("a");
|
||||
let file = new Blob([configurationJson], { type: 'text/json' });
|
||||
element.href = URL.createObjectURL(file);
|
||||
element.download = `device_${deviceId}.json`;
|
||||
element.click();
|
||||
}
|
||||
|
||||
onCurveSelect({ key }) {
|
||||
this.generateEcKeyPair(key);
|
||||
};
|
||||
|
||||
getContentForStep(step) {
|
||||
const { identifier, metadataHash, firmwareHash, metadata, firmware } = this.state;
|
||||
|
||||
// Identifier
|
||||
if (step === 0) {
|
||||
const curves = ['p224', 'curve25519'];
|
||||
const ecMenu = (
|
||||
<Menu onClick={(e) => this.onCurveSelect(e)}>
|
||||
{curves.map(curve => <Menu.Item key={curve}>{curve}</Menu.Item>)}
|
||||
</Menu>
|
||||
);
|
||||
return (
|
||||
<div>
|
||||
<p>
|
||||
<strong>Unique device identifier</strong> is a public key or a fingerprint of RSA/ECC public key. It can also be an Ethereum address (recommended).
|
||||
</p>
|
||||
<Input
|
||||
placeholder="Identifier e.g. Ethereum address"
|
||||
style={{ maxWidth: '800px' }}
|
||||
value={identifier}
|
||||
name="identifier"
|
||||
maxLength="66"
|
||||
onChange={(e) => this.handleChange(e)}
|
||||
/>
|
||||
<br /><br />
|
||||
<Button.Group size="large">
|
||||
<Button type="primary" onClick={() => this.generateEthWallet()}>Generate Ethereum wallet</Button>
|
||||
<Dropdown overlay={ecMenu}>
|
||||
<Button type="primary">
|
||||
Generate elliptic curve key pair
|
||||
</Button>
|
||||
</Dropdown>
|
||||
</Button.Group>
|
||||
{this.state.showIdentifierInfo ?
|
||||
<div>
|
||||
<br />
|
||||
<Alert message="You will be given private key and device configuration on the last step." type="info" showIcon />
|
||||
</div> : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Metadata hash
|
||||
if (step === 1) {
|
||||
return (
|
||||
<div>
|
||||
<p>
|
||||
<strong>Metadash hash</strong> is Merkle root hash of device information or just a hash of any data.
|
||||
</p>
|
||||
<Input
|
||||
placeholder="Metadata hash"
|
||||
style={{ maxWidth: '800px' }}
|
||||
value={metadataHash}
|
||||
name="metadataHash"
|
||||
maxLength="66"
|
||||
onChange={(e) => this.handleChange(e)}
|
||||
/>
|
||||
<Divider />
|
||||
<p>
|
||||
If you already don't have one, you can use inputs below to generate SHA-3 (Keccak) hash. With multiple fields, Merkle tree will be used.
|
||||
</p>
|
||||
<br />
|
||||
<Form>
|
||||
{metadata.map((key, index) => {
|
||||
return (
|
||||
<FormItem>
|
||||
<Input
|
||||
placeholder="Some information"
|
||||
style={{ width: '60%' }}
|
||||
value={key.value}
|
||||
maxLength="66"
|
||||
onChange={(e) => this.handleMetadataChange(e, index)}
|
||||
/>
|
||||
{metadata.length > 1 ? (
|
||||
<Icon
|
||||
className="dynamic-delete-button"
|
||||
type="minus-circle-o"
|
||||
disabled={metadata.length === 1}
|
||||
onClick={() => this.removeMetadataField(index)}
|
||||
/>
|
||||
) : null}
|
||||
</FormItem>
|
||||
)
|
||||
})
|
||||
}
|
||||
<FormItem>
|
||||
<Button type="dashed" onClick={() => this.addMetadataField()} style={{ width: '60%' }}>
|
||||
<Icon type="plus" /> Add field
|
||||
</Button>
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" onClick={() => this.calculateMetadataHash()}>Generate</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Firmware hash
|
||||
if (step === 2) {
|
||||
return (
|
||||
<div>
|
||||
<p>
|
||||
<strong>Firmware hash</strong> is a hash of actual firmware hash. Actual firmware hash is not supposed to be stored.
|
||||
</p>
|
||||
<Input
|
||||
placeholder="Firmware hash"
|
||||
style={{ maxWidth: '800px' }}
|
||||
value={firmwareHash}
|
||||
name="firmwareHash"
|
||||
maxLength="66"
|
||||
onChange={(e) => this.handleChange(e)}
|
||||
/>
|
||||
<Divider />
|
||||
<p>
|
||||
You can use input to generate SHA-3 (Keccak) hash of any data.
|
||||
</p>
|
||||
<br />
|
||||
<Input
|
||||
placeholder="Some data"
|
||||
style={{ width: '60%' }}
|
||||
value={firmware}
|
||||
name="firmware"
|
||||
onChange={(e) => this.handleChange(e)}
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<Button type="primary" onClick={() => this.calculateFirmwareHash()}>Generate</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Overview/confirm
|
||||
if (step === 3) {
|
||||
return (
|
||||
<div>
|
||||
<Card title={<div>Identifier {identifier} <a><Icon type="edit" onClick={() => this.gotoStep(0)} /></a></div>} bordered={false}>
|
||||
<Meta
|
||||
title={<div>Metadata hash {metadataHash.length > 0 ? metadataHash : 'empty'} <a><Icon type="edit" onClick={() => this.gotoStep(1)} /></a></div>}
|
||||
description={<div>Firmware hash {firmwareHash.length > 0 ? firmwareHash : 'empty'} <a><Icon type="edit" onClick={() => this.gotoStep(2)} /></a></div>}
|
||||
/>
|
||||
</Card>
|
||||
</div >
|
||||
);
|
||||
}
|
||||
|
||||
// Configuration
|
||||
if (step === 4) {
|
||||
return (
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<Icon type="check-circle-o" style={{ fontSize: 46 }} />
|
||||
<br /><br />
|
||||
<p>
|
||||
Click below to download device configuration.
|
||||
</p>
|
||||
<br />
|
||||
<Button type="primary" onClick={() => this.downloadConfiguration()}>Download</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
async createDevice() {
|
||||
const { identifier, metadataHash, firmwareHash, address } = this.state;
|
||||
try {
|
||||
let instance = await DeviceManager;
|
||||
|
||||
let identifierToSave = identifier;
|
||||
if (address !== '') {
|
||||
let addressToPad = address;
|
||||
if (address.startsWith('0x')) {
|
||||
addressToPad = addressToPad.substring(2);
|
||||
}
|
||||
identifierToSave = setLengthLeft(Buffer.from(addressToPad, 'hex'), 32).toString('hex');
|
||||
}
|
||||
|
||||
let result = await instance.createDevice(addHexPrefix(identifierToSave), addHexPrefix(metadataHash), addHexPrefix(firmwareHash), { from: getDefaultAccount() });
|
||||
await this.watchForChanges(result.tx);
|
||||
openNotificationWithIcon('info', 'Transaction sent', 'Once mined, your device will be registered.');
|
||||
this.setState({
|
||||
loading: true
|
||||
});
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
message.error(error.message);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { current } = this.state;
|
||||
return (
|
||||
<div>
|
||||
<Spin spinning={this.state.loading} className="loading-spin">
|
||||
<Steps current={current}>
|
||||
{steps.map(item => <Step key={item.title} title={item.title} />)}
|
||||
</Steps>
|
||||
<div className="steps-content">{this.getContentForStep(current)}</div>
|
||||
<div className="steps-action">
|
||||
{
|
||||
current < steps.length - 1
|
||||
&& <Button type="primary" onClick={() => this.next()}>Next</Button>
|
||||
}
|
||||
{
|
||||
current === steps.length - 1
|
||||
&& <Button type="primary" onClick={() => this.createDevice()}>Register</Button>
|
||||
}
|
||||
{
|
||||
current > 0 && current !== 4
|
||||
&& (
|
||||
<Button style={{ marginLeft: 8 }} onClick={() => this.prev()}>
|
||||
Previous
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
{
|
||||
current === 4
|
||||
&& (
|
||||
<Button type="primary" onClick={() => this.reset()}>
|
||||
Reset
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</Spin>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default RegisterDevice;
|
||||
Loading…
Reference in New Issue
Block a user