PHP上でのJSON形式のDB問合せ結果送信

Question

当初の問合せ

実現したいこと

• html上のformにuser_idとpasswordを入力し、submitする
• JS上でsubmitを検知し、入力されたuser_idとpasswordをfetchを使いpost形式でサーバーに送信する
• PHPで、postされたuser_idとpasswordがデータベースに存在するか問い合わせ、その結果をjson形式でJSに返す
• JS上でjsonでログイン結果を受け取り、その結果をconsole.logで表示する

前提

html/CSSとJavaScript、PHPを使ったWebサービスを構築しています。
上記構成にてログイン機能を実装した後、デバッグしたところ以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

caught (in promise) SyntaxError: Unexpected token 'F', "File not f"... is not valid JSON
P

該当のソースコード

<form class="login_form_area">
  <p class="login_form_key">ID</p>
  <input class="login_form_id" type="id" name="user_id" placeholder="ID">
  <p class="login_form_key">パスワード</p>
  <input class="login_form_pw" type="password" name="password" placeholder="Password">
  <button id="button" type="submit">ログインする</button>
</form>

document.querySelector('form').addEventListener('submit', e => {
  const user_id = document.querySelector('[name="user_id"]');
  const password = document.querySelector('[name="password"]');
  const regex = /^([a-zA-Z0-9]{5,})$/;

  e.preventDefault();

    if (user_id.value == '' || password.value === '') {
      console.log( '必要事項を入力してください。');
    } else {
      fetch('?action=login', {
        method: 'POST',
        body: new URLSearchParams({
          user_id: user_id.value,
          password: password.value,
        }),
      })
      .then(response => response.json())
      .then(json => {
        if (json.result === 1) {
          console.log('ログイン完了');
        } else if (json.result === 0) {
          console.log('ログイン失敗');
        }
      });
    }
});

public function processPost()
{
  if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $action = filter_input(INPUT_GET, 'action');
    
    switch ($action) {
      case 'login':
        $user_id = trim(filter_input(INPUT_POST, 'user_id'));
        $password = trim(filter_input(INPUT_POST, 'password'));

        $stmt = $this->pdo->prepare("SELECT password FROM users WHERE user_id = :user_id");
        $stmt->bindValue('user_id', $user_id, \PDO::PARAM_STR);
        $stmt->execute();
        $row = $stmt->fetch(PDO::FETCH_ASSOC);

        if (!$row) {
          $result = 0;
        }

        $hashed_password = $row['password'];

        if (password_verify($password, $hashed_password)) {
         $result = 1;
        } else {
          $result = 0;
        }
        header('Content-type: application/json');
        echo json_encode(['result' => $result]);
          break;
        default:
          exit;
      }
      exit;
    }
  }
}

試したこと

以下の部分を

        $row = $stmt->fetch(PDO::FETCH_ASSOC);

        if (!$row) {
          $result = 0;
        }

        $hashed_password = $row['password'];

        if (password_verify($password, $hashed_password)) {
         $result = 1;
        } else {
          $result = 0;
        }

以下に書き換えると、（ログイン認証はできないものの）正しい形式のJSONがJavaScriptにわたり、コンソールに「ログイン完了」が表示される。

        $result = 1;

しかし以下に書き換えると、上記と同じエラーが発生する。
そのため"$row = $stmt->fetch(PDO::FETCH_ASSOC);"の部分に問題があると考えられる。

        $row = $stmt->fetch(PDO::FETCH_ASSOC);

        $result = 1;

修正

修正内容

PHP内のprocessPost()関数を以下のようにtry{} catch{}を使い、エラーハンドリングするよう修正しました。

public function processPost()
{
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$action = filter_input(INPUT_GET, 'action');

switch ($action) {
case 'login':
$user_id = trim(filter_input(INPUT_POST, 'user_id'));
$password = trim(filter_input(INPUT_POST, 'password'));
try {

$stmt = $this->pdo->prepare("SELECT password FROM users WHERE user_id = :user_id");
$stmt->bindValue('user_id', $user_id, \PDO::PARAM_STR);
$stmt->execute();
$row = $stmt->fetch(PDO::FETCH_ASSOC);

if (!$row) {
$result = 0;
}

$hashed_password = $row['password'];

if (password_verify($password, $hashed_password)) {
$result = 1;
} else {
$result = 0;
}
} catch (\Exception $e) {
$result = $e->getMessage();
}
header('Content-type: application/json');
echo json_encode(['result' => $result]);
break;
default:
exit;
}
exit;
}
}

結果

依然として同じエラーが発生しております。

Tere was a problem with the fetch operation: SyntaxError: Unexpected token 'F', "File not f"... is not valid JSON

その他の情報

ChatGPTで質問をしたところ、以下のようなコメントが返ってきました。
おそらくクエリが正しく実行できておらず、エラーが返ってきていることが原因ではないかと考えておりました。ただ、今回の修正でクエリをtry句内に入れても例外処理ができなかったので、別のところに原因があるような気もしております。

エラーメッセージ「caught (in promise) SyntaxError: Unexpected token 'F', "File not f"... is not valid JSON」から、JSONの形式が正しくないことが原因であると推測されます。また、エラーの内容から、JSONの開始位置が「F」であることがわかります。
このようなエラーが発生する理由は、PHPの出力に余分な文字列が含まれている場合があります。例えば、PHPの処理中にエラーメッセージが出力された場合などです。

Comments

[m.ts10806]

PHP側でエラーハンドリングした結果も追記してください
あとはエラーログの確認

[joe3]

ご回答ありがとうございます。
当方初学者のため、適切にエラーハンドリングできていないかもしれないのですが、いただいたコメントに基づき、修正させていただいた結果を掲載させていただきます。

Answer 1

PHPの部分はパスワードの整合の部分は割愛しますが以下

<?PHP
$action=filter_input(INPUT_POST,"action");
$user_id=filter_input(INPUT_POST,"user_id");
if(empty($user_id)) $user_id=null;
$password=filter_input(INPUT_POST,"password");
if(empty($password)) $password=null;
if($action=="login"){
  $result=1;//省略
  print json_encode(['result' => $result]);
  exit;
}
?>
<script>
document.addEventListener('submit',e=>{
  if(e.target.matches('.login_form_area')){
    const body=new FormData(e.target);
    body.append('action','login');
    const method='post';
    e.preventDefault();
    fetch('?',{body,method}).then(res=>res.json()).then(console.log);
  }
});
</script>
<form class="login_form_area">
  <p>ID</p>
  <input name="user_id">
  <p>パスワード</p>
  <input type="password" name="password">
  <button id="button" type="submit">ログインする</button>
</form>

POST/GETの併用はバグの温床になるのでパラメータの受け渡しはどちらかに統合した方がよいでしょう

Comments

[yambejp]

ちなみにエラー自体はFile not Found的なものが返されているせいだとおもいます
fetch(・・・).then(response => response.json())
↓↓↓
fetch(・・・).then(response => response.text()).then(console.log);
でデバッグできると思います

[joe3]

ご回答ありがとうございます！
いただいた方法でデバッグしたところ以下のエラーが表示されました。

File not found: /work/app/PDO.php

その結果、以下のスクリプトのPDOの前の"\"が不足していることがわかりました。
こちらを追加したところ、問題なく処理を実行することができるようになりました。

$row = $stmt->fetch(\PDO::FETCH_ASSOC);

本件の対応がわからず1週間ほど頭を悩ませていましたが、おかげさまで解決できました。
誠にありがとうございます。