비밀번호를 성공적으로 변경할 수 없는 Ory Kratos 설정 프로세스

Question

저는 Ory Kratos 설정 프로세스를 위해 나만의 사용자 인터페이스를 만들었습니다. 제가 겪고 있는 문제는 설정이 성공적으로 업데이트되었다는 메시지가 다시 왔지만 새 비밀번호가 반영되지 않아 계정을 성공적으로 복구하지 못했다는 것입니다. 다음은 Vue 3를 사용하여 UI를 렌더링하는 데 사용하는 코드 조각입니다.

// SettingsVue.vue
<템플릿>
  <div id="설정">
    <HomeTopbar :views="[]"

    <div class="설정-래퍼">
      <h1 class="poppins fs_3 fw_6">비밀번호를 복구하세요</h1>
      <OryFlow v-if="settingsFlow"
        :flow="설정흐름"
        title="로그인"
        form-id="설정-양식"
      />
    </div>
  </div>
</템플릿>

<스크립트 설정 lang="ts">
'vue'에서 { ref } 가져오기;

/* 오리 */
import { injectStrict } from '@/utils';
'@/plugins/ory'에서 { $ory }를 가져옵니다.
import { makeHandleGetFlowError } from '@/utils/flows';

/* 종류 */
'@ory/kratos-client'에서 가져오기 유형 { SelfServiceSettingsFlow };

/* 컴포저블 */
'vue-router'에서 import { useRoute, useRouter };

/* 구성요소 */
'@/comComponents/flows/OryFlow.vue'에서 OryFlow를 가져옵니다.
'@/comComponents/ui/HomeTopbar.vue'에서 HomeTopbar를 가져옵니다.

const ory = injectStrict($ory);
const 경로 = useRoute();
const 라우터 = useRouter();
const settingsFlow = ref<SelfServiceSettingsFlow | 정의되지 않음>();
const handlerGetFlowError = makeHandleGetFlowError(라우터);

// 흐름 매개변수가 있는지 확인
const { 흐름 } = Route.query;

const 초기화SelfServiceSettingsFlowForBrowsers = () =>
  오리
    .initializeSelfServiceSettingsFlowForBrowsers()
    .then((응답) => {
      settingsFlow.value = response.data;
      라우터.교체({
        쿼리: {
          흐름: response.data.id,
        },
      });
    })
    .catch(handleGetFlowError);

if (흐름 유형 !== '문자열') {
  // 경로에 흐름이 없으면
  // 로그인 흐름을 초기화해야 합니다.
  초기화SelfServiceSettingsFlowForBrowsers();
} 또 다른 {
  오리
    .getSelfServiceSettingsFlow(흐름)
    .then((응답) => {
      settingsFlow.value = response.data;
    })
    .catch(handleGetFlowError);
}
</스크립트>

<스타일 범위 lang="scss">
#설정 {
  너비: 100%;
  높이: 100%;

  .settings-래퍼 {
    여백: var(--space-5) 자동 0 자동;
    패딩: 0 var(--space-3);
    여백 상단: var(--space-4);
    너비: 300px;
  }
}
</스타일>

#OryFlow.vue
<템플릿>
  <div class="ory-flow">
    <form :id="formId" :action="flow.ui.action" :method="flow.ui.method">
      <OryUiNode v-for="flow.ui.nodes의 노드"
        :key="getNodeId(노드)"
        :id="getNodeId(노드)"
        :노드="노드"
        class="ui-node"
      />
    </양식>
    <div class="메시지" v-if="flow.ui.messages">
      <OryUiMessage v-for="flow.ui.messages의 메시지" :message="메시지" />
    </div>
  </div>
</템플릿>

<스크립트 설정 lang="ts">
가져오기 유형 {
  SelfService로그인 흐름,
  SelfService등록 흐름,
  SelfServiceRecoveryFlow,
  SelfServiceSettingsFlow,
  SelfServiceVerificationFlow,
} '@ory/kratos-client'에서;
'./OryUiNode.vue'에서 OryUiNode를 가져옵니다.
'./OryUiMessage.vue'에서 OryUiMessage를 가져옵니다.
import { getNodeId } from '@ory/integrations/ui';

정의Props<{
  흐름:
    | SelfService로그인 흐름
    | SelfService등록 흐름
    | SelfService복구 흐름
    | SelfService설정흐름
    | SelfServiceVerificationFlow;
  formId?: 문자열;
}>();
</스크립트>

<스타일 범위 lang="scss">
.ui-노드 + .ui-노드 {
  여백 상단: var(--space-2);
}

.메시지 {
  여백 상단: var(--space-2);
}
</스타일>

Answer 1

따라서 이 문제를 해결하는 것은 실제로 매우 간단하고 명백하며, 이는 Ory 팀이 만들고 유지 관리하는 React 셀프 서비스 UI의 소스 코드를 검토한 후 분명해졌습니다.

모든 UI 노드 그룹을 동일한 양식으로 함께 제출하면 CSRF 토큰 default组和另一个组上执行。在我的情况下，在成功处理profile组后，它忽略了password组。我遵循的解决方案基本上与我在前一段提到的存储库中提供的解决方案相同。实现一个过滤机制，允许您使用两个单独的表单，从而在提交表单时分离这些值。请记住，您必须始终提交default이 포함되어 있으므로 그룹에만 포함됩니다.

내 문제를 해결한 업데이트된 코드는 다음과 같습니다.

먼저 노드 필터링을 위한 :only 속성에 대한 지원을 추가합니다.

으아악

다음으로, 노드 그룹만 필터링하는 양식에서 이 새로운 속성을 활용하세요password和default。您可以使用相同的方法在另一个表单中过滤profile和default.

으아악