Symfony 4 : Membuat Autenthication (halaman login) (Part 4)

Autentication atau autentikasi adalah suatu proses pembuktian seorang pengguna pada saat memasuki sebuah sistem, contohnya pada saat kita login ke akun sebuah situs atau sosial media milik kita, untuk dapat mengakses akun milik kita, maka dilakukan yang namanya autentikasi agar yang bisa mengakses akun adalah orang yang bersangkutan atau si pemiliki akun.

Pada framework Symfony kalian juga dapat membuat sebuah autentikasi dan sesuai judul kali ini saya akan membuat autentikasi halaman login. Tutorial sebelumnya kita telah selesai membuat halaman web menggunakan template dari bootswatch dan tutorial ini adalah lanjutan dari postingan sebelumnya.  Oke langsung saja :

1.Konfigurasi Database
Dengan cara mengatur configure file .env yang ada di dalam folder project kalian pada file .env baris kode 26 ubah kode menjadi DATABASE_URL=mysql://root:@127.0.0.1:3306/symfony1 seperti pada gambar di bawah ini :

Di sini saya menggunakan database Mysql dan symfony1 merupakan nama database yang kita buat.

2. Buat database

Pada terminal dengan mengetikan perintah php bin/console doctrine:database:create maka database akan otomatis dibuat

 

3.  Membuat Entity
Setelah database dibuat selanjutnya kita akan membuat Entity user, yang dimaksud entity di sini adalah table yang ada pada database yang kita buat dengan mengetikan perintah "php bin/console make:entity" seperti gambar di bawah ini :

Pada gambar di atas nama dari entity adalah User, kalian dapat membuat field dalam entity User langsung di terminal, untuk field dari user saya membuat  melalui manual dengan edit file user.php yang ada di dalam folder src/entity/user.php.

Buka editor, masuk pada folder src/entity/User.php kemudian edit entity dengan source code berikut :

--------------------------------------------------------------------------------------------------------------------------------

<?php

namespace App\Entity;

use Doctrine\ORM\Mapping as ORM;
use Symfony\Component\Security\Core\User\UserInterface;

/**
 * @ORM\Entity(repositoryClass="App\Repository\UserRepository")
 */
class User implements UserInterface, \Serializable
{
    /**
     * @ORM\Id()
     * @ORM\GeneratedValue()
     * @ORM\Column(type="integer")
     */
    private $id;

    /**
     * @ORM\Column(type="string", length=255, unique=true)
     */
    private $username;

    /**
     * @ORM\Column(type="string", length=255)
     */
    private $password;

    /**
     * @ORM\Column(type="string", length=255, unique=true)
     */
    private $email;

    public function getId(): ?int
    {
        return $this->id;
    }

    public function getUsername(): ?string
    {
        return $this->username;
    }

    public function setUsername(string $username): self
    {
        $this->username = $username;

        return $this;
    }

    public function getPassword(): ?string
    {
        return $this->password;
    }

    public function setPassword(string $password): self
    {
        $this->password = $password;

        return $this;
    }

    public function getEmail(): ?string
    {
        return $this->email;
    }

    public function setEmail(string $email): self
    {
        $this->email = $email;

        return $this;
    }

    public function getRoles()
    {
        return [
            'ROLE_USER'
           
        ];
    }

    public function getSalt() {}

    public function eraseCredentials() {}

    public function serialize()
    {
        return serialize([
            $this->id,
            $this->username,
            $this->email,
            $this->password
        ]);
    }

    public function unserialize($string)
    {
        list (
            $this->id,
            $this->username,
            $this->email,
            $this->password
        ) = unserialize($string, ['allowed_classes' => false]);
    }
}
--------------------------------------------------------------------------------------------------------------------------------

kode di atas adalah untuk membuat field di dalam table User dimana fieldnya terdiri dari username,password, email, dan juga Role

4. Membuat Security Controller
Jika tahap ke-3 sudah, selanjutnya membuat Security Controller, Security Controller ini berfungsi untuk mengontrol akses ke login page. yang akan kita buat sebagai halaman untuk login. Untuk membuat Security Controller ikuti perintah di bawah ini :

Selanjutnya masuk ke editor pilih src/controller/SecurityController.php dan edit file SecurityController.php dengan kode program di bawah ini:

---------------------------------------------------------------------------------------------------------------------------------

<?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Security\Http\Authentication\AuthenticationUtils;

class SecurityController extends Controller
{
    /**
     * @Route("/login", name="login")
     */
    public function login(Request $request, AuthenticationUtils $utils)
    {
        $error = $utils->getLastAuthenticationError();

        $lastUsername = $utils->getLastUsername();

        return $this->render('security/login.html.twig', [
            'error'           => $error,
            'last_username'   => $lastUsername
        ]);
    }

    /**
    * @Route("/logout",name="logout")
    */

    public function logout()
    {

    }
}

---------------------------------------------------------------------------------------------------------------------------------

Kemudian pada folder "templates/security/index.html.twig" ubah index.html.twig mejadi login.html.twig karna dalam file controller yang kita edit tadi kita mengubah index.html.twig menjadi login.html.twig sehingga file login.html.twig dapat dirender oleh Security Controller.

5. Membuat Data Fixtures
Sebelum membuat data fixtures, install orm-fixtures -dev pada terminal dengan cara mengetikan ketikan pertintah "composer require orm --dev"  

Jika sudah terinstall selanjutnya baru membuat User Fixtures ketika perintah seperti pada gambar di bawah ini :

setelah itu masuk ke folder src/DataFixtures.php lalu edit file tersebut dengan kode di bawah ini :
---------------------------------------------------------------------------------------------------------------------------------
<?php

namespace App\DataFixtures;

use App\Entity\User;
use Doctrine\Bundle\FixturesBundle\Fixture;
use Doctrine\Common\Persistence\ObjectManager;
use Symfony\Component\Security\Core\Encoder\UserPasswordEncoderInterface;

class UserFixtures extends Fixture
{
    private $encoder;

    public function __construct(UserPasswordEncoderInterface $encoder)
    {
        $this->encoder = $encoder;
    }

    public function load(ObjectManager $manager)
    {
        $user = new User();
        $user->setUsername('admin');

        $user->setPassword(
            $this->encoder->encodePassword($user, '0000')
        );

        $user->setEmail('no-reply@example.com');

        $manager->persist($user);

        $manager->flush();
    }
}
---------------------------------------------------------------------------------------------------------------------------------

Data fixtures adalah sebuah data fake  yang dibuat dengan tujuan untuk menginput data yang ke dalam sebuah database, di sini saya membuat data fixtures untuk mengiput data user yang akan digunakan untuk login.

6. Edit Secuirty.yaml
Edit security.yaml pada config/packages/security.yaml seperti pada kode di bawah ini
---------------------------------------------------------------------------------------------------------------------------------

 security:
    encoders:
        App\Entity\User:
            algorithm: bcrypt
    providers:
        my_provider:
            entity:
                class: App\Entity\User
                property: username

    firewalls:
        dev:
            pattern: ^/(_(profiler|wdt)|css|images|js)/
            security: false
        main:
            anonymous: true

            form_login:
                login_path: login
                check_path: login
                default_target_path: home
                provider: my_provider

            logout:
                path: /logout
                target: login
          

    # Easy way to control access for large sections of your site
    # Note: Only the *first* access control that matches will be used
    access_control:
        #- { path: ^/admin, roles: ROLE_ADMIN }
          - { path: ^/home, roles: ROLE_USER }

---------------------------------------------------------------------------------------------------------------------------------


7. Update Database
Agar entity yang kita buat masuk ke dalam database maka pada terminal ketikan perintah php bin/console doctrine:schema:update --force

Jika hasilnya seperti gambar di atas maka database berhasil di update.

8. Load Fixtures
Untuk tahap 8 adalah load data fixture yang kita buat tadi ke dalam database agar kita dapat melakukan login dengan role serta username yang kita bua pada UserFixtures.php dengan perintah php bin/console doctrine:fixtures:load

10. Konfigurasi Route
Yang terakhir adalah konfigurasi Route, masuk ke config/route.yaml  edit file route.yaml
-----------------------------------------------------------------------------------------
index:
    path: /
    controller: App\Controller\SecurityController::login
-----------------------------------------------------------------------------------------

fungsi dari konfigurasi route di atas adalah untuk membuat sebuat route dimana ketika project web symfony telah kita buat di jalankan maka akan masuk ke halaman login.

Jalankan web yang telah dibuat dengan cara :

- Jalankan server Symfony -> php bin/console server:start
-Masuk ke localhost project yang tadi dibuat -> http://127.0.0.1:8000

-Jika kalian salah memasukan user dan password makan akan muncul pesan error.

-Masukan user dan password (username=admin password=0000)

Oke sekian tutorial autentikasi login dari saya, sampai bertemu lagi di postingan selanjutnya ^^

Referensi :
https://symfony.com/
https://www.youtube.com/watch?v=972QnZikzMA