Как вернуть `QR` Code Image из Laravel API в Angular 6 через ответ JSON? - PullRequest
Новая
       16

Как вернуть `QR` Code Image из Laravel API в Angular 6 через ответ JSON?

0 голосов
/ 15 ноября 2018

Я создаю Google 2FA в моем проекте.У меня есть этот генератор QR-кода из кода бекона qr в моем приложении Laravel (бэкэнд).Я хочу, чтобы это было возвращено как JSON ответ на мое приложение Angular (веб-интерфейс) через API.

У меня есть этот код в моем 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);
    }

Но то, что я получил вмое приложение Angular выглядит примерно так: 

"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="

Как я могу правильно вернуть его, чтобы я мог отобразить этот QR-код в моем интерфейсе?

1 Ответ

0 голосов
/ 15 ноября 2018

Это базовое содержимое отсканированного QR-изображения. Попробуйте найти преобразование base 64 в изображение, а затем отобразите данные в своем интерфейсе с помощью тега img.

...