Proses persediaan Ory Kratos di mana kata laluan tidak berjaya ditukar

Question

Saya mencipta antara muka pengguna saya sendiri untuk proses persediaan Ory Kratos. Masalah yang saya hadapi ialah walaupun mesej kembali bahawa tetapan saya telah berjaya dikemas kini, kata laluan baharu saya tidak ditunjukkan dan saya tidak berjaya memulihkan akaun saya. Di bawah ialah coretan kod yang saya gunakan untuk memaparkan UI menggunakan Vue 3.

// SettingsVue.vue



import { ref } daripada 'vue';

/* ory */
import { injectStrict } daripada '@/utils';
import { $ory } daripada '@/plugins/ory';
import { makeHandleGetFlowError } daripada '@/utils/flows';

/* jenis */
jenis import { SelfServiceSettingsFlow } daripada '@ory/kratos-client';

/* boleh digubah */
import { useRoute, useRouter } daripada 'vue-router';

/* komponen */
import OryFlow daripada '@/components/flows/OryFlow.vue';
import HomeTopbar daripada '@/components/ui/HomeTopbar.vue';

const ory = injectStrict($ory);
laluan const = useRoute();
penghala const = useRouter();
const settingsFlow = ref();
const handleGetFlowError = makeHandleGetFlowError(router);

// semak sama ada kita mempunyai param aliran
const { flow } = route.query;

const initializeSelfServiceSettingsFlowForBrowsers = () =>
  ory
    .initializeSelfServiceSettingsFlowForBrowsers()
    .then((respons) => {
      settingsFlow.value = response.data;
      router.replace({
        pertanyaan: {
          aliran: response.data.id,
        },
      });
    })
    .catch(handleGetFlowError);

jika (jenis aliran !== 'rentetan') {
  // jika tiada aliran dalam laluan kami,
  // kita perlu memulakan aliran log masuk kita
  initializeSelfServiceSettingsFlowForBrowsers();
} lain {
  ory
    .getSelfServiceSettingsFlow(flow)
    .then((respons) => {
      settingsFlow.value = response.data;
    })
    .catch(handleGetFlowError);
}





#OryFlow.vue



jenis import {
  SelfServiceLoginFlow,
  SelfServiceRegistrationFlow,
  SelfServiceRecoveryFlow,
  SelfServiceSettingsFlow,
  SelfServiceVerificationFlow,
} daripada '@ory/kratos-client';
import OryUiNode daripada './OryUiNode.vue';
import OryUiMessage daripada './OryUiMessage.vue';
import { getNodeId } daripada '@ory/integrations/ui';

defineProps<{
  aliran:
    | SelfServiceLoginFlow
    | SelfServiceRegistrationFlow
    | SelfServiceRecoveryFlow
    | SelfServiceSettingsFlow
    | SelfServiceVerificationFlow;
  formId?: string;
}>();

Answer 1

Jadi menyelesaikan masalah ini sebenarnya agak mudah dan jelas, yang menjadi jelas selepas saya menyemak kod sumber React Self-Service UI yang dibuat dan diselenggara oleh pasukan Ory.

Jika anda menyerahkan semua kumpulan nod UI bersama-sama ke dalam bentuk yang sama, ia hanya akan berada dalam kumpulan default组和另一个组上执行。在我的情况下，在成功处理profile组后，它忽略了password组。我遵循的解决方案基本上与我在前一段提到的存储库中提供的解决方案相同。实现一个过滤机制，允许您使用两个单独的表单，从而在提交表单时分离这些值。请记住，您必须始终提交default kerana ia termasuk token CSRF anda .

Berikut ialah kod dikemas kini yang menyelesaikan masalah saya:

Pertama, tambah sokongan untuk atribut :only untuk menapis nod:

// OryFlow.vue现在支持通过'only'属性进行过滤
<template>
  <div class="ory-flow">
    <form :id="formId"
      :action="flow.ui.action"
      :method="flow.ui.method"
    >
      <OryUiNode v-for="node in nodes"
        :id="getNodeId(node)"
        :key="getNodeId(node)"
        :node="node"
        class="ui-node"
      />
    </form>
    <div v-if="flow.ui.messages"
      class="messages"
    >
      <OryUiMessage v-for="message in flow.ui.messages"
        :key="message.id"
        :message="message"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import type {
  SelfServiceLoginFlow,
  SelfServiceRegistrationFlow,
  SelfServiceRecoveryFlow,
  SelfServiceSettingsFlow,
  SelfServiceVerificationFlow,
} from '@ory/kratos-client';
import OryUiNode from './OryUiNode.vue';
import OryUiMessage from './OryUiMessage.vue';
import { getNodeId } from '@ory/integrations/ui';
import { computed, toRefs } from 'vue';

const props = defineProps<{
  flow:
    | SelfServiceLoginFlow
    | SelfServiceRegistrationFlow
    | SelfServiceRecoveryFlow
    | SelfServiceSettingsFlow
    | SelfServiceVerificationFlow;
  formId?: string;
  only?: string | string[];
}>();

const { flow, only } = toRefs(props);

const nodes = computed(() => {
  if (!only?.value) {
    return flow.value.ui.nodes;
  }

  const onlyArr: string[] = Array.isArray(only.value) ? only.value : [only.value];
  const onlyMap = onlyArr.reduce((acc, curr: string) => {
    acc[curr] = true;
    return acc;
  }, {} as Record<string, boolean>);

  return flow.value.ui.nodes.filter((node) => onlyMap[node.group]);
});
</script>

Seterusnya, manfaatkan sifat baharu ini dalam bentuk untuk menapis kumpulan nod sahajapassword和default。您可以使用相同的方法在另一个表单中过滤profile和default.

// SettingsView.vue
<template>
  <div id="settings">
    <HomeTopbar :views="[]" />

    <div class="settings-wrapper">
      <h1 class="poppins fs_3 fw_6">Recover your password</h1>
      <!-- 在这里添加only属性 -->
      <OryFlow v-if="settingsFlow"
        :flow="settingsFlow"
        title="Login"
        form-id="settings-form"
        :only="[ 'password', 'default' ]"
      />
    </div>
  </div>
</template>