<p>J'ai créé ma propre interface utilisateur pour le processus de configuration d'Ory Kratos. Le problème que je rencontre est que même si le message revient indiquant que mes paramètres ont été mis à jour avec succès, mon nouveau mot de passe n'est pas reflété et je n'ai pas réussi à récupérer mon compte. Vous trouverez ci-dessous l'extrait de code que j'utilise pour restituer l'interface utilisateur à l'aide de Vue 3. </p> <pre class="brush:js;toolbar:false;">// SettingsVue.vue <modèle> <div id="paramètres"> <AccueilTopbar :views="[]" /> <div class="settings-wrapper"> <h1 class="poppins fs_3 fw_6">Récupérez votre mot de passe</h1> <OryFlow v-if="settingsFlow" :flow="settingsFlow" title="Connexion" form-id = "paramètres-form" /> </div> </div> </modèle> <configuration du script lang="ts"> importer { ref } depuis 'vue' ; /* ory */ importer { injectStrict } depuis '@/utils' ; importer { $ory } depuis '@/plugins/ory' ; importer { makeHandleGetFlowError } depuis '@/utils/flows' ; /* les types */ importer le type { SelfServiceSettingsFlow } depuis '@ory/kratos-client' ; /* composables */ importer { useRoute, useRouter } depuis 'vue-router' ; /* Composants */ importer OryFlow depuis '@/components/flows/OryFlow.vue' ; importer HomeTopbar depuis '@/components/ui/HomeTopbar.vue' ; const ory = injectStrict($ory); const route = useRoute(); const routeur = useRouter(); const settingsFlow = ref<SelfServiceSettingsFlow | non défini>(); const handleGetFlowError = makeHandleGetFlowError(router); // vérifie si nous avons un paramètre de flux const { flux } = route.query; const initializeSelfServiceSettingsFlowForBrowsers = () => ory .initializeSelfServiceSettingsFlowForBrowsers() .then((réponse) => { settingsFlow.value = réponse.data; routeur.replace({ requête: { flux : réponse.data.id, }, }); }) .catch(handleGetFlowError); if (type de flux !== 'string') { // s'il n'y a pas de flux sur notre route, // nous devons initialiser notre flux de connexion initializeSelfServiceSettingsFlowForBrowsers(); } autre { ory .getSelfServiceSettingsFlow(flux) .then((réponse) => { settingsFlow.value = réponse.data; }) .catch(handleGetFlowError); } </script> <style scoped lang="scss"> #paramètres { largeur : 100 % ; hauteur : 100 % ; .settings-wrapper { marge : var(--space-5) auto 0 auto ; remplissage : 0 var(--space-3); marge-haut : var(--space-4); largeur : 300 px ; } } </style> ≪/pré> <pre class="brush:js;toolbar:false;">#OryFlow.vue <modèle> <div class="ory-flow"> <form :id="formId" :action="flow.ui.action" :method="flow.ui.method"> <OryUiNode v-for="nœud dans flow.ui.nodes" :key="getNodeId(noeud)" :id="getNodeId(noeud)" :node="nœud" class="ui-node" /> </formulaire> <div class="messages" v-if="flow.ui.messages"> <OryUiMessage v-for="message dans flow.ui.messages" :message="message" /> </div> </div> </modèle> <configuration du script lang="ts"> type d'importation { SelfServiceLoginFlow, Flux d'enregistrement en libre-service, Flux de récupération en libre-service, Flux de paramètres de libre-service, Flux de vérification en libre-service, } depuis '@ory/kratos-client'; importer OryUiNode depuis './OryUiNode.vue' ; importer OryUiMessage depuis './OryUiMessage.vue' ; importer { getNodeId } depuis '@ory/integrations/ui' ; définirProps<{ couler: | Flux de connexion en libre-service | Flux d'enregistrement en libre-service | SelfServiceRecoveryFlow | Flux de paramètres de libre-service | Flux de vérification en libre-service ; formId?: chaîne; }>(); </script> <style scoped lang="scss"> .ui-node + .ui-node { marge-haut : var(--space-2); } .message { marge-haut : var(--space-2); } </style> ≪/pré>

// 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>

// 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>