csrftoken完成、会員登録apiもうすぐ完成

fresh.gen.ts

@@ -8,7 +8,7 @@ import * as $about from "./routes/about.tsx";
 import * as $api_logins_register from "./routes/api/logins/register.js";
 import * as $api_oumu from "./routes/api/oumu.ts";
 import * as $api_tako from "./routes/api/tako.ts";
-import * as $api_token from "./routes/api/token.ts";
+import * as $api_token from "./routes/api/token.js";
 import * as $button from "./routes/button.tsx";
 import * as $greet_name_ from "./routes/greet/[name].tsx";
 import * as $index from "./routes/index.tsx";
@@ -37,7 +37,7 @@ const manifest = {
     "./routes/api/logins/register.js": $api_logins_register,
     "./routes/api/oumu.ts": $api_oumu,
     "./routes/api/tako.ts": $api_tako,
-    "./routes/api/token.ts": $api_token,
+    "./routes/api/token.js": $api_token,
     "./routes/button.tsx": $button,
     "./routes/greet/[name].tsx": $greet_name_,
     "./routes/index.tsx": $index,

islands/RegisterForm.tsx

@@ -19,42 +19,26 @@ export default function RegisterForm({ text, color,tako }: { text: string, color
     const handleEmailChange = (event: h.JSX.TargetedEvent<HTMLInputElement>) => {
         setEmail(event.currentTarget.value);
     };
-    const handleSubmit = (event: JSX.TargetedEvent<HTMLFormElement, Event>) => {
+    const handleSubmit = async (event: JSX.TargetedEvent<HTMLFormElement, Event>) => {
         event.preventDefault();
         alert(email)
+        const token = await fetch("http://localhost:8000/api/token?origin=http://localhost:8000")
+        const csrftoken = await token.json();
         const data = {
-            requirements: "temp_register",
-            userName: username,
-            mail: email,
+          requirements: "temp_register",
+          userName: username,
+          mail: email,
+          csrftoken: csrftoken.csrftoken
         };
-        const response = fetch("/api/logins/register", {
+        const res = await fetch("/api/logins/register", {
             method: "POST",
             headers: {
                 "Content-Type": "application/json",
             },
             body: JSON.stringify(data),
         })
-            .then((response) => response.json())
-            .then((data) => {
-                console.log(data.status);
-                if (data.status === "success") {
-                  alert("成功")
-                    //const container = document.getElementById("register-form");
-                    /*
-                    if (container) {
-                      //
-                    } else {
-                        console.error("Container element not found");
-                    }*/
-                } else if (data.status === "error") {
-                  alert("error")
-                } else {
-                  alert("error")
-                }
-            })
-            .catch((error) => {
-                alert("error")
-            });
+        const response = await res.json()
+        //レスポンス届いてからの処理
     };
 return <>
     <button class={classs} onClick={handleButtonClick}>

routes/api/logins/register.js

@@ -1,11 +1,44 @@
+import { isMail, isUserDuplication, isMailDuplication, generateSalt, hashPassword, sendMail} from "../../../util/takoFunction.ts";
+
 export const handler = {
   async POST(req) {
-      //const data = await req.json();
-      const data = {
-        "status": "success"
+      const data = await req.json();
+      const UserName = data.username;
+      const email = data.email;
+      const CsrfToken = data.csrftoken;
+      const error = {
+        "status": "error"
+      }
+      if(true) {
+        //
+      }
+      if(!isMail(email)) {
+        return new Response(JSON.stringify(error), {
+          headers: { "Content-Type": "application/json" },
+        });
+      }
+      if(!isMailDuplication(email)) {
+        return new Response(JSON.stringify(error), {
+          headers: { "Content-Type": "application/json" },
+        });
+      }
+      if(!isUserDuplication) {
+        return new Response(JSON.stringify(error), {
+          headers: { "Content-Type": "application/json" },
+        });
+      }
+      try {
+        //sha256生成
+        const hash = "ううえええええ"
+        result = client("くえりいいいいいいいいい")
+        sendMail(email,"本登録を完了してください",`https://takos.jp/register?key=${hash}`)
+        return new Response(JSON.stringify(data), {
+          headers: { "Content-Type": "application/json" },
+        });
+      } catch (error) {
+        return new Response(JSON.stringify({"status": "error"}), {
+          headers: { "Content-Type": "application/json" },
+        });
       }
-      return new Response(JSON.stringify(data), {
-        headers: { "Content-Type": "application/json" },
-      });
   }
 };

routes/api/tako.ts

@@ -41,7 +41,7 @@ async function temp_register(request) {
   if (!isMail(request.mail)) {
     return { "status": "error", "message": "メールアドレスが不正です" };
   }
-  
+
   if (await isMailDuplication(request.mail)) {
     return { "status": "error", "message": "すでにそのメールアドレスは使われています" };
   }

routes/api/token.js

@@ -0,0 +1,49 @@
+import { envRoader} from "../../util/takoFunction.ts";
+import { load } from "https://deno.land/std@0.204.0/dotenv/mod.ts";
+import { Client } from "https://deno.land/x/mysql@v2.12.1/mod.ts";
+const env = await load();
+const hostname = env["hostname"];
+const username = env["username"];
+const db = env["db"];
+const password = env["password"];
+const client = await new Client().connect({
+  hostname,
+  username,
+  db,
+  password,
+});
+
+export const handler = {
+  async GET(req) {
+    const url = new URL(req.url);
+    const origin = url.searchParams.get("origin") || "";
+    const allows = envRoader("origin")
+    const allow = allows.split(',')
+    if(allow.includes(origin)){
+      const csrftoken = generateRandomString(128)
+      const result = await client.execute(`INSERT INTO csrftoken VALUES (default,default,"${csrftoken}");`)
+      return new Response(JSON.stringify({"csrftoken": csrftoken}), {
+        headers: { "Content-Type": "application/json",
+                    "Access-Control-Allow-Origin": origin
+        },
+      }
+      );
+    }else {
+      return new Response(JSON.stringify({"csrftoken": "This origin is not allowed"}), {
+        headers: { "Content-Type": "application/json",
+                    "Access-Control-Allow-Origin": origin
+        },
+      }
+      );
+    }
+  }
+};
+function generateRandomString(length) {
+  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  let result = '';
+  for (let i = 0; i < length; i++) {
+    const randomIndex = Math.floor(Math.random() * characters.length);
+    result += characters.charAt(randomIndex);
+  }
+  return result;
+}

util/makedb.js

@@ -41,9 +41,9 @@ let queries = {
         FOREIGN KEY (user_id) REFERENCES users(id)
     );`,
     csrftoken:`CREATE TABLE csrftoken (
-        kye VARCHAR(255) NOT NULL,
+        kye INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
         created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
-        sessionid VARCHAR(255) NOT NULL
+        csrftoken VARCHAR(255) NOT NULL
     );`,
 }
 export function makeDB() {

util/takoFunction.ts

@@ -13,6 +13,10 @@ const smtp_host = env["smtp_host"];
 const smtp_port = env["smtp_port"];
 const smtp_auth_user = env["smtp_username"];
 const smtp_auth_pass = env["smtp_password"];
+function envRoader(value: string) {
+  const result = env[value]
+  return result
+}
 //const smtp_ssl = env["tls"];
 const MAIL_SETTINGS = {
   smtp_host,
@@ -94,4 +98,4 @@ async function hashPassword(password: string, salt: string): Promise<string> {
     password: string;
     userName: string;
   }
-export { client,sql, isMail, isUserDuplication, isMailDuplication, isSavePassword, sendMail, generateSalt, hashPassword};  
+export { envRoader,client,sql, isMail, isUserDuplication, isMailDuplication, isSavePassword, sendMail, generateSalt, hashPassword,hostname,username,db,password};