無法成功更改密碼的Ory Kratos設定流程

Question

<p>我為Ory Kratos設定流程創建了自己的使用者介面。我遇到的問題是，儘管返回的訊息顯示我的設定已成功更新，但我的新密碼沒有反映出來，我也沒有成功恢復我的帳戶。以下是我使用Vue 3渲染UI的程式碼片段。 </p> <pre class="brush:js;toolbar:false;">// SettingsVue.vue <template> <div id="settings"> <HomeTopbar :views="[]" /> <div class="settings-wrapper"> <h1 class="poppins fs_3 fw_6">恢復您的密碼</h1> <OryFlow v-if="settingsFlow" :flow="settingsFlow" title="登入" form-id="settings-form" /> </div> </div> </範本> <腳本設定lang=“ts”> 從“vue”導入{ref}； /* 理論 */ 從'@/utils'導入{injectStrict}； 從 '@/plugins/ory' 導入 { $ory }； 從'@/utils/flows'導入{makeHandleGetFlowError}； /* 類型 */ 從“@ory/kratos-client”導入類型{SelfServiceSettingsFlow}； /* 可組合項 */ 從 'vue-router' 導入 { useRoute, useRouter }; /* 成分 */ 從'@/components/flows/OryFlow.vue'導入OryFlow； 從 '@/components/ui/HomeTopbar.vue' 導入 HomeTopbar； 常數=injectStrict($ory); const 路由 = useRoute(); const 路由器 = useRouter(); const settingsFlow = ref(); const handleGetFlowError = makeHandleGetFlowError(路由器); // 檢查我們是否有串流參數 const { 流 } = 路線.query; constinitializeSelfServiceSettingsFlowForBrowsers = () =>; 奧裡 .initializeSelfServiceSettingsFlowForBrowsers() .then((響應) => { settingsFlow.value = 回應.data; 路由器.替換({ 詢問： { 流：response.data.id， }, }); }) .catch(handleGetFlowError); if (typeof flow !== 'string') { // 如果我們的路線中沒有流量， // 我們需要初始化登入流程 初始化SelfServiceSettingsFlowForBrowsers(); } 別的 { 奧裡 .getSelfServiceSettingsFlow(流) .then((響應) => { settingsFlow.value = 回應.data; }) .catch(handleGetFlowError); } </腳本> <樣式範圍 lang=“scss”> #設定 { 寬度：100%； 高度：100%； .settings-wrapper { 邊距：var(--space-5) auto 0 auto; 填充：0 var(--space-3); 上邊距：var(--space-4); 寬度：300px； } } </風格> </前>

#OryFlow.vue
<模板>
  <div class="ory-flow">
    <表單:id="formId" :action="flow.ui.action"; :method="flow.ui.method">
      <OryUiNode v-for=“flow.ui.nodes 中的節點”
        :key="getNodeId(節點)"
        :id="getNodeId(節點)"
        :node="節點"
        class="ui-node";
      >>
    </表格>
    

      <OryUiMessage v-for=“flow.ui.messages 中的消息” :message="訊息" >>
    
  

Answer 1

所以解決這個問題實際上非常直接和明顯，我在回顧Ory團隊創建和維護的React自助服務UI的源代碼後，這一點變得明顯。

如果你將所有UI節點群組一起提交到同一個表單中，它只會在default群組和另一個群組上執行。在我的情況下，在成功處理profile群組後，它忽略了password群組。我遵循的解決方案基本上與我在前一段提到的儲存庫中提供的解決方案相同。實作一個過濾機制，讓您可以使用兩個單獨的表單，從而在提交表單時分離這些值。 請記住，您必須始終提交default群組，因為它包括您的CSRF令牌。

這是解決我的問題的更新程式碼：

首先，加入對:only屬性的支持，用於過濾節點：

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

接下來，在一個表單中利用這個新的屬性來只過濾節點群組password和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>