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

De wikijoan
Salta a la navegació Salta a la cerca
(Es crea la pàgina amb «=Referències= *https://oauth.net/articles/authentication/ *https://oauth.net/2/ =Aplicació web amb autenticació OAuth2= =Tasques a realitzar= =Entrega= {{Autor}...».)
 
Línia 2: Línia 2:
 
*https://oauth.net/articles/authentication/
 
*https://oauth.net/articles/authentication/
 
*https://oauth.net/2/
 
*https://oauth.net/2/
 +
=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ó.
 +
*https://bdquest.joanillo.org
 +
 +
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:
 +
 +
script ''index_v1.html'':
 +
<pre>
 +
<html>
 +
<head>
 +
<title>OAuth2</title>
 +
<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="XXXXXXXX.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>
 +
</pre>
 +
script ''js/index.js'':
 +
<pre>
 +
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();
 +
}
 +
</pre>
  
 
=Aplicació web amb autenticació OAuth2=
 
=Aplicació web amb autenticació OAuth2=

Revisió del 13:15, 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:

script index_v1.html: 

<html>
<head>
	<title>OAuth2</title>
	<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="XXXXXXXX.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.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();
}

Aplicació web amb autenticació OAuth2

Tasques a realitzar

Entrega

creat per Joan Quintana Compte, març 2022

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