Diferència entre revisions de la pàgina «Autenticació OAuth 2.0»
Salta a la navegació
Salta a la cerca
| 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 20: | Línia 20: | ||
<title>OAuth2</title> | <title>OAuth2</title> | ||
<meta charset="utf-8"></meta> | <meta charset="utf-8"></meta> | ||
| − | <script src="./js/ | + | <script src="./js/index_v1.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="264906748864-8jf3a4br15td8s0aaesh57si10i7m9vu.apps.googleusercontent.com"> | <meta name="google-signin-client_id" content="264906748864-8jf3a4br15td8s0aaesh57si10i7m9vu.apps.googleusercontent.com"> | ||
| Línia 31: | Línia 31: | ||
</html> | </html> | ||
</pre> | </pre> | ||
| − | script ''js/ | + | script ''js/index_v1.js'': |
<pre> | <pre> | ||
var googleUser; // The current user. | var googleUser; // The current user. | ||
| Línia 59: | Línia 59: | ||
Per provar el codi: | Per provar el codi: | ||
*http://localhost/ruta_apache/index_v1.html | *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_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> | ||
| + | </pre> | ||
| + | script ''js/index_v2.js'': | ||
| + | <pre> | ||
| + | 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; | ||
| + | } | ||
| + | </pre> | ||
=Aplicació web amb autenticació OAuth2= | =Aplicació web amb autenticació OAuth2= | ||
Revisió del 13:32, 11 març 2022
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 id="email" class="login"></div> <div class="g-signin2" data-theme="dark" data-onsuccess="onSignIn"></div> <h1>Autenticació</h1> </body> </html>
script js/index_v1.js:
var googleUser; // The current user.
var email;
window.addEventListener('load', (event) => {
init();
});
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;
}
Aplicació web amb autenticació OAuth2
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
