[ Home ]
back

htmx Auth (簡易的認証)

id: 126, 2024-08-24

概要:

htmxで。簡易的な認証の例になります。

  • .envから、パスワード等から読み込む方法です。
  • bundler は、Viteを使用する例です。

[ 作成日: 2024/08/24 ]

構成

  • htmx
  • Vite:5.2
  • typescript: 5.4
  • express
  • tailwindcss

作成したコード

  • example/simple_auth/src/pages/Login.ts
    <form
    hx-post="/api/common/user_login"
    hx-trigger="submit"
    hx-target="#resulte_form1"
    hx-on--before-request=""
    hx-on--after-request="Login.afterPostForm1()"
    >
      <label class="text-2xl font-bold my-2">Email:</label>
      <input type="text" id="email" name="email"
      class="input_text" /> 
      <hr class="my-2" />
      <label class="text-2xl font-bold my-2">Password:</label>
      <input type="text" id="password" name="password"
      class="input_text" /> 
      <hr class="my-2" />
      <button type="submit" class="btn btn-purple">Login</button>
    </form>
    <hr />
    <h3 id="resulte_form1" class="d-none"></h3>
  • example/simple_auth/src/routes/commonRouter.ts
  • ログインのエンドポイントに、POST送信します。
router.post("/user_login", async function(req: any, res: any) {
  const resObj = {ret: 500, data: {}, message: "", config: {} };
  try {
console.log(req.body);
    resObj.config = {appName: import.meta.env.VITE_APP_NAME};
    const email = import.meta.env.VITE_AUTH_USER;
    const password = import.meta.env.VITE_AUTH_PASSWORD;
    console.log("email=", email);
    console.log("password=", password);
    if(
        (req.body.email === email) && (req.body.password === password)
    ){
      //@ts-ignore
      resObj.ret = 200;
      return res.json(resObj);
    }
//console.log(data);
    //@ts-ignore
    return res.json(resObj);
  } catch (error) {
    console.error(error);
    res.sendStatus(500);
  }
});