CODEWITHSUNDEEP
angularlaravelhttprequestresponseqr-code
Jay Marz
Jay Marz

Reputation: 1912

How to return `QR` Code Image from Laravel API to Angular 6 through JSON response?

I am creating a Google 2FA in my project. I have this QR code generator from bacon qr code in my Laravel app (backend). I want this to be returned as a JSON response to my Angular app (frontend) through API.

I have this code in my Laravel Controller

public function google2faAuth($id){

        // Get User
        $user = User::find($id);

        // Initialise the 2FA class
        $google2fa = app('pragmarx.google2fa');

        // Save 2FA data to user2faAuth table
        $twoFaAuth = new User2faAuth();

        $twoFaAuth->userId = $user->id;
        $twoFaAuth->secretCode = $google2fa->generateSecretKey();

        $twoFaAuth->save();

        // Create QR image
        $QRImage = $google2fa->getQRCodeInline(
            config('app.name'),
            $user->email,
            $twoFaAuth->secretCode
        );

        return response()->json($QRImage);
    }

But what I received in my Angular app is something like this.

"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAIAAAAiOjnJAAAFAElEQVR4nO3dwW7YNhRFwcbo\/3+y0U0QaKOGMnlEyZ5ZGjGlpBfsA0k9\/vr8\/PwHVvvY\/QJ8T4JFQrBICBYJwSIhWCQEi4RgkRAsEoJFQrBICBYJwSIhWCQEi4RgkRAsEoJFQrBICBYJwSIhWCQEi4RgkRAsEv+uHe7jY31Sz77VPj5r5nvus3ceGfPq33dmzOPv3vnv\/DVmLBKCRUKwSCyusY6KumektrhaM62q4a7+fVfVScW\/8zwzFgnBIiFYJMIa62jk\/+VX65jjmFfrqrP6aeTnZ1bVdiNjzvz5e3o4mrFICBYJwSJxU421yqp9tKt1xkitNmNmv\/KZzFgkBIuEYJF4WY01sy41M\/7VZ428w3vrpxFmLBKCRUKwSNxUY62qJ2bOSK3a7xsZc6Teuvo+xZmwjhmLhGCRECwSYY3Vnaf+2jtcXXMa+fnRzH5lcQ5srye+E9+AYJEQLBK\/nrPyUbh6fusJ\/Rq+x38RMxYJwSIhWCQe1B9rVf+nVetMM\/XZ1d4TxRrbzJrcPDMWCcEiIVgkFq9j1efBi\/pg5lvFVbVLUVNefZYepLyAYJEQLBLhXmFdc9T9Guo+EUUP0uesaZmxSAgWCcEiseE81qrz4CPjr+r1sGrtbWTMVX1T9zJjkRAsEoJFYsNe4dGq\/bhV+1\/F+fdinGKN0DoWLyBYJASLxEN7N+zqwz7z3DvP+8\/Ul\/Xd0r9HjsblhxMsEoJF4qbzWCPq\/a9V9dZML6tVZ6dG3vPIeSy+CcEiIVgkwr3Co5nvBGfqg2L\/8Ux9h8+Z4rzaPDMWCcEiIVgkNtRYu\/oUPOEOwWIt7eo4zmPxYoJFQrBIPKh3w6r1ql09Gs5+96qip8PIs9RYvIBgkRAsEjfdCX1U9Dq\/Ov7Iz2dqxJn3vGrmzumOGYuEYJEQLBIbzrzfuR+36oxX3Y\/0zKpz7qveZ5wZi4RgkRAsEjetYxVrObv28q72RCi+T7y6xjay1mWvkBcQLBKCRWLDndCr+gjceY6qWK96Qq9261i8jGCRECwSG85jnbmzjjmzqp\/nqjWqGff0Gj1jxiIhWCQEi0RYY915j019V+DM79bfSz6tP8Xvp9\/wDH4gwSIhWCRu6o91pjiTXp9hL+6HnrHrHqH\/Z8YiIVgkBIvEhjuhn3AO6ai+i7ruyzoyph6kfBOCRUKwSGw+jzWzBrPq\/Naq\/lgz44+MOXOW6\/59QzMWCcEiIVgkHtS74fhnRmqLmbqqWG\/bVefVZ8K+xoxFQrBICBaJzX3ei28Ji1pnxNXapfje8M7+8n95kxuewQ8kWCQEi0TY571QnzG\/857BO+vL4p7Hv7zJwrHgD8EiIVgkNvQgvWqmj8PMufJif7DoobVqbW8tMxYJwSIhWCQe1B\/raNUZ7aL\/wpmZs1DFN4B7v980Y5EQLBKCReKm81jFXthMDbRqrWjme8OR5478\/Jne9K68iGCRECwSD7pLp3DnHTgjzx15h6K3lv5YfBOCRUKwSLy4xiruez4b\/+oaW12rrTpb1q2NmbFICBYJwSKxuT\/WrufuupNn5H1W3Us98z7zzFgkBIuEYJEIa6z6\/NCq9aFVZ8VWrZONnMcq+qbaK+QFBIuEYJF4WX8s3sKMRUKwSAgWCcEiIVgkBIuEYJEQLBKCRUKwSAgWCcEiIVgkBIuEYJEQLBKCRUKwSAgWCcEiIVgkBIuEYJEQLBKCReI\/leHQVUfEkcoAAAAASUVORK5CYII="

How can I return this properly so that I can render this QR code image in my front end?

Upvotes: 1

Views: 2047

Answers (1)

Nikhil Sridhar
Nikhil Sridhar

Reputation: 78

This is base 64 content of the scanned QR image. Try looking for base 64 to image conversion, and then display the data in your front end using the img tag.

Upvotes: 1

Related Questions