[Super Débutant] Page d'accueil protégée par password simple

13 avr. 2015, 00:30

Salut à tous, je suis ce qu'on appelle un grand débutant dans le milieu du coding et je souhaiterais réaliser un site web.
Je fais la plus grande partie sur Muse 5 mais je voudrais réaliser une simple page d'accueil protégée par un mot de passe unique (juste pour filtrer les accès à ce site qui sera un portfolio en ligne). D'après ce que j'ai cru comprendre, il sera plus simple de réaliser cette page en html5.
J'ai donc commencé mais je bloque bêtement au moment de définir un mot de passe et de faire un sorte que la saisie du bon mot entraine l'ouverture de la page suivante..
Pourriez vous m'aider à taper ce code, j'ai naivement cru pouvoir m'en sortir avec les tutos existant sur le net mais je risque de plier mon écran avant de trouver la solution.
Voici ce par quoi j'ai commencé:

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Login</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
</head>
<body>

<section class="loginform cf">
<form name="login" action="index_submit" method="get" accept-charset="utf-8">
<ul>

<li>
<label for="password">Password</label>
<input type="password" name="password" placeholder="password" required

</li>

<li>
<input type="submit" value="Login">
</li>
</ul>
</form>
</section>
</body>
</html>

Je vous remercie tous d'avance et compte bien sur votre aide

Clément

13 avr. 2015, 01:03

le plus simple, c'est de protéger le site par le fichier .htaccess
ainsi, pas seulement les pages html seront protégées mais aussi les images.
car si la protection comme tu as commencée, est mal faite, tout le monde peut accéder aux images.

13 avr. 2015, 09:31

Je reprends la réponse de tof73, un fichier .htaccess (note bien le .) peut t'aider dans ce cas. Il est quasi-inviolable.
Voilà un petit tuto :
http://openclassrooms.com/courses/conce ... n-htaccess

13 avr. 2015, 13:29

D'abord merci beaucoup à vous pour la réponse rapide

Ensuite il semblerait bien que cette solution soit beaucoup plus adaptée à mes attentes.. Par contre je me demandais si l'aspect d'un htaccess était modifiable? J'ai oublié de le préciser mais c'est un point assez important pour moi. Je souhaiterais que la page d'accueil de mon site affiche donc une boîte de dialogue pour entrer un mot de passe..mais j'aimerais éviter la fenêtre Windows de base:) Pouvez vous m'éclairer sur ce point la aussi?
Merci encore

13 avr. 2015, 13:47

J'ai malheureusement trouvé la réponse tout seul..impossible de personnaliser une fenêtre htaccess. Je préfère donc chercher du côté html/php.
Après avoir testé l'embryon de code que j'ai copié plus haut, je pensais naïvement qu'il ne me manquait plus qu'à ajouter une ligne définissant un mot de passe, qui une fois renseigné, induirait l'ouverture de la page suivante..
Il s'agirait donc d'une protection peu efficace? Comment partir de ce que j'ai pour le rendre fonctionnel?

14 avr. 2015, 08:23

Ce n'est pas une fenêtre mais un simple fichier que tu mets en FTP dans la racine de ton site ou dans le dossier que tu veux protéger.
Dès que le visiteur ouvre cette page, le moteur APACHE regarde si ce fichier existe et s'il existe oblige l'utilisateur à rentrer un mot de passe qui est contenu dans un autre fichier. C'est ultra efficace.

14 avr. 2015, 09:22

Oui j'ai fait le test, mais la fenêtre qui s'ouvre pour demander le mot de passe dépend du navigateur et n'est donc pas personnalisable.
Mon site étant destiné à accomplir un portfolio, j'aimerais vraiment pouvoir intégrer la fenêtre et pouvoir personnaliser celle ci.

Comment feriez vous pour protéger l'accès à une page en Html?

Merci encore

14 avr. 2015, 10:17

Ah si tu veux personnaliser, le mieux est login + mot de passe + hashage mot de passe + base de données + gestion utilisateur + session + token. Bref, un peu lourd à mettre en place pour un Super débutant

Autre moyen : Tu peux aussi simplement mettre des mots de passes codés dans un dossier sécurisé par exemple mais seulement si ton nombre d'utilisateurs est faible (<30) sinon cela deviendra très difficile à gérer.
Si tu es intéressé par cette voie, regarde du côté des hash() ou sha256(). Il suffit de comparer le mot de passe envoyé avec celui stocké dans un dossier et s'ils correspondent de donner l'accès via un mode de Session par exemple.

L'idéal est quand même la gestion via base de donnée.

14 avr. 2015, 13:08

Salut Aureusms Merci beaucoup pour ton aide. Je crois que la dernière solution dont tu parles serait parfaite. J'ai simplement besoin de définir un unique mot de passe que je donnerai aux personnes à qui je souhaite montrer le portfolio. Ça devrait donc être simple?
Aurais tu sous la main un tutoriel:)?

14 avr. 2015, 13:31

Non pas de Tuto mais cela reste simple.
Créer le résultat de ton formulaire, je te guiderai et voici pour commencer :

<?php
if (!empty($_POST)) {
	$motDePasseVerifie = sha256('coucoulemotdepasse123');
	$messageRetour = false;
	if (empty(trim($_POST["password"]))) {
		$messageRetour = "Le mot de passe ne peut être vide";		
	}
	elseif (sha256($_POST["password"]) == $motDePasseVerifie) {
		$messageRetour = "Le mot de passe n'est pas le bon !";
	}
}
?>
<!DOCTYPE html>
<html>
	<head>
	<title>HTML5 Login</title>
	<link rel="stylesheet" href="normalize.css">
	<link rel="stylesheet" href="style.css">
	</head>
<body>
	<section class="loginform cf">
	<form name="login" action="<?php echo $_POST["PHP_SELF"]; ?>" method="post" accept-charset="utf-8">
		<ul>
			<li>
				<label for="password">Password</label>
				<input type="password" name="password" placeholder="password" required />
			</li>
			<li>
				<input type="submit" value="Login" />
			</li>
			<?php
			if (!empty($messageRetour)) {
				?>
				<p><?php echo $messageRetour; ?></p>
				<?php
			}
			?>
		</ul>
	</form>
	</section>
</body>
</html>

Le mot de passe est "coucoulemotdepasse123" mais je pense que tu l'avais compris.

14 avr. 2015, 13:45

Wow merci beaucoup!
Du coup je m'y perd un peu, ce code fonctionne sur la page du site que je veux verrouiller ou je dois créer une première page qui pointera vers le contenu même du site, si le mot de passe est validé?

14 avr. 2015, 13:48

La même page sert au formulaire et la vérification du formulaire.

14 avr. 2015, 17:31

Donc je dois insérer ces lignes dans le code de ma page principale (au début par exemple?) si je comprends bien.
Par contre les autres pages du site ne seront pas protégées si? Si quelqu'un copie colle le lien d'une page autre que celle contenant le formulaire il pourra y accéder?

15 avr. 2015, 20:08

Oui et non. Tu peux gérer ensuite via les sessions qui tu dois utiliser sur toute les pages.

15 avr. 2015, 23:50

Bon je dois t'avouer que tu m'as un peu perdu en route.. J'ai opté pour la solution de la page d'accueil, uniquement réservée à la saisie du mot de passe. De ce coté tout est prèt (enfin je crois). Maintenant je souhaiterais faire en sorte que la validation du fameux mot de passe permette l'ouverture de la page principale. Mais j'avoue ne pas savoir comment faire du tout.. Je suis d'autant plus perdu que je ne comprends pas par quel miracle, on ne pourrait pas tout simplement contourner cette "protection" en copiant/collant l'adresse de cette deuxième page.

J'espère ne pas trop te gonfler, c'est bien sympathique de ta part de m'aider en tout cas !

[Super Débutant] Page d'accueil protégée par password simple

Qui est en ligne