Can you show your ImageRequest class?
Oct 28, 2020
9
Level 1
I get 302 response instead of 200 when capturing screenshot and user not keep logged in on the chrome extension
Hello, I have one strange issue. I get 302 response instead of 200 when capturing screenshot on chrome extension. Also, user can't keep logged in, despite having JWT token and as a result he must login repeatdly. I'm using Laravel as back-end with api auth. P.S. I do everything same with Java Springboot as a back-end it works like a charm. login.js
const url = 'http://local.requestmapper.com/api/ext/user/';
var form = document.getElementById('login_form');
document.getElementById("login_form").addEventListener("submit", login);
getUser();
form.addEventListener('submit', function (event) {
var form = document.getElementById('login_form');
var formData = new FormData();
for (var i = 0; i < form.length; ++i) {
formData.append(form[i].name, form[i].value)
}
fetch(url + 'login', {
method: 'post',
credentials: 'same-origin',
mode: 'no-cors',
cache: 'default',
body: formData,
})
.then((response) => response.json())
.then( (data) => {
var token = data.token;
console.log(token);
localStorage.setItem('token', token);
window.location.href = 'user.html';
})
.catch((error) => {
console.log('Error:', error);
})
event.preventDefault();
})
function getUser() {
var token = localStorage.getItem('token');
fetch(url + 'check', {
method: 'get',
credentials: 'same-origin',
cache: 'default',
headers: { 'Authorization': 'Bearer ' + token},
mode: 'cors',
})
.then(response => {
console.log(response.status)
if (response.ok) {
window.href.location = 'user.html';
}
return response.json();
})
.catch((error) => {
console.log(error);
})
}
app.js
const url = 'http://local.requestmapper.com/api/ext/user/';
document.getElementById('logout').addEventListener("click", logout);
document.getElementById('takess').addEventListener("click", takess);
getUser();
async function logout() {
var token = localStorage.getItem('token');
await fetch(url + 'logout', {
method: 'post',
credentials: 'same-origin',
headers: {
'Authorization': 'Bearer ' + token,
},
mode: 'cors',
})
.then(data => data.json())
.then( data =>{
console.log(data);
localStorage.removeItem('token');
window.location.href = 'popup.html'
})
.catch((error) => {
console.log(error);
});
event.preventDefault();
}
function takess() {
//var token = localStorage.getItem('token');
chrome.tabs.captureVisibleTab(null, {}, function (canvas) {
upload(canvas);
/*fetch(url + 'upload', {
method: 'post',
credentials: 'same-origin',
headers: {
'Authorization': 'Bearer ' + token,
'Content-Type': 'form-data',
},
mode: 'cors',
body: JSON.stringify({ 'image': canvas }),
})
.then(response => console.log(response))
.catch(error => console.log(error))*/
});
event.preventDefault();
}
function upload(canvas) {
var token = localStorage.getItem('token');
fetch(url + 'upload', {
method: 'post',
credentials: 'same-origin',
headers: {
'Authorization': 'Bearer ' + token,
'Content-Type': 'form-data',
},
mode: 'cors',
body: JSON.stringify({ 'image': canvas }),
})
.then(response => console.log(response))
.catch(error => console.log(error))
}
function getUser() {
var token = localStorage.getItem('token');
fetch(url + 'check', {
method: 'get',
credentials: 'same-origin',
headers: {
'Authorization': 'Bearer ' + token,
},
mode: 'cors',
})
.then(response => {
response.json();
console.log(response.json());
if (!response.ok) {
window.href.location = 'popup.html';
}
})
.catch((error) => {
console.log(error);
})
}
ExtensionController.php
<?php
namespace App\Http\Controllers;
use App\Http\Requests\ImageRequest;
use App\Http\Requests\LoginRequest;
use App\Http\Requests\TestRequest;
use App\User;
use Illuminate\Support\Facades\Auth;
use Tymon\JWTAuth\Facades\JWTAuth;
class ExtensionController extends Controller
{
public function login(LoginRequest $request)
{
$credentials = $request->only('email', 'password');
if ($token = JWTAuth::attempt($credentials)) {
return response()->json(['status' => 'success', 'token' => $token], 200)->header('Authorization', $token);
}
return response()->json(['error' => 'Login failed'], 401);
}
public function uploadImage(ImageRequest $request)
{
$imagedata = str_replace(['data:image/jpeg;base64','data:image/png;base64'], '', $request->input('image'));
$imagedata = str_replace('', '+', $imagedata);
$imagedata = base64_decode($imagedata);
$source = imagecreatefromstring($imagedata);
$rotate = imagerotate($source, 0, 0);
$imagename = storage_path('app/screenshots/') . time() . '.jpg';
imagejpeg($rotate, $imagename, 100);
return response()->json(['status' => 'success'], 200);
}
public function check(){
if(Auth::guard('api')->check())
return response()->json(['status' => 'User logged in'], 200);
}
public function refresh()
{
if($token = $this->guard('api')->refresh()){
return response()
->json(['status' => 'success'], 200)
->header('Authorization', $token);
}
return response()->json(['error' => 'Token refresh error'], 401);
}
public function logout()
{
$this->guard('api')->logout();
return response()->json([
'status' => 'success',
'msg' => 'Logged out successfully'
], 200);
}
private function guard()
{
return Auth::guard();
}
}
Please or to participate in this conversation.