Google sign-in and OAuth 2.0. Exemple mínim
Introducció
Avui dia moltes pàgines web deleguen l'inici de sessió i autenticació en el compte de Google. Anem a veure un exemple mínim funcional.
Ruta per provar-ho:
Codi
Seguim:
- https://developers.google.com/identity/sign-in/web/sign-in
- https://developers.google.com/identity/sign-in/web/reference
Anem a la Google API Console
IDs de cliente de OAuth 2.0 Pantalla de consentimiento de OAuth -> user type: extern Nom de l'aplicació: prova_app_google Dominios autorizados: rutesgps.joanillo.org -> utilitzaré aquest domini per fer la prova página principal de la aplicación: http://rutesgps.joanillo.org/login.html Política de privacitat http://rutesgps.joanillo.org/politica_privacitat.html Condicions de servei: http://rutesgps.joanillo.org/condicions_servei.html
After configuration is complete, take note of the client ID that was created. You will need the client ID to complete the next steps. (A client secret is also created, but you need it only for server-side operations.)
Crear ID de cliente de OAuth tipus: aplicació web nom: rutesgps Origenes de Javascript autorizados http://rutesgps.joanillo.org URI de redirección autorizados http://rutesgps.joanillo.org/login_ok.html
Se ha creado el cliente de OAuth El ID de cliente y el secreto siempre aparecen en la sección Credenciales, dentro de APIs y servicios
OAuth tiene un límite de 100 accesos con permisos sensibles antes de que se verifique la pantalla de consentimiento de OAuth. Es posible que se deba llevar a cabo un proceso de verificación que puede tardar varios días.
Tu ID de cliente: 789***************.apps.googleusercontent.com Tu secreto de cliente: eq*************
I els dos scripts que fem servir són:
script login.html:
<html>
<head>
<title>Login</title>
<meta name="google-signin-client_id" content="789721209731-rlcf5vdf68753d8774i25ngr4f52fc4j.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script>
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
}
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
console.log('User signed out.');
});
}
</script>
</head>
<body>
<h1>Login</h1>
<div class="g-signin2" data-onsuccess="onSignIn" onclick="document.location.href = 'http://rutesgps.joanillo.org/login_ok.html'">
<a href="#" onclick="signOut();">Sign out</a>
</body>
</html>
ID: 117242052041129052914 Name: Joan Quintana Image URL: https://lh3.googleusercontent.com/a-/AOh14GhAdjE9IX9kZwVGkjeGdhu7winX-GvwDh_yjC8l=s96-c Email: joanqc@gmail.com
script login_ok.html:
<html> <head> <title>Login OK</title> </head> <body> <h1>Login OK</h1> <a href="login.html">Login.html</a> </body> </html>
creat per Joan Quintana Compte, juliol 2020
