Ory Kratos のセットアップ プロセスでパスワードを正常に変更できない
<p>Ory Kratos セットアップ プロセス用に独自のユーザー インターフェイスを作成しました。私が抱えている問題は、設定が正常に更新されたというメッセージが戻ってくるのに、新しいパスワードが反映されず、アカウントが正常に回復しないことです。以下は、Vue 3 を使用して UI をレンダリングするために使用するコード スニペットです。 </p>
<pre class="brush:js;toolbar:false;">// SettingsVue.vue
<テンプレート>
<div id="設定">
<ホームトップバー :views="[]" />
<div class="設定ラッパー">
<h1 class="poppins fs_3 fw_6">パスワードを回復します</h1>
<OryFlow v-if="設定フロー"
:flow="設定フロー"
title="ログイン"
form-id="設定フォーム"
/>
</div>
</div>
</テンプレート>
<スクリプトセットアップ lang="ts">
'vue' から { ref } をインポートします。
/* オリー */
import { injectStrict } から '@/utils';
'@/plugins/ory' から { $ory } をインポートします。
import { makeHandleGetFlowError } から '@/utils/flows';
/* 種類 */
'@ory/kratos-client' からタイプ { SelfServiceSettingsFlow } をインポートします。
/* コンポーザブル */
import { useRoute, useRouter } from 'vue-router';
/* コンポーネント */
'@/components/flows/OryFlow.vue' から OryFlow をインポートします。
HomeTopbar を '@/components/ui/HomeTopbar.vue' からインポートします。
const ory = injectStrict($ory);
const ルート = useRoute();
const ルーター = useRouter();
const settingsFlow = ref();
const handleGetFlowError = makeHandleGetFlowError(ルーター);
// フローパラメータがあるかどうかを確認します
const { フロー } = ルート.クエリ;
constInitializeSelfServiceSettingsFlowForBrowsers = () =>
オリー
.initializeSelfServiceSettingsFlowForBrowsers()
.then((応答) => {
設定フロー.値 = 応答.データ;
ルーター.replace({
クエリ: {
フロー：response.data.id、
}、
});
})
.catch(handleGetFlowError);
if (フローのタイプ !== '文字列') {
// ルートにフローがない場合、
// ログインフローを初期化する必要があります
初期化SelfServiceSettingsFlowForBrowsers();
} それ以外 {
オリー
.getSelfServiceSettingsFlow(フロー)
.then((応答) => {
設定フロー.値 = 応答.データ;
})
.catch(handleGetFlowError);
}
</スクリプト>
<stylescopedlang="scss">
＃設定 {
幅: 100%;
高さ: 100%;
.settings-wrapper {
マージン: var(--space-5) 自動 0 自動;
パディング: 0 var(--space-3);
マージントップ: var(--space-4);
幅: 300ピクセル;
}
}
</スタイル>
</pre>
<pre class="brush:js;toolbar:false;">#OryFlow.vue
<テンプレート>
<div class="ory-flow">
<フォーム:id="フォームID" :action="flow.ui.action" :method="flow.ui.method">
<OryUiNode v-for=「flow.ui.nodes のノード」
:key="getNodeId(ノード)"
:id="getNodeId(ノード)"
:node="ノード"
クラス= "ui-node"
/>
</フォーム>
<div class="メッセージ" v-if="flow.ui.messages">
<OryUiMessage v-for="flow.ui.messages のメッセージ" :message="メッセージ" />
</div>
</div>
</テンプレート>
<スクリプトセットアップ lang="ts">
インポートタイプ {
セルフサービスログインフロー、
セルフサービス登録フロー、
セルフサービスリカバリフロー、
セルフサービス設定フロー、
セルフサービス検証フロー、
'@ory/kratos-client' から;
'./OryUiNode.vue' から OryUiNode をインポートします。
OryUiMessage を './OryUiMessage.vue' からインポートします。
import { getNodeId } から '@ory/integrations/ui';
定義Props<{
流れ：
|セルフサービスログインフロー
|セルフサービス登録フロー
|セルフサービス回復フロー
|セルフサービス設定フロー
|セルフサービス検証フロー;
フォーム ID?: 文字列;
}>();
</スクリプト>
<stylescopedlang="scss">
.ui ノード .ui ノード {
マージントップ: var(--space-2);
}
。メッセージ {
マージントップ: var(--space-2);
}
</スタイル>
</pre>
