curse/Curse
1
0
Fork 0
mirror of https://github.com/misskey-dev/misskey.git synced 2026-03-21 03:30:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(frontend): mCaptchaが動作しない問題を修正 (#17127)

Browse Source 
* fix(frontend): mCaptchaが動作しない問題を修正

* Update Changelog

* remove mcaptcha vanila glue
This commit is contained in:
かっこかり
2026-01-28 11:55:35 +09:00
committed by GitHub
parent fc7655c808
commit 4910fff7fb
4 changed files with 63 additions and 308 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/frontend/package.json
View File

@@ -19,7 +19,7 @@
"@analytics/google-analytics": "1.1.0",
"@discordapp/twemoji": "16.0.1",
"@github/webauthn-json": "2.1.1",
"@mcaptcha/vanilla-glue": "0.1.0-rc2",
"@mcaptcha/core-glue": "0.1.0-alpha-5",
"@misskey-dev/browser-image-resizer": "2024.1.0",
"@rollup/plugin-json": "6.1.0",
"@rollup/plugin-replace": "6.0.3",

63
packages/frontend/src/components/MkCaptcha.vue
View File

@@ -7,8 +7,12 @@ SPDX-License-Identifier: AGPL-3.0-only
<div>
<span v-if="!available">Loading<MkEllipsis/></span>
<div v-if="props.provider == 'mcaptcha'">
<div id="mcaptcha__widget-container" class="m-captcha-style"></div>
<div ref="captchaEl"></div>
<iframe
v-if="mCaptchaIframeUrl != null"
ref="mCaptchaIframe"
:src="mCaptchaIframeUrl"
style="border: none; max-width: 320px; width: 100%; height: 100%; max-height: 80px;"
></iframe>
</div>
<div v-if="props.provider == 'testcaptcha'" style="background: #eee; border: solid 1px #888; padding: 8px; color: #000; max-width: 320px; display: flex; gap: 10px; align-items: center; box-shadow: 2px 2px 6px #0004; border-radius: 4px;">
<img src="/client-assets/testcaptcha.png" style="width: 60px; height: 60px; "/>
@@ -26,7 +30,8 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { ref, useTemplateRef, computed, onMounted, onBeforeUnmount, watch, onUnmounted } from 'vue';
import { ref, useTemplateRef, computed, onMounted, onBeforeUnmount, watch, onUnmounted, nextTick } from 'vue';
import type Reciever_typeReferenceOnly from '@mcaptcha/core-glue';
import { store } from '@/store.js';
// APIs provided by Captcha services
@@ -71,6 +76,19 @@ const available = ref(false);
const captchaEl = useTemplateRef('captchaEl');
const captchaWidgetId = ref<string | undefined>(undefined);
let mCaptchaReciever: Reciever_typeReferenceOnly | null = null;
const mCaptchaIframe = useTemplateRef('mCaptchaIframe');
const mCaptchaRemoveState = ref(false);
const mCaptchaIframeUrl = computed(() => {
if (props.provider === 'mcaptcha' && !mCaptchaRemoveState.value && props.instanceUrl && props.sitekey) {
const url = new URL('/widget', props.instanceUrl);
url.searchParams.set('sitekey', props.sitekey);
return url.toString();
}
return null;
});
const testcaptchaInput = ref('');
const testcaptchaPassed = ref(false);
@@ -129,8 +147,14 @@ function reset() {
if (_DEV_) console.warn(error);
}
}
testcaptchaPassed.value = false;
testcaptchaInput.value = '';
if (mCaptchaReciever != null) {
mCaptchaReciever.destroy();
mCaptchaReciever = null;
}
}
function remove() {
@@ -143,6 +167,10 @@ function remove() {
if (_DEV_) console.warn(error);
}
}
if (props.provider === 'mcaptcha') {
mCaptchaRemoveState.value = true;
}
}
async function requestRender() {
@@ -160,32 +188,29 @@ async function requestRender() {
'error-callback': () => callback(undefined),
});
} else if (props.provider === 'mcaptcha' && props.instanceUrl && props.sitekey) {
const { default: Widget } = await import('@mcaptcha/vanilla-glue');
new Widget({
const { default: Reciever } = await import('@mcaptcha/core-glue');
mCaptchaReciever = new Reciever({
siteKey: {
instanceUrl: new URL(props.instanceUrl),
key: props.sitekey,
instanceUrl: new URL(props.instanceUrl),
},
}, (token: string) => {
callback(token);
});
mCaptchaReciever.listen();
mCaptchaRemoveState.value = false;
} else {
window.setTimeout(requestRender, 1);
window.setTimeout(requestRender, 50);
}
}
function clearWidget() {
if (props.provider === 'mcaptcha') {
const container = window.document.getElementById('mcaptcha__widget-container');
if (container) {
container.innerHTML = '';
}
} else {
reset();
remove();
reset();
remove();
if (captchaEl.value) {
// レンダリング先のコンテナの中身を掃除し、フォームが増殖するのを抑止
captchaEl.value.innerHTML = '';
}
if (captchaEl.value) {
// レンダリング先のコンテナの中身を掃除し、フォームが増殖するのを抑止
captchaEl.value.innerHTML = '';
}
}