Cara Mengaktifkan https localhost XAMPP di windows menjadi secure

Halo sobat iltek, kali ini nabil akan membagikan tips atau tutorial mengaktifkan https di localhost menggunakan server lokal XAMPP di windows. saya membagikan tutorial ini karena sudah menjadi kebutuhan saya untuk membuat website atau mendevelop di dalam server lokal menggunakan https. kenapa sih saya harus menggunakan https kan cuman diserver lokal ?. sebenarnya untuk di server lokal tidak ada masalah jika menggunakan protokol http.

Saya menggunakan https di server lokal XAMPP karena waktu itu saya sedang belajar menampilkan API here Maps di server lokal dan itu harus menggunakan protokol https agar bisa tampil maps nya maka dari itu saya mencari cari di internet tetapi sangat jarang sekali tutorial yang berhasil menggunakan https di server lokal, dan seperti yang sudah diketahui tidak sesuai dengan ekspetasi saya atau bisa saya bilang gagal cara nya.  Lalu setelah saya lama mencari akhirnya ketemu tutorial di youtube yang benar benar berhasil. Bagaimana sih cara nya ? langsung saja ikuti tutorial mengaktifkan https di localhost menggunakan server lokal XAMPP di windows berikut ini.

Pertama yang harus dipersiapkan adalah software web server Xampp apabila belum menginstal nya bisa mengikuti tutorial di cara menginstal xampp di windows.

Jika sudah menginstal, pergi ke drive C:\xampp\apache biasanya folder xampp ada di drive C:\ bisa di sesuaikan dengan direktori pada saat menginstal ya. buat file baru https.txt kemudian edit lewat text editor anda salin kode berikut :

authorityKeyIdentifier=keyid,issuer 
basicConstraints=CA:FALSE 
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment 
subjectAltName = @alt_names 

[alt_names] 
DNS.1 = localhost
DNS.1 = codespace.test

Perhatikan DNS.1 = localhost ini bisa anda edit atau tambah jika ada DNS yang diinginkan menggunakan protokol https. sebagai contoh:

...

[alt_names] 
DNS.1 = localhost
DNS.2 = produk.test
DNS.3 = wordpress.com
DNS.4 = perpustakaan.dev
DNS.5 = coba.test

Lalu di save.

Kemudian rename file tersebut menjadi https.ext. akan terlihat seperti ini:

Selanjutnya masih di direktori yang sama buka file makecert.bat kedalam text editor anda bisa notepad,sublime text, vscode dll.  jika tidak bisa dibuka, coba ubah file nya menjadi format .txt . lalu cari kode yang semula nya:

bin\openssl x509 -in server.csr -out server.crt -req -signkey server.key -days 365

Ubah kode nya menjadi seperti ini :

bin\openssl x509 -in server.csr -out server.crt -req -signkey server.key -days 500 -sha256 -extfile https.ext

Lalu di save.

Setelah itu buka cmd bisa menggunakan perintah windows + R dan ketikkan cmd lalu enter. setelah itu ketikkan:

cd C:\xampp\apache
makecert

Ikuti perintah seperti dibawah ini :

Enter PEM pass phrase : 12345678

Verifying – Enter PEM pass phrase: 12345678

Country Name (2 letter code) [AU]:ID

State or Province Name (full name) [Some-State]: Jakarta

Locality Name (eg, city) []: Jakarta

Organization Name (eg, company) [Internet Widgits Pty Ltd]: Web Dev

Organizational Unit Name (eg, section) []:laravel

Common Name (e.g. server FQDN or YOUR name) []:localhost

Email Address []:[email protected]

A challenge password []:

An optional company name []:localhost

Enter pass phrase for privkey.pem:12345678

Jika mengikuti perintah diatas maka akan menampilkan Press any key to continue . . .di akhir. Berarti penginstalan ssl sudah berhasil. selanjutnya buka Manage user certificates di search windows atau bisa menggunakan perintah windows + R dan ketikkan certmgr.msc lalu enter. 

Maka akan muncul seperti ini :

Lalu klik kanan Certificates > All Tasks > Import…

Lalu klik next

Kemudian klik tombol browse cari file server.crt di direktory C:\xampp\apache\conf\ssl.crt\server.crt klik next

Pilih all certificates in the following store kemudian isikan Trusted Root Certification Authorities lalu next > finish.

Jika anda ingin merubah domain project framework laravel yang menggunakan ip 127.0.0.1 . anda bisa mengubah nya dengan membuka file hosts di direktori C:\Windows\System32\drivers\etc . lalu tambahkan ini di bawah didalam file hosts :

127.0.0.1 codespace.test

atau menggunakan ip lain selain ini juga bisa , itu sebagai contoh saja untuk merubah domain nya dan jangan lupa di save .

Kemudian buka file httpd-vhosts.conf di direktori C:\xampp\apache\conf\extra.lalu tambah kan kode atau salin kode dibawah ini.

<VirtualHost 127.0.0.1:8>
    DocumentRoot "C:/xampp/htdocs/Develompent/codespace/public"
    ServerName codespace.test
    ServerAlias www.codespace.test
</VirtualHost>

<VirtualHost 127.0.0.1:443>
    DocumentRoot "C:/xampp/htdocs/Develompent/codespace/public"
    ServerName codespace.test
    ServerAlias www.codespace.test
    SSLEngine on
    SSLCertificateFile "C:/xampp/apache/conf/ssl.crt/server.crt"
    SSLCertificateKeyFile "C:/xampp/apache/conf/ssl.key/server.key"
    <Directory "C:/xampp/htdocs/Develompent/codespace/public">
        Options All
    	AllowOverride All
    	Require all granted
    </Directory>
</VirtualHost>

Ip bisa diubah tinggal disesuaikan, untuk contoh itu ip laravel yang biasa memakai 127.0.0.1 kemudian untuk DocumentRoot “C:/xampp/htdocs/Develompent/codespace/public” direktori path nya disesuaikan dengan file anda yang ingin dibuat https. dan Directory “C:/xampp/htdocs/Develompent/codespace/public” juga sama tinggal disesuaikan. jika sudah diubah jangan lupa untuk save file nya.

Setelah itu buka aplikasi xampp jika sudah start apache nya kita stop dulu baru start lagi atau di restart apache xampp nya. lalu buka web browser kesayangan anda bisa google chrome, mozila, opera dll dan buka https://localhost atau klo saya buka https://codespace.testmaka akan menjadi secure.

jika ada kendala error bisa email ke [email protected] mungkin bisa saya bantu 🙂

Demikian selesai sudah tutorial dari nabil,  jangan sungkan – sungkan untuk bertanya ya dan jangan lupa tinggalkan komentar untuk kita bisa Sharing ilmu bareng – bareng. Sekian dan terima kasih. Salam Sobat Iltek🙂 .