Diferència entre revisions de la pàgina «Autenticació OAuth 2.0»

De wikijoan
Salta a la navegació Salta a la cerca
 
(Hi ha 14 revisions intermèdies del mateix usuari que no es mostren)
Línia 13: Línia 13:
  
 
Codi mínim que funciona:
 
Codi mínim que funciona:
−
 
+
==versió 1==
 
script ''index_v1.html'':
 
script ''index_v1.html'':
 
<pre>
 
<pre>
Línia 19: Línia 19:
 
<head>
 
<head>
 
<title>OAuth2</title>
 
<title>OAuth2</title>
 +
<meta charset="utf-8"></meta>
 
<script src="./js/index.js"></script>
 
<script src="./js/index.js"></script>
 
<script src="https://apis.google.com/js/platform.js" async defer></script>
 
<script src="https://apis.google.com/js/platform.js" async defer></script>
−
<meta name="google-signin-client_id" content="XXXXXXXX.apps.googleusercontent.com">
+
<meta name="google-signin-client_id" content="XXXXXXXXX.apps.googleusercontent.com">
 
</head>
 
</head>
 
<body>
 
<body>
 +
<div class="g-signin2" data-theme="dark" data-onsuccess="onSignIn"></div>
 
<div id="email" class="login"></div>
 
<div id="email" class="login"></div>
−
<div class="g-signin2" data-theme="dark" data-onsuccess="onSignIn"></div>
 
 
<h1>Autenticació</h1>
 
<h1>Autenticació</h1>
 
</body>
 
</body>
Línia 39: Línia 40:
 
});
 
});
  
 +
/**
 +
* Funció inicial que s'executa a l'inici. Es defineixen els events.
 +
*/
 
function init() {
 
function init() {
 
     console.log('init');
 
     console.log('init');
Línia 53: Línia 57:
 
     console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
 
     console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
 
     email = profile.getEmail();
 
     email = profile.getEmail();
 +
    document.getElementById("email").innerHTML = email;
 
}
 
}
 
</pre>
 
</pre>
 +
Per provar el codi:
 +
*http://localhost/ruta_apache/index_v1.html
 +
 +
==versió 2: millora de la seguretat==
 +
script ''index_v2.html'':
 +
<pre>
 +
<html>
 +
<head>
 +
<title>OAuth2</title>
 +
<meta charset="utf-8"></meta>
 +
<script src="./js/pwd.js"></script>
 +
<script src="./js/index.js"></script>
 +
<script src="https://apis.google.com/js/platform.js" async defer></script>
 +
<meta name="google-signin-client_id" content="">
 +
<script>
 +
document.querySelector('meta[name="google-signin-client_id"]').setAttribute("content", oauth2_keys);
 +
</script>
 +
</head>
 +
<body>
 +
<div class="g-signin2" data-theme="dark" data-onsuccess="onSignIn"></div>
 +
<div id="email" class="login"></div>
 +
<h1>Autenticació</h1>
 +
</body>
 +
</html>
 +
</pre>
 +
El script ''js/index.js'' és el mateix.
 +
 +
El script ''js/pwd.js'':
 +
<pre>
 +
const oauth2_keys = "XXXXXXXX.apps.googleusercontent.com";
 +
</pre>
 +
 +
=Crear les credencials de Google=
 +
[[Fitxer:Oauth2 captures.png | thumbnail | captures de pantalla]]
 +
*https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow
 +
 +
Amb el teu compte de ''xxxxx@jaumebalmes.net'' entres a la consola de Google API:
 +
*https://console.cloud.google.com/apis/dashboard?project=login-oauth2-343413
 +
 +
To enable an API for your project:
 +
 +
Open the API Library in the Google API Console.
 +
 +
*Projecte nou: login oauth2
 +
*Organització: jaumebalmes.net
 +
*Ubicación: jaumebalmes.net
 +
 +
Anem a crear les credencials:
 +
 +
login oauth2 > Api y servicios > credenciales
 +
 +
o bé
 +
 +
Anem al Panel, Credenciales
 +
 +
Primer hem d'anar a la pantalla de consentimiento:
 +
<pre>
 +
user type: Interno
 +
Solo está disponible para los usuarios de tu organización. No necesitarás enviar tu app para verificarla. Obtén más información sobre el tipo de usuario
 +
</pre>
 +
I ara omplim ''Información'' de la aplicación.
 +
*nombre de la aplicación: exemple oauth
 +
*correo electrónico: jquintana@jaumebalmes.net
 +
*logotipo: 120x120px
 +
*página principal: http://localhost/M08/UF3/oauth2/index.html
 +
*política de privacidad: http://localhost/M08/UF3/oauth2/privacitat.html (no cal?)
 +
*condiciones de servicio:http://localhost/M08/UF3/oauth2/condicions.html (no cal?)
  
−
=Aplicació web amb autenticació OAuth2=
+
*Agregar un dominio: no cal
 +
 
 +
I ara que ja hem fet la pantalla de Consentimiento, ja podem crear les credencials.
 +
 
 +
Crear credenciales > ID de clientes OAuth 2.0
 +
 
 +
*Tipo de aplicación: aplicación web
 +
*Nombre: Cliente web 1 (ho deixem per defecte)
 +
 
 +
*Origenes autorizados de Javascript: http://localhost (important)
 +
*URI de redireccionamiento: no poso res
 +
 
 +
Finalment ja es genera el nostre token:
 +
*client id: XXXXXX.apps.googleusercontent.com
 +
*secret: XXXXXXX
 +
 
 +
El ''secret'' no el necessitarem per a res. El ''client id'' és el que necessitem.
 +
 
 +
Un cop tenim les credencials, la informació per fer el client web amb l'autenticació OAuth està explicat aquí (d'aquí s'ha tret el codi):
 +
*https://developers.google.com/identity/sign-in/web/sign-in
  
 
=Tasques a realitzar=
 
=Tasques a realitzar=
 +
'''1. ''' Posar la foto del teu usuari de Google: variable ''profile.getImageUrl()''
 +
 +
'''2.''' Implementar el sign ou/logout:
 +
En aquest enllaç trobaràs la informació de com fer el ''signout'':
 +
*https://developers.google.com/identity/sign-in/web/sign-in
 +
 +
'''3.''' Validar contra la base de dades: crearàs al mysql una petita taula:
 +
<pre>
 +
USUARIS(id_usuari,nom,email,rol)
 +
</pre>
 +
on hi ha dos tipus de perfils: ''verd'' i ''vermell''. Si l'usuari associat al teu correu electrònic té perfil verd, el fons de pantalla sortirà verd; si el teu perfil és vermell, el fons de pantalla sortirà vermell.
 +
 +
Quan facis el login (ja saps quin és el correu electrònic), faràs una crida AJAX per anar a cercar a la base de dades si la persona que s'ha logat té el perfil ''verd'' o ''vermell''. Quan tinguis la resposta en el cantó del client ja podràs posar el background de color verd o vermell.
  
 
=Entrega=
 
=Entrega=
 +
Entrega dins del termini. A part d'enviar-ho al Classroom, ensenya al professor el resultat obtingut. Opcionalment pots fer un petit screencast (video de captura de la pantalla) mostrant la funcionalitat.
  
 
{{Autor}}, març 2022
 
{{Autor}}, març 2022

Revisió de 16:17, 11 març 2022

Referències

Introducció

Amb l'autenticació OAuth2 podem autenticar-nos al domini jaumebalmes.net, i delegar l'autenticació a google, que en definitiva és qui gestiona aquest domini. Així doncs, ens validem contra google, amb els avantatges i inconvenients que això pot comportar.

Exemple: BDQuest

L'aplicació BDQuest és una aplciació web que s'utiltiza a 1r de DAM per aprendre llenguatge SQL. Els alumnes s'autentiquen mitjançant el seu correu electrònic del domini jaumebalmes.net en un primer pas; i en un segon pas s'autentiquen contra la base de dades com a usuaris de l'aplicació.

Exemple de classe: es dóna d'alta els alumnes per tal de poder utilitzar aquesta aplicació.

Aplicació Javascript

Abans d'obtenir les teves credencials per crear tu mateix una aplicació web que faci autenticació OAuth2, anem a veure l'exemple de codi que funciona.

Codi mínim que funciona:

versió 1

script index_v1.html: 

<html>
<head>
	<title>OAuth2</title>
	<meta charset="utf-8"></meta>
	<script src="./js/index.js"></script>
	<script src="https://apis.google.com/js/platform.js" async defer></script>
	<meta name="google-signin-client_id" content="XXXXXXXXX.apps.googleusercontent.com">
</head>
<body>
	<div class="g-signin2" data-theme="dark" data-onsuccess="onSignIn"></div>
	<div id="email" class="login"></div>
	<h1>Autenticació</h1>
</body>
</html>

script js/index.js: 

var googleUser; // The current user.
var email;

window.addEventListener('load', (event) => {
    init();
});

/**
 * Funció inicial que s'executa a l'inici. Es defineixen els events.
 */
function init() {
    console.log('init');
}

/**
* Autenticació oAuth al domini jaumebalmes.net
*/
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.
    email = profile.getEmail();
    document.getElementById("email").innerHTML = email;
}

Per provar el codi:

versió 2: millora de la seguretat

script index_v2.html: 

<html>
<head>
	<title>OAuth2</title>
	<meta charset="utf-8"></meta>
	<script src="./js/pwd.js"></script>
	<script src="./js/index.js"></script>
	<script src="https://apis.google.com/js/platform.js" async defer></script>
	<meta name="google-signin-client_id" content="">
	<script>
		document.querySelector('meta[name="google-signin-client_id"]').setAttribute("content", oauth2_keys);
	</script>
</head>
<body>
	<div class="g-signin2" data-theme="dark" data-onsuccess="onSignIn"></div>
	<div id="email" class="login"></div>
	<h1>Autenticació</h1>
</body>
</html>

El script js/index.js és el mateix.

El script js/pwd.js: 

const oauth2_keys = "XXXXXXXX.apps.googleusercontent.com";

Crear les credencials de Google

captures de pantalla

Amb el teu compte de xxxxx@jaumebalmes.net entres a la consola de Google API:

To enable an API for your project:

Open the API Library in the Google API Console.

  • Projecte nou: login oauth2
  • Organització: jaumebalmes.net
  • Ubicación: jaumebalmes.net

Anem a crear les credencials:

login oauth2 > Api y servicios > credenciales

o bé

Anem al Panel, Credenciales

Primer hem d'anar a la pantalla de consentimiento: 

user type: Interno
Solo está disponible para los usuarios de tu organización. No necesitarás enviar tu app para verificarla. Obtén más información sobre el tipo de usuario

I ara omplim Información de la aplicación.

  • Agregar un dominio: no cal

I ara que ja hem fet la pantalla de Consentimiento, ja podem crear les credencials.

Crear credenciales > ID de clientes OAuth 2.0

  • Tipo de aplicación: aplicación web
  • Nombre: Cliente web 1 (ho deixem per defecte)
  • Origenes autorizados de Javascript: http://localhost (important)
  • URI de redireccionamiento: no poso res

Finalment ja es genera el nostre token:

  • client id: XXXXXX.apps.googleusercontent.com
  • secret: XXXXXXX

El secret no el necessitarem per a res. El client id és el que necessitem.

Un cop tenim les credencials, la informació per fer el client web amb l'autenticació OAuth està explicat aquí (d'aquí s'ha tret el codi):

Tasques a realitzar

1. Posar la foto del teu usuari de Google: variable profile.getImageUrl()

2. Implementar el sign ou/logout: En aquest enllaç trobaràs la informació de com fer el signout:

3. Validar contra la base de dades: crearàs al mysql una petita taula: 

USUARIS(id_usuari,nom,email,rol)

on hi ha dos tipus de perfils: verd i vermell. Si l'usuari associat al teu correu electrònic té perfil verd, el fons de pantalla sortirà verd; si el teu perfil és vermell, el fons de pantalla sortirà vermell.

Quan facis el login (ja saps quin és el correu electrònic), faràs una crida AJAX per anar a cercar a la base de dades si la persona que s'ha logat té el perfil verd o vermell. Quan tinguis la resposta en el cantó del client ja podràs posar el background de color verd o vermell.

Entrega

Entrega dins del termini. A part d'enviar-ho al Classroom, ensenya al professor el resultat obtingut. Opcionalment pots fer un petit screencast (video de captura de la pantalla) mostrant la funcionalitat.

creat per Joan Quintana Compte, març 2022

Obtingut de «http://wiki.joanillo.org/index.php?title=Autenticació_OAuth_2.0&oldid=298678»