Webアプリで電子カードを使った認証処理-3(No.062)

前回までに、NFCカードを読み込むアプリ（C＃）と、Webアプリ（サーバ側）からWindowsで動作中のC#アプリにリクエストを出して、読み取るロジックまで紹介しましたが、今回は、実際に電子カードを利用したログイン認証機能の紹介です。
ログイン画面に新規にカード認証ボタンを追加します。

カード認証時にも、セキュリティ面からログインIDを必要とする方法にしました。
実際に、ログインID未入力でカード認証をクリックすると
以下のようにエラーメッセージが表示されます。

ちなみにログインボタンを未入力でクリックすると

ログインID以外にパスワードについてもエラーメッセージが表示されます。
カード認証のときは、パスワードチェックをしないロジックに変更しています。
ログイン時のカード認証の動作は、
ログインID情報とカード認証モードであることをサーバ側（PHP)に送信し、
PHP側でモードに応じて、パスワードチェックとするか、カード情報を読取り、DBに保存している対象ユーザIDのカード情報を照合して、一致した場合は、パスワード無しでもログイン処理するようにロジックを変更しています。

カード情報は、ユーザ情報にカード情報を追加し、ユーザ情報の編集や新規追加時に、カード情報を読み込んで、ＤＢに保持するようにしています。

参考までにユーザ新規画面にはNFS情報の表示エリアとカード読出しボタンを追加しています。

更新画面にも同じようにNFC情報とカード読出しボタンを配置しています。

データベースにNFCカードの情報を事前に保存していることで、同じカード以外を使ってログイン認証をしようとすると、エラーメッセージが表示されます。

また、カード読み取りには、カードをリーダに置くタイミングを考慮して、10秒間はリトライするので、画面からみると時間がかかっていることから、マウスアイコンをくるくる回るアイコンに変更しています。

ログイン画面の一部のソースを紹介します。

//カード認証ボタン押下時
//	login_winmode:""or "group"
function nfc_btn_exec(login_winmode){
  	if ($$("form1").validate()){
		//normal
      	$$("userclient").setValue(check_client_device($$("selectmode").getValue()));
 		var login_mode = $$("btn01").getValue();	//ログイン or 登録
		var selectmode = $$("selectmode").getValue();
		var userclient = $$("userclient").getValue();
		var userid = $$("userid").getValue().trim();
		$$("userid").config.readonly = false;	//readonly解除
		$$("userid").refresh();
		var user_type = 1;
		$$("form1").showProgress({hide:false});
		webix.delay(function(){
			if(login_check(login_winmode)== 0){
				$$("form1").showProgress({hide:true});
				menu_search_and_jump(loginmode); //ログイン認証できたらメニューを検索して画面遷移
			}
			else{
				$$("form1").showProgress({hide:true});
			}
		},null, null, 0);
	}
}


function login_check(login_winmode){
	var ecrypt_password = conv_ecrypt_pwd($$("password").getValue(""));
	$$("ecrypt_password").setValue(ecrypt_password);
	var xhr =webix.ajax().sync().post("<?php  echo SUB_FOLDER; ?>/rest_api/login/webix_login_check.php", $$("form1").getValues());
	var resp =  JSON.parse(xhr.responseText);
	if(resp.resp == "ok"){
		$$("username").setValue(resp.username);
		my_local_session = $$("form1").getValues();
		update_mylocal_session(my_local_session,resp,login_winmode);
		if(!login_logging()) return 0;
	}
	else{
		if(resp.error_code == -1){
			$$("mess01").setValue("<span style='color : red;'>ログインIDが正しくありません</span>");
			webix.message({type:"error",text:"ログインIDが正しくありません"});
		}
		else if(resp.error_code == -3){
			$$("mess01").setValue("<span style='color : red;'>パスワードが正しくありません。(-3)</span>");
			webix.message({type:"error",text:"パスワードが正しくありません。(-3)"});
		}
		else if(resp.error_code == -10){
			$$("mess01").setValue("<span style='color : red;'>カードが正しくありません。(-10)</span>");
			webix.message({type:"error",text:"カードが正しくありません。(-10)"});
		}
		return 3;
	}
	return 0;
}

サーバ側は、/rest_api/login/webix_login_check.phpの中でパスワード認証かカード認証モードかを判断して、カード認証モードのときは、カード情報を読み出し（curlコマンドでWindowsPCに問い合わせ）、DB上のデータと照合して判断します。
PHPソースコードの一部を紹介します。

if($loginmode == ""){
	if($ecrypt_password == $userlists[0]["ecrypt_password"]){
		$resp ="ok";
		$error_code = 0;
	}
	else{
		$resp ="ng";
    	$error_code = -3;
	}
}
else if($loginmode == "nfc_mode"){
	$nfc_svr_url = 'http://'.$NFC_serve_ip.':'.$NFC_serve_port.'/';
	//カードリーダ読取り
	error_log($logheader.' nfc_svr_url=:'.$nfc_svr_url);
	$rs = Commonlib_sendGetRequest($logheader,$nfc_svr_url);
	if($rs["resp"] != "ok"){
		error_log($logheader.'  sendGetRequest error rs='.$rs["error_code"]);
		$resp = "ng";
		$error_code = $rs["error_code"];
	}
	else{
		$nfc_info = $rs["info"];
		if($nfc_info == $val["nfc_info"] && $val["nfc_info"]!= ""){
			$resp = "ok";
			$error_code = 0;
		}
		else{
			$resp ="ng";
    		$error_code = -10;
		}
	}
}

以上で、ICカードを使ったログイン認証が実装できますが、カードリーダが接続されたWindowsPCがログイン画面操作用のPCの近くにないと使いにくい方式です。
スマホ（iOS)でjavascriptによるNFCカード読み込みができればいいのですが、現状のブラウザ仕様では、できません。将来に期待しましょう。