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

De wikijoan
Salta a la navegació Salta a la cerca
 
(Hi ha 4 revisions intermèdies del mateix usuari que no es mostren)
Línia 93: Línia 93:
  
 
=Crear les credencials de Google=
 
=Crear les credencials de Google=
−
<pre>
+
[[Fitxer:Oauth2 captures.png | thumbnail | captures de pantalla]]
−
amb el compte de jquintana@jaumebalmes.net
+
*https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow
−
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:
 
To enable an API for your project:
Línia 101: Línia 103:
 
Open the API Library in the Google API Console.
 
Open the API Library in the Google API Console.
  
−
Projecte nou: login oauth2
+
*Projecte nou: login oauth2
−
Organització: jaumebalmes.net
+
*Organització: jaumebalmes.net
−
Ubicación: jaumebalmes.net?
+
*Ubicación: jaumebalmes.net
 +
 
 +
Anem a crear les credencials:
  
 
login oauth2 > Api y servicios > credenciales
 
login oauth2 > Api y servicios > credenciales
 +
 
o bé
 
o bé
 +
 
Anem al Panel, Credenciales
 
Anem al Panel, Credenciales
  
 
Primer hem d'anar a la pantalla de consentimiento:
 
Primer hem d'anar a la pantalla de consentimiento:
 +
<pre>
 
user type: Interno
 
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
 
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.
+
I ara omplim ''Información'' de la aplicación.
 
*nombre de la aplicación: exemple oauth
 
*nombre de la aplicación: exemple oauth
 
*correo electrónico: jquintana@jaumebalmes.net
 
*correo electrónico: jquintana@jaumebalmes.net
 
*logotipo: 120x120px
 
*logotipo: 120x120px
 
*página principal: http://localhost/M08/UF3/oauth2/index.html
 
*página principal: http://localhost/M08/UF3/oauth2/index.html
−
*política de privacidad: http://localhost/M08/UF3/oauth2/privacitat.html
+
*política de privacidad: http://localhost/M08/UF3/oauth2/privacitat.html (no cal?)
−
*condiciones de servicio:http://localhost/M08/UF3/oauth2/condicions.html
+
*condiciones de servicio:http://localhost/M08/UF3/oauth2/condicions.html (no cal?)
  
−
Agregar un dominio: no cal
+
*Agregar un dominio: no cal
  
 
I ara que ja hem fet la pantalla de Consentimiento, ja podem crear les credencials.
 
I ara que ja hem fet la pantalla de Consentimiento, ja podem crear les credencials.
Línia 127: Línia 134:
 
Crear credenciales > ID de clientes OAuth 2.0
 
Crear credenciales > ID de clientes OAuth 2.0
  
−
Tipo de aplicación: aplicación web
+
*Tipo de aplicación: aplicación web
−
Nombre: Cliente web 1 (ho deixem per defecte)
+
*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
  
−
Origenes autorizados de Javascript: http://localhost
+
El ''secret'' no el necessitarem per a res. El ''client id'' és el que necessitem.
−
URI de redireccionamiento: no poso res
 
  
−
client id: XXXXXX.apps.googleusercontent.com
+
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):
−
secret: XXXXXXX
+
*https://developers.google.com/identity/sign-in/web/sign-in
−
</pre>
 
  
 
=Tasques a realitzar=
 
=Tasques a realitzar=
−
*Posar la foto del teu usuari de Google: variable ''profile.getImageUrl()''
+
'''1. ''' Posar la foto del teu usuari de Google: variable ''profile.getImageUrl()''
−
*Implementar el sign ou/logout:
+
 
 +
'''2.''' Implementar el sign ou/logout:
 
En aquest enllaç trobaràs la informació de com fer el ''signout'':
 
En aquest enllaç trobaràs la informació de com fer el ''signout'':
−
**https://developers.google.com/identity/sign-in/web/sign-in
+
*https://developers.google.com/identity/sign-in/web/sign-in
  
−
*Validar contra la base de dades: crearàs al mysql una petita taula:
+
'''3.''' Validar contra la base de dades: crearàs al mysql una petita taula:
 
<pre>
 
<pre>
 
USUARIS(id_usuari,nom,email,rol)
 
USUARIS(id_usuari,nom,email,rol)
Línia 152: Línia 165:
  
 
=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»