/trunk/widget/modules/auth/config.ini |
---|
New file |
0,0 → 1,5 |
[auth] |
; Chemin de la racine du widget Navigation |
baseCheminWidget = /applications/reseau/widget/modules/auth |
langueDefaut = "fr" |
baseUrlAuth = https://localhost/service:annuaire_li:auth |
/trunk/widget/modules/auth/Auth.php |
---|
New file |
0,0 → 1,45 |
<?php |
/** |
* Portail d'authentification qui présente les différentes application TB; permet(tra un jour) |
* de se connecter en utilisant d'autres comptes (Plante-net, ils recolmatent, visagelivre...) |
* |
* Utilisation: http://www.tela-botanica.org/widget:reseau:auth |
* Paramètres GET (optionnels): |
* |
* @author Mathias Chouet <mathias@tela-botanica.org> |
* @license GPL v3 <http://www.gnu.org/licenses/gpl.txt> |
* @license CECILL v2 <http://www.cecill.info/licences/Licence_CeCILL_V2-en.txt> |
* @version 0.1 |
* @copyright 2015, Tela Botanica |
*/ |
class Auth extends WidgetCommun { |
protected $langue; |
protected $langueDefaut; |
protected $baseUrlAuth; |
public function __construct($config, $parametres) { |
parent::__construct($config, $parametres); |
$this->langueDefaut = $this->config['auth']['langueDefaut']; |
$this->baseUrlAuth = $this->config['auth']['baseUrlAuth']; |
} |
/** |
* Méthode appelée par défaut pour charger ce widget |
*/ |
public function executer() { |
//$this->collecterParametres(); |
$squelette = dirname(__FILE__) . DIRECTORY_SEPARATOR . 'squelettes' . DIRECTORY_SEPARATOR . 'auth_' . $this->langue . '.tpl.php'; |
if (! file_exists($squelette)) { |
$squelette = dirname(__FILE__) . DIRECTORY_SEPARATOR . 'squelettes' . DIRECTORY_SEPARATOR . 'auth_' . $this->langueDefaut . '.tpl.php'; |
} |
$widget['donnees']['url_css'] = sprintf($this->config['chemins']['baseURLAbsoluDyn'], 'modules/auth/squelettes/css/defaut.css'); |
$widget['donnees']['url_js'] = sprintf($this->config['chemins']['baseURLAbsoluDyn'], 'modules/auth/squelettes/js/defaut.js'); |
$widget['donnees']['baseUrlAuth'] = $this->baseUrlAuth; |
$contenu = $this->traiterSquelettePhp($squelette, $widget['donnees']); |
$this->envoyer($contenu); |
} |
} |
?> |
/trunk/widget/modules/auth/config.defaut.ini |
---|
New file |
0,0 → 1,5 |
[auth] |
; Chemin de la racine du widget Navigation |
baseCheminWidget = /reseau/widget/modules/auth |
langueDefaut = "fr" |
baseUrlAuth = https://www;tela-botanica.org/service:annuaire:auth |
/trunk/widget/modules/auth/squelettes/css/defaut.css |
---|
New file |
0,0 → 1,189 |
/*body { |
padding: 10px; |
}*/ |
/*#widget { |
margin: auto; |
max-width: 700px; |
padding: 5px; |
}*/ |
.vertical-center { |
min-height: 100%; /* Fallback for browsers do NOT support vh unit */ |
min-height: 100vh; |
display: flex; |
align-items: center; |
} |
.boite-centre { |
width: 480px; |
height: 520px; |
padding: 20px; |
border: solid #f0f0f0 1px; |
border-radius: 5px; |
margin: auto; |
text-align: center; |
} |
.boite-centre h1 { |
margin-top: 0; |
margin-bottom: 0; |
} |
.leger { |
color: #808080; |
} |
#nom-complet { |
font-size: 1.6em; |
margin-left: 5px; |
} |
#liste-applications h2 { |
font-size: 1.7em; |
margin-top: 30px; |
margin-bottom: 15px; |
} |
#liste-applications ul { |
/*border: solid red 1px;*/ |
margin: auto; |
margin-top: 10px; |
padding: 0; |
width: 260px; |
} |
#liste-applications ul li { |
margin: 0; |
padding: 0; |
list-style-type: none; |
float: left; |
/*border: solid blue 1px;*/ |
} |
#liste-applications ul li a, #liste-applications ul li a:hover { |
text-decoration: none; |
} |
.bouton-appli { |
display: block; |
width: 64px; |
height: 64px; |
margin: 10px; |
border: solid #d0d0d0 1px; |
border-radius: 5px; |
font-size: 1.7em; |
line-height: 60px; |
color: white; |
} |
.www { |
background-color: #478DA7; |
} |
.eflore { |
background-color: #5EC563; |
} |
.cel { |
background-color: #66E3F2; |
} |
.identiplante { |
background-color: #F9EF14; |
} |
.pictoflora { |
background-color: #F9EF14; |
} |
.smartflore { |
background-color: #3CE946; |
} |
.coel { |
background-color: #A79247; |
} |
.referentiels { |
background-color: #909090; |
} |
.wiki { |
background-color: #F54521; |
} |
#liste-fournisseurs { |
margin-top: 50px; |
/*border: solid green 1px;*/ |
height: 80px; |
} |
#liste-fournisseurs ul { |
/*border: solid red 1px;*/ |
margin: auto; |
margin-top: 10px; |
padding: 0; |
width: 210px; |
} |
#liste-fournisseurs ul li { |
margin: 0; |
padding: 0; |
list-style-type: none; |
float: left; |
/*border: solid blue 1px;*/ |
} |
#liste-fournisseurs ul li a, #liste-fournisseurs ul li a:hover { |
text-decoration: none; |
} |
#liste-fournisseurs ul li a:focus { |
border: none; |
outline: none; |
} |
#liste-fournisseurs ul li img { |
margin: 5px; |
} |
#liste-fournisseurs ul li img.petite { |
margin-top: 32px; |
} |
#liste-fournisseurs ul li a[data-focus="true"] img.grande { |
display: block; |
} |
#liste-fournisseurs ul li a[data-focus="false"] img.grande { |
display: none; |
} |
#liste-fournisseurs ul li a[data-focus="true"] img.petite { |
display: none; |
} |
#liste-fournisseurs ul li a[data-focus="false"] img.petite { |
display: block; |
} |
#info-partenaire { |
color: #808080; |
margin-bottom: 45px; |
} |
#formulaire-identification { |
width: 300px; |
height: 260px; |
margin: auto; |
} |
#lien-inscription { |
float: left; |
line-height: 30px; |
text-decoration: underline; |
margin-left: 5px; |
} |
#bouton-connexion { |
float: right; |
} |
.left { |
float: left; |
} |
.right { |
float: right; |
} |
.info-erreur { |
color: red; |
} |
/trunk/widget/modules/auth/squelettes/auth_fr.tpl.php |
---|
New file |
0,0 → 1,158 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
<html xmlns="http://www.w3.org/1999/xhtml"> |
<head> |
<title>Tela Botanica - Authentification</title> |
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> |
<meta http-equiv="Content-style-type" content="text/css" /> |
<meta http-equiv="Content-script-type" content="text/javascript" /> |
<meta http-equiv="Content-language" content="fr" /> |
<meta name="revisit-after" content="15 days" /> |
<meta name="robots" content="index,follow" /> |
<meta name="author" content="Mathias Chouet" /> |
<meta name="keywords" content="Tela Botanica, authentification, connexion, login" /> |
<meta name="description" content="Widget d'authentification" /> |
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
<link rel="stylesheet" type="text/css" href="<?=$url_css?>" media="screen" /> |
<link rel="stylesheet" type="text/css" href="http://www.tela-botanica.org/commun/bootstrap/3.1.0/css/bootstrap.min.css" /> |
<script src="http://www.tela-botanica.org/commun/jquery/1.9.1/jquery-1.9.1.min.js"></script> |
<script src="http://www.tela-botanica.org/commun/bootstrap/3.1.0/js/bootstrap.min.js"></script> |
<script src="<?=$url_js?>"></script> |
<script> |
baseUrlAuth = '<?php echo $baseUrlAuth ?>'; |
</script> |
</head> |
<body> |
<!-- <h1>Auth !</h1> --> |
<div class="vertical-center"> |
<div class="boite-centre"> |
<h1>Tela Botanica</h1> |
<div class="contenu-boite" id="panneau-identification" style="display: none;"> |
<div id="liste-fournisseurs"> |
<ul> |
<li> |
<a href="#" data-focus="true" title="Se connecter avec Tela Botanica" data-toggle="tooltip" data-nom-partenaire="Tela Botanica"> |
<img class="grande" src="http://resources.tela-botanica.org/tb/img/64x64/logo.png" /> |
<img class="petite" src="http://resources.tela-botanica.org/tb/img/24x24/logo.png" /> |
</a> |
</li> |
<li> |
<a href="#" data-focus="false" title="Se connecter avec Pl@ntNet" data-toggle="tooltip" data-nom-partenaire="Pl@ntNet"> |
<img class="grande" src="http://resources.tela-botanica.org/tb/img/partenaires/plantnet_64.png" /> |
<img class="petite" src="http://resources.tela-botanica.org/tb/img/partenaires/plantnet_24.png" /> |
</a> |
</li> |
<li> |
<a href="#" data-focus="false" title="Se connecter avec eRecolnat" data-toggle="tooltip" data-nom-partenaire="eRecolnat"> |
<img class="grande" src="http://resources.tela-botanica.org/tb/img/partenaires/erecolnat_64.png" /> |
<img class="petite" src="http://resources.tela-botanica.org/tb/img/partenaires/erecolnat_24.png" /> |
</a> |
</li> |
<li> |
<a href="#" data-focus="false" title="Se connecter avec le GBIF" data-toggle="tooltip" data-nom-partenaire="le GBIF"> |
<img class="grande" src="http://resources.tela-botanica.org/tb/img/partenaires/gbif_64.png" /> |
<img class="petite" src="http://resources.tela-botanica.org/tb/img/partenaires/gbif_24.png" /> |
</a> |
</li> |
<li> |
<a href="#" data-focus="false" title="Se connecter avec Facebook" data-toggle="tooltip" data-nom-partenaire="Facebook"> |
<img class="grande" src="http://resources.tela-botanica.org/tb/img/partenaires/fb_64.png" /> |
<img class="petite" src="http://resources.tela-botanica.org/tb/img/partenaires/fb_24.png" /> |
</a> |
</li> |
</ul> |
</div> |
<form id="formulaire-identification"> |
<div id="info-partenaire"> |
Se connecter avec <span id="nom-partenaire">Tela Botanica</span> |
</div> |
<div class="form-group"> |
<label class="left" for="login">Login (adresse courriel)</label> |
<br/> |
<input type="email" required class="form-control" id="login" placeholder="jean@tela-botanica.org"> |
</div> |
<div class="form-group"> |
<label class="left" for="mdp">Mot de passe</label> |
<span class="right"> |
(<a id="mdp-oublie" href="http://www.tela-botanica.org/page:inscription?m=f_oubli_mdp" target="_blank">oublié ?</a>) |
</span> |
<br/> |
<input type="password" required class="form-control" id="mdp" placeholder="mot de passe"> |
</div> |
<a id="lien-inscription" href="http://www.tela-botanica.org/inscription" target="_blank">S'inscrire</a> |
<button id="bouton-connexion" type="submit" class="btn btn-default">Se connecter</button> |
</form> |
<div class="info-erreur" id="info-erreur-login" style="display:none;">Mauvais identifiant ou mot de passe</div> |
<div class="info-erreur" id="info-erreur-serveur" style="display:none;">Erreur du serveur</div> |
</div> |
<div class="contenu-boite" id="panneau-bienvenue" style="display: none;"> |
<div id="logo-tb"> |
<img src="http://resources.tela-botanica.org/tb/img/64x64/logo.png" /> |
</div> |
<div id="bienvenue"> |
<span class="leger">bienvenue</span> <span id="nom-complet"></span> |
<br/> |
(<a id="deconnexion" href="#">se déconnecter</a>) |
</div> |
<div id="liste-applications"> |
<h2>Découvrez nos applications :</h2> |
<ul> |
<li> |
<a href="http://www.tela-botanica.org" title="Site Web" data-toggle="tooltip"> |
<div class="bouton-appli www">www</div> |
</a> |
</li> |
<li> |
<a href="http://www.tela-botanica.org/page:eflore_bdtfx" title="eFlore" data-toggle="tooltip"> |
<div class="bouton-appli eflore">eF</div> |
</a> |
</li> |
<li> |
<a href="http://www.tela-botanica.org/appli:cel" title="Carnet en Ligne" data-toggle="tooltip"> |
<div class="bouton-appli cel">CeL</div> |
</a> |
</li> |
<li> |
<a href="http://www.tela-botanica.org/appli:identiplante" title="Identiplante" data-toggle="tooltip"> |
<div class="bouton-appli identiplante">IP</div> |
</a> |
</li> |
<li> |
<a href="http://www.tela-botanica.org/appli:pictoflora" title="Pictoflora" data-toggle="tooltip"> |
<div class="bouton-appli pictoflora">PF</div> |
</a> |
</li> |
<li> |
<a href="http://www.tela-botanica.org/appli:smartflore" title="Smart'Flore" data-toggle="tooltip"> |
<div class="bouton-appli smartflore">SF</div> |
</a> |
</li> |
<li> |
<a href="http://www.tela-botanica.org/appli:coel" title="Collections en Ligne" data-toggle="tooltip"> |
<div class="bouton-appli coel">Co</div> |
</a> |
</li> |
<li> |
<a href="http://referentiels.tela-botanica.org" title="Référentiels" data-toggle="tooltip"> |
<div class="bouton-appli referentiels">Réf</div> |
</a> |
</li> |
<li> |
<a href="http://www.tela-botanica.org/wikini" title="Wikini" data-toggle="tooltip"> |
<div class="bouton-appli wiki">W</div> |
</a> |
</li> |
</ul> |
</div> |
</div> |
</div> |
</div> |
</body> |
</html> |
/trunk/widget/modules/auth/squelettes/js/defaut.js |
---|
New file |
0,0 → 1,171 |
$(document).ready(function() { |
// infobulles |
$('[data-toggle="tooltip"]').tooltip(); |
// trucage ordre des champs pour passer du login au mdp sans passer |
// par le lien "oublié ?" => pas standard, c'est mal - @TODO faire mieux |
// Ordre : login => mdp => oublie => s'inscrire |
$('#login').keypress(function(e) { |
if(e.keyCode == 9) { |
if(! e.shiftKey) { |
$('#mdp').focus(); |
return false; |
} |
} |
}); |
$('#mdp').keypress(function(e) { |
if(e.keyCode == 9) { |
if(e.shiftKey) { |
$('#login').focus(); |
} else { |
$('#mdp-oublie').focus(); |
} |
return false; |
} |
}); |
$('#mdp-oublie').keypress(function(e) { |
if(e.keyCode == 9) { |
if(e.shiftKey) { |
$('#mdp').focus(); |
} else { |
$('#lien-inscription').focus(); |
} |
} |
return false; |
}); |
$('#lien-inscription').keypress(function(e) { |
if(e.keyCode == 9) { |
if(e.shiftKey) { |
$('#mdp-oublie').focus(); |
return false; |
} |
} |
}); |
// partenaire avec lequel se connecter |
$('#liste-fournisseurs ul li a').click(function() { |
$('#liste-fournisseurs ul li a').attr('data-focus', 'false'); |
$(this).attr('data-focus', 'true'); |
var nomPartenaire = $(this).data('nom-partenaire'); |
$('#nom-partenaire').html(nomPartenaire); |
}); |
// Connexion au SSO |
$('#formulaire-identification').submit(function() { |
var login = $('#login').val(), |
mdp = $('#mdp').val(); |
if (login == '' || mdp == '') { |
alert('Veuillez entrer votre login et votre mot de passe'); |
} else { |
var urlAuth = baseUrlAuth + '/connexion?login=' + login + '&password=' + mdp; |
$.ajax({ |
url: urlAuth, |
type: "GET", |
dataType: 'json', |
xhrFields: { |
withCredentials: true |
} |
}) |
.done(function(data) { |
definirUtilisateur(data.token); |
afficherPanneauBienvenue(); |
masquerErreurs(); |
}) |
.fail(function(error) { |
afficherErreurLogin(); |
}); |
} |
return false; |
}); |
// Déconnexion du SSO |
$('#deconnexion').click(function() { |
var urlAuth = baseUrlAuth + '/deconnexion'; |
$.ajax({ |
url: urlAuth, |
type: "GET", |
dataType: 'json', |
xhrFields: { |
withCredentials: true |
} |
}) |
.done(function(data) { |
definirUtilisateur(); |
afficherPanneauIdentification(); |
masquerErreurs(); |
}) |
.fail(function(error) { |
// @TODO gérer l'affichage de l'erreur, mais pas facile à placer |
// dans l'interface actuelle sans que ce soit moche |
//afficherErreurServeur(); |
}); |
return false; |
}); |
// vérification de l'état au chargement |
var urlAuth = baseUrlAuth + '/identite'; |
$.ajax({ |
url: urlAuth, |
type: "GET", |
dataType: 'json', |
xhrFields: { |
withCredentials: true |
} |
}).done(function(data) { |
// connecté |
definirUtilisateur(data.token); |
afficherPanneauBienvenue(); |
}) |
.fail(function(error) { |
// non connecté |
afficherPanneauIdentification(); |
}); |
function definirUtilisateur(jeton) { |
var nomComplet = ''; |
if (jeton != undefined) { |
// décodage jeton |
var jetonDecode = decoderJeton(jeton); |
nomComplet = jetonDecode.intitule; |
} |
// affichage |
$('#nom-complet').html(nomComplet); |
} |
/** |
* Décodage à l'arrache d'un jeton JWT, ATTENTION CONSIDERE QUE LE |
* JETON EST VALIDE, ne pas décoder n'importe quoi - pas trouvé de lib simple |
* Si pb de cross-browser, tenter ceci : https://code.google.com/p/javascriptbase64/ |
* ou ceci : https://code.google.com/p/crypto-js |
*/ |
function decoderJeton(jeton) { |
parts = jeton.split('.'); |
payload = parts[1]; |
payload = atob(payload); |
payload = JSON.parse(payload, true); |
return payload; |
} |
function afficherPanneauIdentification() { |
$('#panneau-identification').show(); |
$('#panneau-bienvenue').hide(); |
} |
function afficherPanneauBienvenue() { |
$('#panneau-identification').hide(); |
$('#panneau-bienvenue').show(); |
} |
function afficherErreurLogin() { |
$('#info-erreur-login').show(); |
} |
function afficherErreurServeur() { |
$('#info-erreur-serveur').show(); |
} |
function masquerErreurs() { |
$('.info-erreur').hide(); |
} |
}); |