Codeigniter – registracija/prijava

Prije ovoga bacite oko na ovu objavu.

Kod je na github.

Cijeli postupak ide ovako:

  • registracija korisnika
    • korisnik pošalje email i šifru
    • ako email ne postoji napravi novi korisnički račun
  • prijava korisnika
    • korisnik pošalje email i šifru
    • ako email postoji – prijavi korisnika

Kod registracije unosimo email, šifru i user id (UUID) u bazu podataka.

Kad se korisnik prijavi šaljemo mu (http-only) browser-only cookie. Znači cookie do kojeg se ne može doći sa javascriptom u internet pregledniku. U sesiji (session) dodajmo ključ [“user-logged-on” => ‘f750204d-e73d-43e7-a5c2-cff967d233c6’].

Na ponovnoj posjeti, provjeravamo (preko cookie-ja) “user-logged-on” iz sesije.

Na odjavi, brišemo ključ sesije.

U phpMyAdmin (ili preko terminala) pravimo tablicu:

DROP DATABASE IF EXISTS ci_login_app;
CREATE DATABASE ci_login_app;
DROP USER IF EXISTS 'ci_login_app'@'localhost';
CREATE USER 'ci_login_app'@'localhost' IDENTIFIED BY 'ci_login_app';
GRANT ALL ON ci_login_app.* TO 'ci_login_app'@'localhost';
USE ci_login_app;

CREATE TABLE users (
    id int(11) NOT NULL AUTO_INCREMENT,
    email varchar(320) DEFAULT NULL,
    password varchar(256) DEFAULT NULL,
    uuid varchar(36) DEFAULT NULL,
    PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Instaliramo CI4 i instaliramo libse:

composer create-project codeigniter4/appstarter ci_login_app
cd ./ci_login_app
composer require ramsey/uuid
composer require respect/validation

Kopiramo env u .env

cp ./env ./.env

…i mjenjamo pod “Database” i “Enviroment”:

#--------------------------------------------------------------------
# ENVIRONMENT
#--------------------------------------------------------------------

CI_ENVIRONMENT = development

#...

#--------------------------------------------------------------------
# DATABASE
#--------------------------------------------------------------------

 database.default.hostname = localhost
 database.default.database = ci_login_app
 database.default.username = ci_login_app
 database.default.password = ci_login_app
 database.default.DBDriver = MySQLi
 # database.default.DBPrefix =

Otvaramo dodatni tab u terminalu i startamo dev server:

php spark serve

Server je na:

http://localhost:8080

Pravimo “Users” controller i model:

php spark make:model Users --suffix
php spark make:controller Users --suffix 

Zatim pravimo view predloške:

touch ./app/Views/dashboard.php
touch ./app/Views/login.php
touch ./app/Views/logout.php
touch ./app/Views/register.php

Unosimo rute (putanje) “./app/Config/Routes.php”:

//ispod: $routes->get('/', 'Home::index');
$routes->get('/login', 'UsersController::login');
$routes->post('/login-post', 'UsersController::loginPost');
$routes->get('/register', 'UsersController::register');
$routes->post('/register-post', 'UsersController::registerPost');
$routes->get('/dashboard', 'UsersController::dashboard');
$routes->get('/logout', 'UsersController::logout');

U naš “./app/Models/UsersModel.php” unosimo promjene:

<?php

namespace App\Models;

use CodeIgniter\Model;

class UsersModel extends Model
{
    protected $DBGroup          = 'default';
    protected $table            = 'users';
    protected $primaryKey       = 'id';
    protected $useAutoIncrement = true;
    protected $insertID         = 0;
    protected $returnType       = 'array';
    protected $useSoftDeletes   = false;
    protected $protectFields    = true;
    protected $allowedFields    = ['password','email','uuid'];

    // Dates
    protected $useTimestamps = false;
    protected $dateFormat    = 'datetime';
    protected $createdField  = 'created_at';
    protected $updatedField  = 'updated_at';
    protected $deletedField  = 'deleted_at';



	// Validation
	protected $validationRules      = [
	  "password" => "required|min_length[8]|max_length[256]",
	  "email" => "required|valid_email|min_length[5]|is_unique[users.email]",
	];
	protected $validationMessages   = [
	  "password" => [
		"required" => "Password is required",
		"min_length" => "Minimum length of password should be 8 chars",
		"max_length" => "Maximum length of password should be 256 chars",
	  ],
	  "email" => [
		"required" => "Email needed",
		"valid_email" => "Please provide a valid email address"
	  ],
	];
    protected $skipValidation       = false;
    protected $cleanValidationRules = true;

    // Callbacks
    protected $allowCallbacks = true;
    protected $beforeInsert   = [];
    protected $afterInsert    = [];
    protected $beforeUpdate   = [];
    protected $afterUpdate    = [];
    protected $beforeFind     = [];
    protected $afterFind      = [];
    protected $beforeDelete   = [];
    protected $afterDelete    = [];
}

U predloške unosimo: “./app/Views/login.php”

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Login</title>
	<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  </head>
  <body>
	  

<div class="w3-panel w3-blue-grey w3-animate-top info-text-conatiner" style="margin:0; display:none;">
  <h3>Information!</h3>
  <p class="info-text"></p>
</div> 
		
<div class="w3-card-4">

<header class="w3-container w3-blue">
  <h1>Login</h1>
</header>

<div class="w3-container">

		<br>
	  	<form class="w3-container">

		<input class="w3-input email-input" type="text">
		<label>Email</label>

		<input class="w3-input password-input" type="text">
		<label>Password</label>

		</form> 

		<br>
		<button class="w3-button w3-blue" onclick="login()"> Submit </button>
		<br>
		<br>
</div> 		
		
</div> 
		
				
	
</body>
</html>


<script>

const login = async () => { 

	const email = document.querySelector(".email-input");
	const password = document.querySelector(".password-input");
	const messageContainer = document.querySelector(".info-text-conatiner");
	const messageContainerText = document.querySelector(".info-text");
		
		
	if (email.value < 4)	
	{
		console.log( "bad email" );
		return null;
	}
		
	if (password.value < 4)	
	{
		console.log( "bad password" );
		return null;
	}
				
	const postData = new FormData();
	postData.append("login-form-email", email.value);
	postData.append("login-form-password", password.value);

    try {
		const response = await fetch('/login-post', {
			method: 'POST', 
			body: postData,
		});

		const jsonUserData = await response.json();
		
		messageContainer.style.display = 'block';
		messageContainerText.innerHTML = jsonUserData.message;
		
		if (!jsonUserData.error)
		{
			window.location = '/dashboard';
		}

		//console.log( jsonUserData.name );
	}
	catch (error) {
		console.error(error);
	}
		
}

		
</script>

.app/Views/logout.php

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Logged off!</title>
	<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  </head>
  <body>
	  

		
<div class="w3-card-4">

<header class="w3-container w3-blue">
  <h1>Logged off!</h1>
</header>
<div class="w3-margin w3-padding">
	<p>User logged off.</p>
  <div class="w3-button w3-blue" onclick="window.location='/login'"> Go to login page. </div>
  <br><br>
</div>
		

</div> 
	
  </body>
</html>

./app/Views/register.php

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Register</title>
	<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  </head>
  <body>
	  

<div class="w3-panel w3-blue-grey w3-animate-top info-text-conatiner" style="margin:0; display:none;">
  <h3>Information!</h3>
  <p class="info-text"></p>
</div> 
		
<div class="w3-card-4">

<header class="w3-container w3-blue">
  <h1>Register</h1>
</header>

<div class="w3-container">

		<br>
	  	<form class="w3-container">

		<input class="w3-input email-input" type="text">
		<label>Email</label>

		<input class="w3-input password-input" type="text">
		<label>Password</label>

		</form> 

		<br>
		<button class="w3-button w3-blue" onclick="register()"> Submit </button>
		<br>
		<br>
</div> 		
		
</div> 
		
				
	
</body>
</html>


<script>

const register = async () => { 

	const email = document.querySelector(".email-input");
	const password = document.querySelector(".password-input");
	const messageContainer = document.querySelector(".info-text-conatiner");
	const messageContainerText = document.querySelector(".info-text");
		
		
	if (email.value < 4)	
	{
		console.log( "bad email" );
		return null;
	}
		
	if (password.value < 4)	
	{
		console.log( "bad password" );
		return null;
	}
				
	const postData = new FormData();
	postData.append("register-form-email", email.value);
	postData.append("register-form-password", password.value);

    try {
		const response = await fetch('/register-post', {
			method: 'POST', 
			body: postData,
		});

		const jsonUserData = await response.json();
		
		messageContainer.style.display = 'block';
		messageContainerText.innerHTML = jsonUserData.message;
		
		console.log( jsonUserData.name );
	}
	catch (error) {
		console.error(error);
	}
		
}



		
</script>

./app/Views/dashboard.php

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Dashboard</title>
	<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  </head>
  <body>
	  		
<div class="w3-card-4">

<header class="w3-container w3-blue">
  <h1>Dashboard</h1>
</header>
<div class="w3-margin w3-padding">
	<p>Only logged user can see this.</p>
  <div class="w3-button w3-blue" onclick="window.location='/logout'"> Logout </div>
  <br><br>
</div>
		
</div> 
	
	
  </body>
</html>

I na kraju, unosimo u “./app/Controllers/UsersController.php”:

<?php

namespace App\Controllers;

use App\Controllers\BaseController;
use App\Models\UsersModel;
use Ramsey\Uuid\Uuid;
use Respect\Validation\Validator as v;


class UsersController extends BaseController
{
    public function index()
    {
        //
    }
	
	
	public function login()	
	{
		$session = session();
		if ($session->has('loginId'))
		{
			return redirect()->to('/dashboard');
		}

		return view("login");
	}

	public function loginPost()
	{	
		header('Content-type:application/json;charset=utf-8');

		$session = session();

		$email = $this->request->getVar("login-form-email");
        $password = $this->request->getVar("login-form-password"); 

		if (!v::email()->validate($email))
		{
			http_response_code(500);
			echo json_encode([
				'error' => true,
				'message' => 'Bad email format!',
				'data' => null,
			]);		
			die();
		}

		if (!v::alnum()->noWhitespace()->length(8, 40)->validate($password))
		{
			http_response_code(500);
			echo json_encode([
				'error' => true,
				'message' => 'Password must be alphanumeric 8-40 chars!',
				'data' => null,
			]);		
			die();
		}

		$usersModel = new UsersModel();
		$emailExists = $usersModel->getWhere(["email" => $email]);
		$emailExistsResult = $emailExists->getResult();

		if (!$emailExistsResult)
		{
			http_response_code(500);
			echo json_encode([
				'error' => true,
				'message' => 'User email not found!',
				'data' => null,
			]);		
			die();
		}


		$passHash = $emailExistsResult[0]->password;
		$uuid = $emailExistsResult[0]->uuid;
		if (!password_verify($password, $passHash))
		{
			http_response_code(500);
			echo json_encode([
				'error' => true,
				'message' => 'Bad login password!',
				'data' => null,
			]);		
			die();
		}
		else
		{
			$session->set('loginId', $uuid);

			echo json_encode([
				'error' => false,
				'message' => 'User login valid!',
				'data' => $uuid,
			]);		
			die();
		}
	
		http_response_code(500);
		echo json_encode([
			'error' => true,
			'message' => 'Fail, internal server error.',
			'data' => null,
		]);		
		die();

	}

	public function register()
	{
		$session = session();
		if ($session->has('loginId'))
		{
			return redirect()->to('/dashboard');
		}

		return view("register");
	}


	public function registerPost()
	{
		header('Content-type:application/json;charset=utf-8');


		$session = session();

		$email = $this->request->getVar("register-form-email");
        $password = $this->request->getVar("register-form-password"); 
		$uuid = Uuid::uuid4();

		if (!v::email()->validate($email))
		{
			http_response_code(500);
			echo json_encode([
				'error' => true,
				'message' => 'Bad email format!',
				'data' => null,
			]);		
			die();
		}

		if (!v::alnum()->noWhitespace()->length(8, 40)->validate($password))
		{
			http_response_code(500);
			echo json_encode([				
				'error' => true,
				'message' => 'Password must be alphanumeric 8-40 chars!',
				'data' => null,
			]);		
			die();
		}

		$passwordHash = password_hash($password, PASSWORD_BCRYPT, ['cost'=>12]);

		$usersModel = new UsersModel();
		$emailExists = $usersModel->getWhere(["email" => $email]);
		$emailExistsResult = $emailExists->getResult();



		if ($emailExistsResult)
		{
			http_response_code(500);
			echo json_encode([
				'error' => true,
				'message' => 'Email already exists!',
				'data' => null,
			]);		
			die();
		}

		$insertUserId = $usersModel->insert([
			'email' => $email,
			'password' => $passwordHash,
			'uuid' => $uuid,
		]);

		if ($insertUserId > 0)
		{
			echo json_encode([
				'error' => false,
				'message' => 'User added.',
				'data' => $uuid,
			]);		
			die();
		}

		http_response_code(500);
		echo json_encode([
			'error' => true,
			'message' => 'Fail, internal server error.',
			'data' => null,
		]);		
		die();
	}
	

	public function dashboard()
	{
		return view("dashboard");
	}
	
	
	public function logout()
	{
		$session = session();
		$session->remove('loginId');
		return view('logout');	
	}
	
	
	
}

Testiranje

Password polje sam namjerno ostavio vidljivo. Kada odemo na “/register” putanju dobijemo registracijsku formu:

I vidimo unos u bazi podataka:

Na “/login” imamo naravno login formu:

I kada smo spojeni možemo na “/dashboard”.

I na kraju da odjavimo korisnika idemo na “/logout” rutu.

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa * (obavezno)

Previous post Codeigniter – Model
Next post Kako instalirati i koristiti React na Linuxu?

🗣 You can translate this site using Chrome built-in translator.