JWT認証をハードコードされたフロントエンドのユーザー名とパスワード認証に追加することはできますか？

Question

私はコーディングが初めてですが、私は自分のウェブサイトで次のユーザー名とパスワード認証をコーディングしました。

<table> 
      <form name="login"> 
      <tr><th colspan="2">Login</th></tr> 
      <tr><td>Username:</td> 
      <td><input type="text" name="username"/></td></tr> 
      <tr><td>Password:</td> 
      <td><input type="password" name="password"/></td></tr> 
      <td colspan="2"><center><input type="button" onclick="check(this.form)" value="Submit"/> 
      <input type="reset" value="Reset"/></center></td> 
     </form> 
    </table> 
    <script> 
     function check(form) 
     { 
      if(form.username.value == "user1" && form.password.value == "user1") 
      { 
       location="index.html" 
      } 
       else 
       { 
        alert("Incorrect credentials.") 
       } 
     } 
    </script> 

これにJWT認証を追加することはできますか？

Answer 1

あなたはでなければなりません！

ソースコードの「ハードコーディング」の資格は一般的には悪い考えです。配信されたページソースを見てみることができる人は誰でも、あなたの信任状を見ることができます！

トークンを使用してこの種のチェックを実装することは意味がありません.JWT認証フローは、単純な文字列比較よりもはるかに複雑です。まず、認証サービスでトークンを要求し、クライアント側で何らかの方法で（ローカルストレージやCookieなど）格納し、ヘッダー内のすべての（HTTPS）要求で再送信する必要があります。トークンの妥当性も時間的に制限されているので、ハードコーディングが機能しなくても、それは永遠に機能しないので、リフレッシュ戦略も処理する必要があります。

いくつかのJWTフローの説明をご覧ください。おそらくhereまたはhereです。それは物事をより明確にするはずです。