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
}