react component for qrcode login with Server-Sent Event
npm install sseqrcodea qrcode component for Server-Sent Event.
The package can be installed via NPM:
``bash`
npm install sseqrcode --save
SSE: Using server-sent events on [MDN][Using server-sent events].
[Using server-sent events]: https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events
``
+-------+ +---------+ +---------+
| user | | browser | | server |
+-------+ +---------+ +---------+
| | |
| | request login |
| |---------------------------------->|
| ---------\ | |
| | onInit |-| |
| |--------| | |
| | |
| | send('qrcode', base64/url) |
| |<----------------------------------|
| -----------\ | |
| | onQrcode |-| |
| |----------| | |
| | |
| present QRCode image | |
|<--------------------------| |
| | |
| | send('pending', 'pending') |
| |<----------------------------------|
| ------------\ | |
| | onPending |-| |
| |-----------| | |
------------------\ | | |
| scan the QRCode |-| | |
|-----------------| | | |
| | |
| access the login url | |
|-------------------------------------------------------------->|
| | |
| | send('scanned', 'logged in') |
| |<----------------------------------|
| ------------\ | |
| | onScanned |-| |
| |-----------| | |
| | |
`javascript
import React from 'react'
import { SSEQRCode } from 'SSEQRCode'
class App extends React.Component {
handleScan = ret => {
alert(Logged in as ${ret})
}
render() {
return (
Props
prop|type|required|description
:-----:|:-----:|:-----:|:-----:
sseSource|EventSource|when sseURL is null|provided EventSource
sseURL|string|when sseSource is null|URL of the source
width|number or string| |width property on img tag, default 200
height|number or string| |height property on img tag, default 200
keepAlive|boolean| |whether to close connection after qrcodeEvent was received, default false
errorEvent|string| |name of error event, default 'error'
pendingEvent|string| |name of pending event, default 'pending'
scannedEvent|string| |name of scanned event, default 'scanned'
qrcodeEvent|string| |name of qrcode event, default 'qrcode'
onInit|Function| |will be called when EventSource is opened
onQrcode|Function| |will be called when qrcodeEvent received
onPending|Function| |will be called when pendingEvent received
onScanned|Function| |will be called when scannedEvent received
onError|Function| |will be called when errorEvent received or error occurred
onQRCodeLoaded|Function| |will be called when QRCode image is loaded
$3
function onQrcode(data)where:
data - string* the received message from server, should be base64 or URL of QRCode image$3
function onPending(data)where:
data - string* the received message from server$3
function onScanned(data)where:
data - string* the received message from server, can be used for notification$3
function onError(data)where:
data - string* the received message from server or the error message$3
function onQRCodeLoaded()you can use this prop to control loading indicator.
For example,
`javascript
class Spin extends React.component {
state = {
loading: true,
} handleLoaded = () => {
this.setState({ loading: false })
}
render() {
return (
1px solid ${this.state.loading ? 'grey' : 'red'} }}>
sseURL="/api/sse"
onQRCodeLoaded={this.handleLoaded} />
)
}
}
``