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

De wikijoan
Salta a la navegació Salta a la cerca
Línia 116: Línia 116:
  
 
=Crear les credencials de Google=
 
=Crear les credencials de Google=
−
(TBD)
+
<pre>
 +
amb el compte de jquintana@jaumebalmes.net
 +
https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow
 +
 
 +
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?
 +
 
 +
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.
 +
*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
 +
*condiciones de servicio:http://localhost/M08/UF3/oauth2/condicions.html
 +
 
 +
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
 +
URI de redireccionamiento: no poso res
 +
 
 +
client id: XXXXXX.apps.googleusercontent.com
 +
secret: XXXXXXX
 +
</pre>
  
 
=Tasques a realitzar=
 
=Tasques a realitzar=

Revisió del 14:13, 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_v1.js"></script>
	<script src="https://apis.google.com/js/platform.js" async defer></script>
	<meta name="google-signin-client_id" content="264906748864-8jf3a4br15td8s0aaesh57si10i7m9vu.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_v1.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_v2.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>

script js/index_v2.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;
}

Crear les credencials de Google

amb el compte de jquintana@jaumebalmes.net
https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow

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?

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.
*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
*condiciones de servicio:http://localhost/M08/UF3/oauth2/condicions.html

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
URI de redireccionamiento: no poso res

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

Tasques a realitzar

  • posar la foto
  • implementar el logout
  • validar contra la base de dades:
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.

Entrega

creat per Joan Quintana Compte, març 2022

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