4
3

More than 3 years have passed since last update.

ブラウザでnfcpyを使ってNFCタグのIDmを表示してみる

Last updated at Posted at 2020-04-07

はじめに

PaSoRiでNFCタグを読み取ってブラウザに表示するというのは他の方もやっていらっしゃるのですが(WebUSBでFeliCaの一意なIDであるIDmを読む)、ただ自分の環境ではエラーが起きて使えなかったので、勉強も兼ねて別の方法で試してみることにしました。
※今回のこのNFCタグの読み取りはUbuntu環境で行いました。

準備

nfcpyまでの準備はこちらの記事を参考にしました(Python で PaSoRiのセットアップ と FeliCaの読み取り)
pythonのNFCタグ読み取り用の簡潔なコードも準備します
ファイル名は適当です。

nf.py
import nfc
import binascii
from nfc.clf import RemoteTarget

try: 
    clf = nfc.ContactlessFrontend('usb')
    tag = clf.connect(rdwr={
        'on-connect': lambda tag: False
    })
    idm = binascii.hexlify(tag.idm)                                                                        
    print(idm)   

except AttributeError:
    print("error")
    exit()

実行すると

$python nf.py
>>010104124a1a4f0f

こんな感じでIDmのみ返してくれる。

コード

メインのページはjQueryを使いました。jQueryからPHPを呼び出して、さらにPHPから上で書いたpythonのコードを呼び出します。

jQueryは初めて使うので、ほとんどの部分はこちらの方の記事を参考にさせていただきました。(【PHP】Ajaxで非同期通信を行う方法。)

main.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>カード読み取り</title>
</head>
<body> 
  <button id="button">読み取り</button>
  <div><br></div>
  <div id="result">IDmをここに表示します</div>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script>

$(function(){

    $("#button").click(function(event){
      $.ajax({
        url: " main.php",
        dataType : "text",
        async: true,

      }).done(function(data){
        $("#result").text("カードのIDmは"+data+"です");

      })
    });
  });

  </script>
</body>
</html>

次は呼び出した先のPHP文

main.php
<?php
$command="sudo -S  python nfc.py";
exec($command,$output);
$idm=$output[0];            
print $idm;        
exit();
?>

ここで注意なのがsudo権限が必要なことです。(本当はあまりよろしくないみたいですが…)
sudo権限なしではpythonのclf = nfc.ContactlessFrontend('usb')の部分でエラーが起きてしまい、値を取得することが出来ません。

apacheユーザー(www-data)に権限を付与するためsudo visudoで設定ファイルを開き、

www-data ALL=(root) NOPASSWD:ALL

を書き加えます。

追記

さすがにapacheユーザーにパスワード認証なしの権限を付与するのはまずいと思ったので修正します。
sudo visudoでsudo権限の設定ファイルを開き、上記の内容を下記に修正します。

www-data ALL=(root) ALL

で、Pythonのnfc.pyを呼び出すPHPのコード部分を以下のように修正します。

main.php
$command=" echo 'www-dataのパスワード' | sudo -S python ../../nf.py";

パスワードが設定されていない場合、sudo passwd www-dataでパスワードを設定できます。

追記終わり

これで完成です。
Screenshot from 2020-04-07 16-18-00.png
ボタンを押してカードをPaSoRiにかざすと…
Screenshot from 2020-04-07 16-18-15.png
読み取れた!!

たぶんこれはいいやり方ではないと思うのですが、今現在の自分の力量これが限界です…
詳しい方がもっとうまいやり方を見つけてくれるはず…!

おわりに

なんでこんなにまどろっこしいことをしたかというと、PHPを勉強中だったからなんとしてもPHPを使いたかったからという…
まあ、これを使ってまた何か作れればいいかなと思っています。

4
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
3