비밀번호를 성공적으로 변경할 수 없는 Ory Kratos 설정 프로세스
<p>저는 Ory Kratos 설정 프로세스를 위해 나만의 사용자 인터페이스를 만들었습니다. 제가 겪고 있는 문제는 설정이 성공적으로 업데이트되었다는 메시지가 다시 왔지만 새 비밀번호가 반영되지 않아 계정을 성공적으로 복구하지 못했다는 것입니다. 다음은 Vue 3를 사용하여 UI를 렌더링하는 데 사용하는 코드 조각입니다. </p>
<pre class="brush:js;toolbar:false;">// SettingsVue.vue
<템플릿>
<div id="설정">
<HomeTopbar :views="[]"
<div class="설정-래퍼">
<h1 class="poppins fs_3 fw_6">비밀번호를 복구하세요</h1>
<OryFlow v-if="settingsFlow"
:flow="설정흐름"
title="로그인"
form-id="설정-양식"
/>
</div>
</div>
</템플릿>
<스크립트 설정 lang="ts">
'vue'에서 { ref } 가져오기;
/* 오리 */
import { injectStrict } from '@/utils';
'@/plugins/ory'에서 { $ory }를 가져옵니다.
import { makeHandleGetFlowError } from '@/utils/flows';
/* 종류 */
'@ory/kratos-client'에서 가져오기 유형 { SelfServiceSettingsFlow };
/* 컴포저블 */
'vue-router'에서 import { useRoute, useRouter };
/* 구성요소 */
'@/comComponents/flows/OryFlow.vue'에서 OryFlow를 가져옵니다.
'@/comComponents/ui/HomeTopbar.vue'에서 HomeTopbar를 가져옵니다.
const ory = injectStrict($ory);
const 경로 = useRoute();
const 라우터 = useRouter();
const settingsFlow = ref<SelfServiceSettingsFlow | 정의되지 않음>();
const handlerGetFlowError = makeHandleGetFlowError(라우터);
// 흐름 매개변수가 있는지 확인
const { 흐름 } = Route.query;
const 초기화SelfServiceSettingsFlowForBrowsers = () =>
오리
.initializeSelfServiceSettingsFlowForBrowsers()
.then((응답) => {
settingsFlow.value = response.data;
라우터.교체({
쿼리: {
흐름: response.data.id,
},
});
})
.catch(handleGetFlowError);
if (흐름 유형 !== '문자열') {
// 경로에 흐름이 없으면
// 로그인 흐름을 초기화해야 합니다.
초기화SelfServiceSettingsFlowForBrowsers();
} 또 다른 {
오리
.getSelfServiceSettingsFlow(흐름)
.then((응답) => {
settingsFlow.value = response.data;
})
.catch(handleGetFlowError);
}
</스크립트>
<스타일 범위 lang="scss">
#설정 {
너비: 100%;
높이: 100%;
.settings-래퍼 {
여백: var(--space-5) 자동 0 자동;
패딩: 0 var(--space-3);
여백 상단: var(--space-4);
너비: 300px;
}
}
</스타일>
</pre>
<pre class="brush:js;toolbar:false;">#OryFlow.vue
<템플릿>
<div class="ory-flow">
<form :id="formId" :action="flow.ui.action" :method="flow.ui.method">
<OryUiNode v-for="flow.ui.nodes의 노드"
:key="getNodeId(노드)"
:id="getNodeId(노드)"
:노드="노드"
class="ui-node"
/>
</양식>
<div class="메시지" v-if="flow.ui.messages">
<OryUiMessage v-for="flow.ui.messages의 메시지" :message="메시지" />
</div>
</div>
</템플릿>
<스크립트 설정 lang="ts">
가져오기 유형 {
SelfService로그인 흐름,
SelfService등록 흐름,
SelfServiceRecoveryFlow,
SelfServiceSettingsFlow,
SelfServiceVerificationFlow,
} '@ory/kratos-client'에서;
'./OryUiNode.vue'에서 OryUiNode를 가져옵니다.
'./OryUiMessage.vue'에서 OryUiMessage를 가져옵니다.
import { getNodeId } from '@ory/integrations/ui';
정의Props<{
흐름:
| SelfService로그인 흐름
| SelfService등록 흐름
| SelfService복구 흐름
| SelfService설정흐름
| SelfServiceVerificationFlow;
formId?: 문자열;
}>();
</스크립트>
<스타일 범위 lang="scss">
.ui-노드 + .ui-노드 {
여백 상단: var(--space-2);
}
.메시지 {
여백 상단: var(--space-2);
}
</스타일>
</pre>
