Google sign-in and OAuth 2.0. Exemple mínim

De wikijoan
Salta a la navegació Salta a la cerca

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:

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

Obtingut de «http://wiki.joanillo.org/index.php?title=Google_sign-in_and_OAuth_2.0._Exemple_mínim&oldid=259546»