next.js “无法找到资源”错误在kratos

zfycwa2u  于 2023-08-04  发布在  其他
关注(0)|答案(1)|浏览(148)

我是新来的Kratos,我想创建一个简单的身份验证系统使用Kratos,其中注册/登录将只与用户名和密码没有别的工作。
但是当我尝试POST寄存器的数据时,我得到这个错误。

{
    "error": {
        "code": 404,
        "status": "Not Found",
        "message": "Unable to locate the resource"
    }
}

字符串
我的next.js页面

"use client";
import { useEffect, useRef, useState } from "react";
import { useSearchParams } from "next/navigation";
import { Configuration, FrontendApi } from "@ory/client";
import { edgeConfig } from "@ory/integrations/next";

const ory = new FrontendApi(new Configuration(edgeConfig));

function getCsrfTokenFromApiResponse(response) {
  try {
    const csrfToken = response?.data?.ui?.nodes?.find(
      (node) => node.attributes?.name === "csrf_token"
    )?.attributes?.value;
    return csrfToken || null;
  } catch (error) {
    console.error("Error while parsing the API response:", error);
    return null;
  }
}

function getFlowIdFromApiResponse(response) {
  try {
    const flowId = response?.data?.id;
    return flowId || null;
  } catch (error) {
    console.error("Error while parsing the API response:", error);
    return null;
  }
}

export default function Register() {
  const searchParams = useSearchParams();
  console.log(" searchParams", searchParams?.getAll);
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const flow = useRef("");
  const csrfToken =  useRef("");

  useEffect(() => {
    const fetchFlow = async () => {
      const data = await ory.createBrowserRegistrationFlow();
      csrfToken.current = getCsrfTokenFromApiResponse(data);
      flow.current = getFlowIdFromApiResponse(data);
      console.log(data);
    };
    fetchFlow();
  }, []);

  const handleSubmit = async (event) => {
    event.preventDefault();

    var myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/json");
    myHeaders.append("X-CSRF-Token", csrfToken.current);

    var raw = JSON.stringify({
      method: "password",
      traits: {
        username,
      },
      password,
      csrf_token: csrfToken.current,
    });

    var requestOptions = {
      method: "POST",
      headers: myHeaders,
      body: raw,
      redirect: "follow",
    };

    fetch(
      `http://127.0.0.1:4433/self-service/registration?flow=${flow.current}`,
      requestOptions
    )
      .then((response) => response.text())
      .then((result) => console.log(result))
      .catch((error) => console.log("error", error));
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Username:
        <input
          type="text"
          value={username}
          onChange={(event) => setUsername(event.target.value)}
        />
      </label>
      <br />
      <label>
        Password:
        <input
          type="password"
          value={password}
          onChange={(event) => setPassword(event.target.value)}
        />
      </label>
      <br />
      <button type="submit">Register</button>
    </form>
  );
}


我的身份模式

{
  "$id": "https://schemas.ory.sh/presets/kratos/quickstart/username-password/identity.schema.json",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "title": "UsernamePassword",
  "type": "object",
  "properties": {
    "traits": {
      "type": "object",
      "properties": {
        "username": {
          "type": "string",
          "format": "string",
          "title": "username",
          "minLength": 8,
          "maxLength": 30,
          "ory.sh/kratos": {
            "credentials": {
              "password": {
                "identifier": true
              }
            }
          }
        }
      },
      "required": ["username"],
      "additionalProperties": false
    }
  }
}


kratos配置

version: v0.13.0

dsn: memory

serve:
  public:
    base_url: http://127.0.0.1:4433/
    cors:
      enabled: true
      allow_credentials: true
      allowed_origins:
        - http://127.0.0.1:4433
        - http://*127.0.0.1:4433
        - http://localhost:3000
        - http://*.localhost:3000
      allowed_methods:
        - POST
        - GET
        - PUT
        - PATCH
        - DELETE
      allowed_headers:
        - Authorization
        - Cookie
        - Content-Type
        - X-Session-Token
        - X-Csrf-Token
      exposed_headers:
        - Content-Type
        - Set-Cookie
      debug: true
  admin:
    base_url: http://0.0.0.0:4434/

selfservice:
  default_browser_return_url: http://localhost:3000/
  allowed_return_urls:
    - http://localhost:3000

  methods:
    password:
      enabled: true

  flows:
    login:
      ui_url: http://localhost:3000/auth/login

    registration:
      ui_url: http://localhost:3000/auth/registration

    settings:
      ui_url: http://localhost:3000/auth/settings

    recovery:
      enabled: false
      
log:
  level: debug

secrets:
  cookie:
    - PLEASE-CHANGE-ME-I-AM-VERY-INSECURE

identity:
  default_schema_id: default
  schemas:
    - id: default
      url: file:///etc/config/kratos/identity.schema.json

courier:
  smtp:
    connection_uri: smtps://test:test@mailslurper:1025/?skip_ssl_verify=true


任何人都可以建议是什么导致这个错误和任何替代或更好的方式来实现这样的系统。我正在使用nextjs.13,并根据Kratos文档添加了/API/.ory/[.. path].ts。谢谢!2谢谢!

evrscar2

evrscar21#

请确保在Ory Kratos配置中始终使用http://127.0.0.1、localhost或http://0.0.0.0作为URL。你不能把它们混在一起,你需要在任何地方使用其中一种。

相关问题