Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

qr-code-view

jilenloa100.0.3TypeScript support: included

Display QR Code that should be scanned to authrize login. ## Usage In your component html template:

readme

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
}