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
}