{% block content %}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="referrer" content="strict-origin-when-cross-origin">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="google-signin-client_id" content="my client id">
<title>Google Sign-In with JWT</title>
<script src="https://accounts.google.com/gsi/client" async defer></script>
</head>
<body>
<h1>Google Sign-In</h1>
<div id="g_id_onload"
data-client_id = "my client id"
data-callback ="handleCredentialResponse"
data-login-uri = "http://127.0.0.1:8000/user/login/"
data-auto_prompt ="false">
</div>
<div class="g_id_signin"
data-type="standard"
data-size="large"
data-theme="outline"
data-text="sign_in_with"
data-shape="rectangular"
data-logo_alignment="left">
</div>
<script>
console.log("Current origin:", window.location.origin);
function handleCredentialResponse(response) {
console.log("Received response from Google Sign-In");
const idToken = response.credential;
console.log("ID Token:", idToken);
fetch('http://127.0.0.1:8000/user/login/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
},
body: JSON.stringify({ token: idToken }),
credentials: 'include'
})
.then(response => {
console.log("Received response from server");
return response.json();
})
.then(data => {
if (data.access) {
console.log("JWT Token:", data.access);
localStorage.setItem('jwt', data.access);
alert('Login successful!');
} else {
console.error("Login failed:", data);
alert('Login failed!');
}
})
.catch(error => {
console.error('Error:', error);
alert('An error occurred during login');
});
}
window.onload = function() {
console.log("Page loaded. Google Sign-In should initialize soon.");
};
</script>
</body>
</html>
tried everything but not move ahead
using javascript more specifically HTML page to just get idToken from google and then sending it to backend for verification and other jwt generation