Processus de configuration d'Ory Kratos où le mot de passe ne peut pas être modifié avec succès

Question

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.

// SettingsVue.vue

  

    

    

      
Récupérez votre mot de passe
      
    
  



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();
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);
}




≪/pré>
#OryFlow.vue

  

    
      
    
    

      
    
  



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;
}>();



≪/pré>            

Answer 1

La résolution de ce problème est donc en fait assez simple et évidente, ce qui est devenu évident après avoir examiné le code source de la React Self-Service UI créée et maintenue par l'équipe Ory.

Si vous soumettez tous les groupes de nœuds d'interface utilisateur ensemble dans le même formulaire, il ne figurera que dans le groupe default组和另一个组上执行。在我的情况下，在成功处理profile组后，它忽略了password组。我遵循的解决方案基本上与我在前一段提到的存储库中提供的解决方案相同。实现一个过滤机制，允许您使用两个单独的表单，从而在提交表单时分离这些值。请记住，您必须始终提交default car il inclut votre jeton CSRF .

Voici le code mis à jour qui a résolu mon problème :

Tout d'abord, ajoutez la prise en charge de l'attribut :only pour filtrer les nœuds :

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

Ensuite, profitez de cette nouvelle propriété dans un formulaire pour filtrer uniquement les groupes de nœudspassword和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>