Yii2: Create Lock Screen Web Application with Javascript

lockscreen“Meniru” gaya windows.. ketika beberapa saat user tidak melakukan aktifitas pada aplikasi,
maka untuk alasan keamanan, secara otomatis sistem akan logout. Hal ini untuk mencegah
akses oleh user yang tidak berwenang.

Okey kita dapat dengan mudah membuatnya dengan menggunakan Javascript.. intinya kita deteksi adanya activity melalui
pergerakan mouse, click, touch dll..

var autoTimer;
window.onload = resetTimer;
window.onmousemove = resetTimer;
window.onmousedown = resetTimer; // catches touchscreen presses
window.onclick = resetTimer;     // catches touchpad clicks
window.onscroll = resetTimer;    // catches scrolling with arrow keys
window.onkeypress = resetTimer;

function doAnything() {
	your code here
}

function resetTimer() {
	clearTimeout(autoTimer);
	autoLockTimer = setTimeout(doAnything, 10000);  // time is in milliseconds
}

Pada fungsi doAnything kita bisa menambahkan script untuk redirect URL, misal dalam hal ini ke action logout.
Nah tantangannya adalah gimana caranya membuat tidak hanya auto logout, namun lebih dari itu yaitu membuat
fungsi auto lock.. nah.. apa bedanya… silahkan lihat link berikut..

http://192.241.236.31/themes/preview/smartadmin/1.4.1/ajaxversion/lock.html

Oke gimana cara membuatnya.. langsung aja yah..

1) Pada site controller, buat action lockScreen, kira2 begini

	public function actionLockScreen()
    {
		// save current username	
		$username = Yii::$app->user->identity->username;
		
		// force logout		
        Yii::$app->user->logout();
		
		// render form lockscreen
		$model = new LoginForm(); 
		$model->username = $username;	//set default value	
		return $this->render('lockScreen', [
			'model' => $model,
		]);     
    }

2) Bikin tampilan form lockScreen.php.. save as aja dari form login.. \view\site\login.php

<?php $form = ActiveForm::begin([
	'id' => 'login-form',
	'action' => ['site/login'],
]); ?>
	<?php	
	echo Html::activeHiddenInput($model, 'username');
	?>
	<h1><?= $model->username ?></h1>
	<?= $form->field($model, 'password')->passwordInput() ?>
	<?= $form->field($model, 'rememberMe')->checkbox() ?>
	<div class="form-group">
		<?= Html::submitButton('Login', ['class' => 'btn btn-primary', 'name' => 'login-button']) ?>
	</div>
	<div style="color:#999;margin:1em 0">
		Logged as someone else ? <?= Html::a('click here', ['site/login']) ?>.
	</div>						
<?php ActiveForm::end(); ?>

3) Bikin trigger.. kapan action lockScreen ini dipanggil, taruh aja kode JS diatas pada \views\layouts\main.php, karena file ini
selalu dipanggil pada setiap request aplikasi..

<?php
if (!Yii::$app->user->isGuest) {
	$this->registerJs("
	
		var autoLockTimer;
		window.onload = resetTimer;
		window.onmousemove = resetTimer;
		window.onmousedown = resetTimer; // catches touchscreen presses
		window.onclick = resetTimer;     // catches touchpad clicks
		window.onscroll = resetTimer;    // catches scrolling with arrow keys
		window.onkeypress = resetTimer;

		function lockScreen() {
			window.location.href = '".\yii\helpers\Url::to(['site/lock-screen'])."';
		}

		function resetTimer() {
			clearTimeout(autoLockTimer);
			autoLockTimer = setTimeout(lockScreen, 10000);  // time is in milliseconds
		}
	");
}
?>

Selesai.. ciyus cuman gitu doang… nah tiap 10 detik gak ada aktifitas akan langsung lockScreen..
Implementasinya ya jangan 10 detik ya… 5 menit lah minimal.. atau terserah Anda..

Thanks to Ega Wachid and om Surya Sheilendra

3 Comments
  1. Kang Agus
  2. sewa genset bandung
  3. philips

Leave a Reply

Your email address will not be published. Required fields are marked *