Stuestøl: Passord med session og captha i php

Dette eksempelet genererer passord slik som vist ovanfor.
Beskrivinga på denne sida er såpass fullstendig at du eigentleg ikkje treng å forstå kva som skjer. Du kan bare kopiere og ta i bruk. Skulle du likevel ønskje å vite noe meir om dette, kan du kikke innom sidene «Session» og «passord» som du finn i menyen til venstre.

Som du ser, genererer programmet passord av typen «Skriv inn teikna du ser på bildet» for å vise at du er menneske og ikkje ein søkerobot.

Captcha-programmet

Det første du treng er eit program som lagar bildet med passordet. Dette har eg lagt inn i ei side eg kalla captcha.php. Denne sida kan sjå slik ut:

<?php
function slumpCaptcha($tal){ // slumpgeneratoren
$teiknliste = array_merge(range('a', 'z'), range('A', 'Z'), range('2', '9'));
shuffle($teiknliste); // Stokkar lista med teikn tilfeldig
$kode = '';
foreach (array_rand($teiknliste, $tal) as $v) {
$genkode .= $teiknliste[$v];
}
return $genkode;
}

$kode = slumpCaptcha(4); // Lagra den genererte koden i $kode

// Lag bildet:
$b = 65;// Breidde på bildet
$h = 25;// Høgde på bildet
$bilde = imagecreatetruecolor ($b,$h);// Lagar tomt bilde b x h
$bakgr_farge = imagecolorallocate ($bilde, 10, 10, 155); // Bakgrunnsfarge
imagefill($bilde,0,0,$bakgr_farge); // Set bakgrunnsfargen
$tekst_farge = imagecolorallocate ($bilde, 250, 250, 0); // Tekstfarge
$strek_farge = imagecolorallocate ($bilde, 150, 150, 150); // Farge på strekane
$font=5; // Skrifttype 1 … 5. (innebygde)
$tekst_x = 5; // x-forskyving av tekst
$tekst_y = 5; // y-forskyving av tekst
$strekar = 7; // Talet på strekar
for ($i=0; $i < $strekar; $i++) // Lag tilfeldige strekar
imageline ($bilde,mt_rand(0,$b),mt_rand(0,$h),mt_rand(0,$b),mt_rand(0,$h),$strek_farge);
imagestring ($bilde,$font,$tekst_x,$tekst_y,$genkode,$tekst_farge); // Teikna inn strekane
imagepng ($bilde , 'kodebilde.png' , 9); // Generer png-bildet
// Hugs passordet:
session_id('passord');
session_start();
$_SESSION['genkode'] = $kode; // Lagra den genererte koden i session
session_write_close();
print '<img src="kodebilde.png" 'alt="kodebildet">';
imagedestroy($bilde); // Fjern bildet
?>

Den første delen av programmet er ein prosedyre som genererer ein del teikn heilt på slump. Kor mange teikn strengen skal vere på, blir bestemt i oppkallet av prodsedyren: $kode = slumpCaptcha(4); der 4-talet viser at strengen skal ha fire teikn. Vil du vite meir om denne delen av programmet, sjå under session.

Den neste posten er å lage bildet. Fargane i bildet blir definerte med funksjonen imagecolorallocate(raud,grøn,blå) der verdiane kan vere frå 0 (ingen farge) til 255 (full farge) for kvar av fargekanalane. Vil du ha heilt svart farge, skriv du altså imagecolorallocate(0,0,0). Rein blåfarge får du med imagecolorallocate(0,0,255).

X-forskyving er kor langt inne frå den venstre bildekanten teksten skal byrje. Y-forskyving er kor langt ned i bildet teksten skal plasserast.

Strekane i bildet skal gjere teksten litt vanskelegare å lese for søkerobotar som kan lese slik tekst. Dersom du flytter funksjonen imagestring() over for-løkka (like under $strekar = 7;), blir strekane teikna oppå teksten. Dette gjer at bildet blir vanskelegare å lese for søkerobotane, men også for menneska.

Set inn bildet

Det neste steget er å setje bildet inn i programmet ditt. I tillegg må vi ha ein metode der brukaren kan skrive inn koden og sende den til kontroll. Til det bruker vi html-koden <form>. Her i eksemplet har eg bare tatt med så mykje av denne koden som er nødvendig for dette eksempelet. Sjølvsagt kan du legge inn mange andre ting her.

<form action="sjekkKoden.php" method="POST">
<?php include 'captcha.php'; ?>
<p>Skriv inn koden her:</p>
<p><input type="text" id="kode" name="kode" size="10" required/></p>
<input type="submit" value="Send meldinga" > </form>

Kontroller koden

Som du ser av koden over, skal sida sjekkKoden.php kallast opp når noen trykker knappen «Send meldinga». Altså må vi lage denne sida. På denne tredje og siste sida skriv du inn:

<?php
$koden = isset($_POST['kode']); // Hent innskrive kode
session_id('passord');
session_start();
$genkode = $_SESSION['genkode']; // Hent den genererte koden
session_write_close();

if ($koden != $genkode) { // Koden er feil
$kodeFeil = 'Feil kode';
$feil = True;
}
else $feil = false; Koden er rett
?>

Kva du nå gjer vidare er opp til deg. Sjølvsagt må du legge inn kva som skal skje når den innskrivne koden stemmer med den genererte koden. Like sjølvsagt er det vel at brukaren blir sendt tilbake til skjemaet dersom koden er feil. Dersom sida di heiter «sidami.php», kan du gjere dette mellom anna slik:

<?php
if ($feil) {
print $kodeFeil.'<br>';
print '<a href="sidami.php">Tilbake til sida</a>';
?>

Den siste linja lager ei lenke brukaren kan trykke på for å kome tilbake til sida for innskriving av koden.

Sida der brukaren skriv inn koden er den einaste som blir generert i html-kode som ei eige side. Dei andre sidene blir ein del av denne sida. For å vere siker på at session-dataane blir lagra på rett plass i programmet, er det difor nok å legge inn aktiveringa av session heilt øvst i denne sida. Altså:

<?php session_id('passord'); session_start(); session_write_close(); ?>
<html>
<head>
…
</head>
<body>
… programmet ditt
</body>
</html>

Skulle du få lyst til å eksperimentere med bildet, plassere teikna litt hulter til bulter, legge inn fargeklattar eller kva det nå måtte vere, kan du finne eit fullstendig oversyn over alle bildefunksjonane, med eksempel, i PHP manual. Mykje moro her.

Nå skulle du vere i stand til å få dette til å virke på sida di. Lukke til.

Kanskje koden også burde innehalde ein teljar slik at brukaren t.d. har tre forsøk før systemet stenger han ute. For å få nye forsøk, må brukaren gå ut av sida og inn på nytt. Dette kan du få til ved hjelp av session.

Sjølvsagt finst det mange andre måtar å gjere dette på. Grunnen til at eg har delt programmet på tre sider i staden for ei, er at eg då enkelt kan bruke passordprogrammet på fleire, ulike sider på same nettstaden. Ein stad kan det vere for å få innpass på bestemte sider, ein annan stad kan det vere for å sende e-postmeldingar.

Eit komplett passordeksempel

Captcha-programmet

Set inn bildet

Kontroller koden