Categorias
iiiiii
Auth GoogleSingin
Descripcion
Autenticarse con la cuenta de googlea
nota
1. se debe tener una cuenta en https://console.cloud.google.com/apis/credentials?authuser=1&hl=es-419&project=cursonodefernando-407601&supportedpurview=project
2. en el menu izquierdo busca "Pantalla de consentimiento de OAuth" en la cual se le debe de dar acceso para que puedamos usarla
3. en el menu izqueirdo buscar "Credenciales" y se debe crear una nueva de tipo "ID de clientes OAuth"
4. luego nos mostrara una opcion "Or?genes autorizados de JavaScript" y debemos agregar "http://localhost" y "http://localhost:8080"
5. nos dirijimos a la pagina de doc de gogole https://developers.google.com/identity/gsi/web/guides/handle-credential-responses-js-functions?hl=es-419
6. procedemos a usarlo como en el ejemplo:
7. verificar el token recibido https://developers.google.com/identity/gsi/web/guides/verify-google-id-token?hl=es-419
modulo
asd
app
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-callback="handleCredentialResponse">
</div>
<script>
function handleCredentialResponse(response) {
// decodeJwtResponse() is a custom function defined by you
// to decode the credential response.
const responsePayload = decodeJwtResponse(response.credential);
console.log("ID: " + responsePayload.sub);
console.log('Full Name: ' + responsePayload.name);
console.log('Given Name: ' + responsePayload.given_name);
console.log('Family Name: ' + responsePayload.family_name);
console.log("Image URL: " + responsePayload.picture);
console.log("Email: " + responsePayload.email);
//NOTA : es mejor tomar los datos de response.credential y pasarlo por un servicio para guardarlo
// de la siguiente manera
const body = {id_token:response.credential};
fetch('http://localhost:8080/api/auth/google/', //Mi servicio para manejar el token que google me dio
{
method:'POST',
headers:{
'Content-Type':'application/json'
},
body:JSON.stringify(body)
}
)
.then((resp)=>resp.json())
.then(resp=>console.log(resp))
.catch(console.warn);
}
</script>