0.0.3 • Published 5 years ago
qr-code-view v0.0.3
QrCodeView
Display QR Code that should be scanned to authrize login.
Usage
In your component html template:
<qr-code-view size="200" (onSuccess)="loginOk($event)" (onFailure)="loginFailed($event)"></qr-code-view>
In your component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-component',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class MyComponent {
//...
// callback when login fails
loginFailed($event): void {
alert("Login failed");
}
// callback when login is successful
loginOk($event): void{
alert(`Welcome ${$event.user.display_name}, You used QR Code to login on web.`);
console.log($event);
}
}
Attributes for qr-code-view component
Attribute Name | Description | Default | Example | |
---|---|---|---|---|
size | Adjust the size of the QR Code View | 200 | ||
generateCodeEndPoint | URL to service that generates the QR Code | https://api.alfapay.digital/v1/account/user/qrcode_login | ||
authorizationHostname | Address to Laravel Broadcast Authorization Server | api.alfapay.digital | ||
logo | QR Code Logo | api.alfapay.digital |
Generate QR Code
The url pointed to by the generateCodeEndPoint must return response this format:
{
"qr_code": "some_random_unique_string",
"status": true
}