![見出し画像](https://assets.st-note.com/production/uploads/images/152356822/rectangle_large_type_2_88c665b8806353ad889feefa4f2eb40e.jpeg?width=1200)
Webアプリで電子カードを使った認証処理-3(No.062)
前回までに、NFCカードを読み込むアプリ(C#)と、Webアプリ(サーバ側)からWindowsで動作中のC#アプリにリクエストを出して、読み取るロジックまで紹介しましたが、今回は、実際に電子カードを利用したログイン認証機能の紹介です。
ログイン画面に新規にカード認証ボタンを追加します。
![](https://assets.st-note.com/img/1724905406830-1cNL11LTDZ.png)
カード認証時にも、セキュリティ面からログインIDを必要とする方法にしました。
実際に、ログインID未入力でカード認証をクリックすると
以下のようにエラーメッセージが表示されます。
![](https://assets.st-note.com/img/1724905677890-LefmDuWKJN.png)
ちなみにログインボタンを未入力でクリックすると
![](https://assets.st-note.com/img/1724905729104-6BUQQHhfy1.png)
ログインID以外にパスワードについてもエラーメッセージが表示されます。
カード認証のときは、パスワードチェックをしないロジックに変更しています。
ログイン時のカード認証の動作は、
ログインID情報とカード認証モードであることをサーバ側(PHP)に送信し、
PHP側でモードに応じて、パスワードチェックとするか、カード情報を読取り、DBに保存している対象ユーザIDのカード情報を照合して、一致した場合は、パスワード無しでもログイン処理するようにロジックを変更しています。
カード情報は、ユーザ情報にカード情報を追加し、ユーザ情報の編集や新規追加時に、カード情報を読み込んで、DBに保持するようにしています。
参考までにユーザ新規画面にはNFS情報の表示エリアとカード読出しボタンを追加しています。
![](https://assets.st-note.com/img/1724906035983-NtZA8e5YOB.png?width=1200)
更新画面にも同じようにNFC情報とカード読出しボタンを配置しています。
![](https://assets.st-note.com/img/1724906285047-LevOfxxSAD.png?width=1200)
データベースにNFCカードの情報を事前に保存していることで、同じカード以外を使ってログイン認証をしようとすると、エラーメッセージが表示されます。
![](https://assets.st-note.com/img/1724906433827-6nF1qfnmwC.png)
また、カード読み取りには、カードをリーダに置くタイミングを考慮して、10秒間はリトライするので、画面からみると時間がかかっていることから、マウスアイコンをくるくる回るアイコンに変更しています。
![](https://assets.st-note.com/img/1724906728051-4W8SdH6OLA.png)
ログイン画面の一部のソースを紹介します。
//カード認証ボタン押下時
// 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カード読み込みができればいいのですが、現状のブラウザ仕様では、できません。将来に期待しましょう。
この記事が気に入ったらサポートをしてみませんか?