Diferència entre revisions de la pàgina «Autenticació OAuth 2.0»
m (→versió 1) |
|||
| Línia 115: | Línia 115: | ||
</pre> | </pre> | ||
| − | = | + | =Crear les credencials de Google= |
| + | (TBD) | ||
=Tasques a realitzar= | =Tasques a realitzar= | ||
Revisió del 13:39, 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 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
(TBD)
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
