sim1222/test1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add support for hCaptcha

Browse Source
This commit is contained in:
Acid Chicken (硫酸鶏)
2020-04-28 14:29:33 +09:00
parent e17e8bbb6f
commit 7860839220
15 changed files with 257 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/client/components/hcaptcha.vue Normal file
View File

@ -0,0 +1,76 @@
<template>
<div ref="hCaptcha"></div>
</template>
<script lang="ts">
import Vue from 'vue';
declare global {
interface Window {
hcaptcha?: {
render(container: string | Node, options: {
readonly [_ in 'sitekey' | 'theme' | 'type' | 'size' | 'tabindex' | 'callback' | 'expired' | 'expired-callback' | 'error-callback' | 'endpoint']?: unknown;
}): string;
remove(id: string): void;
execute(id: string): void;
reset(id: string): void;
getResponse(id: string): string;
};
}
}
export default Vue.extend({
props: {
sitekey: {
type: String,
required: true,
},
value: {
type: String,
},
},
data() {
return {
available: false,
};
},
created() {
if (window.hcaptcha) {
this.available = true;
} else {
const script = document.createElement('script');
script.addEventListener('load', () => this.available = true);
script.src = 'https://hcaptcha.com/1/api.js?render=explicit';
script.async = true;
document.head.appendChild(script);
}
},
mounted() {
if (this.available) {
this.render();
} else {
this.$watch('available', this.render);
}
},
methods: {
render() {
if (this.$refs.hCaptcha instanceof Element) {
window.hcaptcha!.render(this.$refs.hCaptcha, {
sitekey: this.sitekey,
theme: this.$store.state.device.darkMode ? 'dark' : 'light',
callback: this.callback,
'expired-callback': this.callback,
'error-callback': this.callback,
});
}
},
callback(response?: string) {
this.$emit('input', typeof response == 'string' ? response : null);
},
},
});
</script>

24
src/client/components/signup.vue
View File

@ -42,7 +42,8 @@
</i18n>
</mk-switch>
<div v-if="meta.enableRecaptcha" class="g-recaptcha" :data-sitekey="meta.recaptchaSiteKey" style="margin: 16px 0;"></div>
<mk-button type="submit" :disabled=" submitting || !(meta.tosUrl ? ToSAgreement : true) || passwordRetypeState == 'not-match'" primary>{{ $t('start') }}</mk-button>
<h-captcha v-if="meta.enableHcaptcha" v-model="hCaptchaResponse" :sitekey="meta.hcaptchaSiteKey"/>
<mk-button type="submit" :disabled="shouldDisableSubmitting" primary>{{ $t('start') }}</mk-button>
</template>
</form>
</template>
@ -65,6 +66,7 @@ export default Vue.extend({
MkButton,
MkInput,
MkSwitch,
hCaptcha: () => import('./hcaptcha.vue').then(x => x.default),
},
data() {
@ -80,6 +82,7 @@ export default Vue.extend({
passwordRetypeState: null,
submitting: false,
ToSAgreement: false,
hCaptchaResponse: null,
faLock, faExclamationTriangle, faSpinner, faCheck, faKey
}
},
@ -96,7 +99,14 @@ export default Vue.extend({
meta() {
return this.$store.state.instance.meta;
},
shouldDisableSubmitting(): boolean {
return this.submitting ||
this.meta.tosUrl && !this.ToSAgreement ||
this.meta.enableHcaptcha && !this.hCaptchaResponse ||
this.passwordRetypeState == 'not-match';
},
shouldShowProfileUrl(): boolean {
return (this.username != '' &&
this.usernameState != 'invalid-format' &&
@ -115,10 +125,11 @@ export default Vue.extend({
},
mounted() {
const head = document.getElementsByTagName('head')[0];
const script = document.createElement('script');
script.setAttribute('src', 'https://www.google.com/recaptcha/api.js');
head.appendChild(script);
if (this.meta.enableRecaptcha) {
const script = document.createElement('script');
script.setAttribute('src', 'https://www.google.com/recaptcha/api.js');
document.head.appendChild(script);
}
},
methods: {
@ -177,6 +188,7 @@ export default Vue.extend({
username: this.username,
password: this.password,
invitationCode: this.invitationCode,
'hcaptcha-response': this.hCaptchaResponse,
'g-recaptcha-response': this.meta.enableRecaptcha ? (window as any).grecaptcha.getResponse() : null
}).then(() => {
this.$root.api('signin', {

2
src/client/components/url-preview.vue
View File

@ -4,7 +4,7 @@
<iframe :src="player.url + (player.url.match(/\?/) ? '&autoplay=1&auto_play=1' : '?autoplay=1&auto_play=1')" :width="player.width || '100%'" :heigth="player.height || 250" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen />
</div>
<div v-else-if="tweetUrl && detail" class="twitter">
<blockquote ref="tweet" class="twitter-tweet" :data-theme="$store.state.device.darkmode ? 'dark' : null">
<blockquote ref="tweet" class="twitter-tweet" :data-theme="$store.state.device.darkMode ? 'dark' : null">
<a :href="url"></a>
</blockquote>
</div>

67
src/client/pages/instance/settings.vue
View File

@ -38,6 +38,24 @@
</div>
</section>
<section class="_card">
<div class="_title"><fa :icon="faShieldAlt"/> {{ $t('hcaptcha') }}</div>
<div class="_content">
<mk-switch v-model="enableHcaptcha">{{ $t('enableHcaptcha') }}</mk-switch>
<template v-if="enableHcaptcha">
<mk-input v-model="hcaptchaSiteKey" :disabled="!enableHcaptcha"><template #icon><fa :icon="faKey"/></template>{{ $t('hcaptchaSiteKey') }}</mk-input>
<mk-input v-model="hcaptchaSecretKey" :disabled="!enableHcaptcha"><template #icon><fa :icon="faKey"/></template>{{ $t('hcaptchaSecretKey') }}</mk-input>
</template>
</div>
<div class="_content" v-if="enableHcaptcha && hcaptchaSiteKey">
<header>{{ $t('preview') }}</header>
<h-captcha v-if="enableHcaptcha" :sitekey="hcaptchaSiteKey"/>
</div>
<div class="_footer">
<mk-button primary @click="save(true)"><fa :icon="faSave"/> {{ $t('save') }}</mk-button>
</div>
</section>
<section class="_card">
<div class="_title"><fa :icon="faShieldAlt"/> {{ $t('recaptcha') }}</div>
<div class="_content">
@ -195,6 +213,12 @@ import { url } from '../../config';
import i18n from '../../i18n';
import getAcct from '../../../misc/acct/render';
declare global {
interface Window {
onRecaptchaLoad?: Function;
}
}
export default Vue.extend({
i18n,
@ -210,6 +234,7 @@ export default Vue.extend({
MkTextarea,
MkSwitch,
MkInfo,
hCaptcha: () => import('../../components/hcaptcha.vue').then(x => x.default),
},
data() {
@ -234,6 +259,9 @@ export default Vue.extend({
enableRegistration: false,
enableLocalTimeline: false,
enableGlobalTimeline: false,
enableHcaptcha: false,
hcaptchaSiteKey: null,
hcaptchaSecretKey: null,
enableRecaptcha: false,
recaptchaSiteKey: null,
recaptchaSecretKey: null,
@ -282,6 +310,9 @@ export default Vue.extend({
this.enableRegistration = !this.meta.disableRegistration;
this.enableLocalTimeline = !this.meta.disableLocalTimeline;
this.enableGlobalTimeline = !this.meta.disableGlobalTimeline;
this.enableHcaptcha = this.meta.enableHcaptcha;
this.hcaptchaSiteKey = this.meta.hcaptchaSiteKey;
this.hcaptchaSecretKey = this.meta.hcaptchaSecretKey;
this.enableRecaptcha = this.meta.enableRecaptcha;
this.recaptchaSiteKey = this.meta.recaptchaSiteKey;
this.recaptchaSecretKey = this.meta.recaptchaSecretKey;
@ -327,24 +358,33 @@ export default Vue.extend({
const renderRecaptchaPreview = () => {
if (!(window as any).grecaptcha) return;
if (!this.$refs.recaptcha) return;
if (!this.enableRecaptcha) return;
if (!this.recaptchaSiteKey) return;
(window as any).grecaptcha.render(this.$refs.recaptcha, {
sitekey: this.recaptchaSiteKey
});
};
window.onRecaotchaLoad = () => {
renderRecaptchaPreview();
let recaptchaLoaded: boolean = false;
const requestRenderRecaptchaPreview = () => {
if (window.onRecaptchaLoad) { // loading
return;
}
if (recaptchaLoaded) { // loaded
delete window.onRecaptchaLoad;
renderRecaptchaPreview();
} else { // init
window.onRecaptchaLoad = () => {
recaptchaLoaded = true;
renderRecaptchaPreview();
};
const script = document.createElement('script');
script.setAttribute('src', 'https://www.google.com/recaptcha/api.js?onload=onRecaptchaLoad');
document.head.appendChild(script);
}
};
const head = document.getElementsByTagName('head')[0];
const script = document.createElement('script');
script.setAttribute('src', 'https://www.google.com/recaptcha/api.js?onload=onRecaotchaLoad');
head.appendChild(script);
this.$watch('enableRecaptcha', () => {
renderRecaptchaPreview();
});
this.$watch('recaptchaSiteKey', () => {
renderRecaptchaPreview();
});
this.$watch('enableRecaptcha', requestRenderRecaptchaPreview);
this.$watch('recaptchaSiteKey', requestRenderRecaptchaPreview);
},
methods: {
@ -391,6 +431,9 @@ export default Vue.extend({
disableRegistration: !this.enableRegistration,
disableLocalTimeline: !this.enableLocalTimeline,
disableGlobalTimeline: !this.enableGlobalTimeline,
enableHcaptcha: this.enableHcaptcha,
hcaptchaSiteKey: this.hcaptchaSiteKey,
hcaptchaSecretKey: this.hcaptchaSecretKey,
enableRecaptcha: this.enableRecaptcha,
recaptchaSiteKey: this.recaptchaSiteKey,
recaptchaSecretKey: this.recaptchaSecretKey,