Autenticació OAuth 2.0

De wikijoan
Salta a la navegació Salta a la cerca

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