Autenticació OAuth 2.0
Contingut
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
