Add support for hCaptcha
This commit is contained in:
parent
e17e8bbb6f
commit
7860839220
|
@ -299,6 +299,10 @@ bannerUrl: "バナー画像のURL"
|
|||
basicInfo: "基本情報"
|
||||
pinnedUsers: "ピン留めユーザー"
|
||||
pinnedUsersDescription: "「みつける」ページなどにピン留めしたいユーザーを改行で区切って記述します。"
|
||||
hcaptcha: "hCaptcha"
|
||||
enableHcaptcha: "hCaptchaを有効にする"
|
||||
hcaptchaSiteKey: "サイトキー"
|
||||
hcaptchaSecretKey: "シークレットキー"
|
||||
recaptcha: "reCAPTCHA"
|
||||
enableRecaptcha: "reCAPTCHAを有効にする"
|
||||
recaptchaSiteKey: "サイトキー"
|
||||
|
|
|
@ -0,0 +1,18 @@
|
|||
import {MigrationInterface, QueryRunner} from "typeorm";
|
||||
|
||||
export class hCaptcha1588044505511 implements MigrationInterface {
|
||||
name = 'hCaptcha1588044505511'
|
||||
|
||||
public async up(queryRunner: QueryRunner): Promise<void> {
|
||||
await queryRunner.query(`ALTER TABLE "meta" ADD "enableHcaptcha" boolean NOT NULL DEFAULT false`, undefined);
|
||||
await queryRunner.query(`ALTER TABLE "meta" ADD "hcaptchaSiteKey" character varying(64)`, undefined);
|
||||
await queryRunner.query(`ALTER TABLE "meta" ADD "hcaptchaSecretKey" character varying(64)`, undefined);
|
||||
}
|
||||
|
||||
public async down(queryRunner: QueryRunner): Promise<void> {
|
||||
await queryRunner.query(`ALTER TABLE "meta" DROP COLUMN "hcaptchaSecretKey"`, undefined);
|
||||
await queryRunner.query(`ALTER TABLE "meta" DROP COLUMN "hcaptchaSiteKey"`, undefined);
|
||||
await queryRunner.query(`ALTER TABLE "meta" DROP COLUMN "enableHcaptcha"`, undefined);
|
||||
}
|
||||
|
||||
}
|
|
@ -144,6 +144,7 @@
|
|||
"gulp-tslint": "8.1.4",
|
||||
"gulp-typescript": "6.0.0-alpha.1",
|
||||
"hard-source-webpack-plugin": "0.13.1",
|
||||
"hcaptcha": "0.0.1",
|
||||
"html-minifier": "4.0.0",
|
||||
"http-proxy-agent": "4.0.1",
|
||||
"http-signature": "1.3.4",
|
||||
|
|
|
@ -0,0 +1,9 @@
|
|||
declare module 'hcaptcha' {
|
||||
export function verify(secret: string, token: string): Promise<{
|
||||
success: boolean;
|
||||
challenge_ts: string;
|
||||
hostname: string;
|
||||
credit?: boolean;
|
||||
'error-codes'?: unknown[];
|
||||
}>;
|
||||
}
|
|
@ -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>
|
|
@ -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
|
||||
}
|
||||
},
|
||||
|
@ -97,6 +100,13 @@ export default Vue.extend({
|
|||
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];
|
||||
if (this.meta.enableRecaptcha) {
|
||||
const script = document.createElement('script');
|
||||
script.setAttribute('src', 'https://www.google.com/recaptcha/api.js');
|
||||
head.appendChild(script);
|
||||
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', {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 = () => {
|
||||
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 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();
|
||||
});
|
||||
script.setAttribute('src', 'https://www.google.com/recaptcha/api.js?onload=onRecaptchaLoad');
|
||||
document.head.appendChild(script);
|
||||
}
|
||||
};
|
||||
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,
|
||||
|
|
|
@ -124,6 +124,23 @@ export class Meta {
|
|||
@JoinColumn()
|
||||
public proxyAccount: User | null;
|
||||
|
||||
@Column('boolean', {
|
||||
default: false,
|
||||
})
|
||||
public enableHcaptcha: boolean;
|
||||
|
||||
@Column('varchar', {
|
||||
length: 64,
|
||||
nullable: true
|
||||
})
|
||||
public hcaptchaSiteKey: string | null;
|
||||
|
||||
@Column('varchar', {
|
||||
length: 64,
|
||||
nullable: true
|
||||
})
|
||||
public hcaptchaSecretKey: string | null;
|
||||
|
||||
@Column('boolean', {
|
||||
default: false,
|
||||
})
|
||||
|
|
|
@ -145,6 +145,27 @@ export const meta = {
|
|||
}
|
||||
},
|
||||
|
||||
enableHcaptcha: {
|
||||
validator: $.optional.bool,
|
||||
desc: {
|
||||
'ja-JP': 'hCaptchaを使用するか否か'
|
||||
}
|
||||
},
|
||||
|
||||
hcaptchaSiteKey: {
|
||||
validator: $.optional.nullable.str,
|
||||
desc: {
|
||||
'ja-JP': 'hCaptcha site key'
|
||||
}
|
||||
},
|
||||
|
||||
hcaptchaSecretKey: {
|
||||
validator: $.optional.nullable.str,
|
||||
desc: {
|
||||
'ja-JP': 'hCaptcha secret key'
|
||||
}
|
||||
},
|
||||
|
||||
enableRecaptcha: {
|
||||
validator: $.optional.bool,
|
||||
desc: {
|
||||
|
@ -472,6 +493,18 @@ export default define(meta, async (ps, me) => {
|
|||
set.proxyRemoteFiles = ps.proxyRemoteFiles;
|
||||
}
|
||||
|
||||
if (ps.enableHcaptcha !== undefined) {
|
||||
set.enableHcaptcha = ps.enableHcaptcha;
|
||||
}
|
||||
|
||||
if (ps.hcaptchaSiteKey !== undefined) {
|
||||
set.hcaptchaSiteKey = ps.hcaptchaSiteKey;
|
||||
}
|
||||
|
||||
if (ps.hcaptchaSecretKey !== undefined) {
|
||||
set.hcaptchaSecretKey = ps.hcaptchaSecretKey;
|
||||
}
|
||||
|
||||
if (ps.enableRecaptcha !== undefined) {
|
||||
set.enableRecaptcha = ps.enableRecaptcha;
|
||||
}
|
||||
|
|
|
@ -122,6 +122,8 @@ export default define(meta, async (ps, me) => {
|
|||
driveCapacityPerRemoteUserMb: instance.remoteDriveCapacityMb,
|
||||
cacheRemoteFiles: instance.cacheRemoteFiles,
|
||||
proxyRemoteFiles: instance.proxyRemoteFiles,
|
||||
enableHcaptcha: instance.enableHcaptcha,
|
||||
hcaptchaSiteKey: instance.hcaptchaSiteKey,
|
||||
enableRecaptcha: instance.enableRecaptcha,
|
||||
recaptchaSiteKey: instance.recaptchaSiteKey,
|
||||
swPublickey: instance.swPublicKey,
|
||||
|
@ -149,6 +151,7 @@ export default define(meta, async (ps, me) => {
|
|||
localTimeLine: !instance.disableLocalTimeline,
|
||||
globalTimeLine: !instance.disableGlobalTimeline,
|
||||
elasticsearch: config.elasticsearch ? true : false,
|
||||
hcaptcha: instance.enableHcaptcha,
|
||||
recaptcha: instance.enableRecaptcha,
|
||||
objectStorage: instance.useObjectStorage,
|
||||
twitter: instance.enableTwitterIntegration,
|
||||
|
@ -164,6 +167,7 @@ export default define(meta, async (ps, me) => {
|
|||
response.pinnedUsers = instance.pinnedUsers;
|
||||
response.hiddenTags = instance.hiddenTags;
|
||||
response.blockedHosts = instance.blockedHosts;
|
||||
response.hcaptchaSecretKey = instance.hcaptchaSecretKey;
|
||||
response.recaptchaSecretKey = instance.recaptchaSecretKey;
|
||||
response.proxyAccountId = instance.proxyAccountId;
|
||||
response.twitterConsumerKey = instance.twitterConsumerKey;
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import * as Koa from 'koa';
|
||||
import { fetchMeta } from '../../../misc/fetch-meta';
|
||||
import { verify } from 'hcaptcha';
|
||||
import * as recaptcha from 'recaptcha-promise';
|
||||
import { Users, RegistrationTickets } from '../../../models';
|
||||
import { signup } from '../common/signup';
|
||||
|
@ -9,8 +10,18 @@ export default async (ctx: Koa.Context) => {
|
|||
|
||||
const instance = await fetchMeta(true);
|
||||
|
||||
// Verify recaptcha
|
||||
// Verify *Captcha
|
||||
// ただしテスト時はこの機構は障害となるため無効にする
|
||||
if (process.env.NODE_ENV !== 'test' && instance.enableHcaptcha && instance.hcaptchaSecretKey) {
|
||||
const success = await verify(instance.hcaptchaSecretKey, body['hcaptcha-response']).then(
|
||||
({ 'error-codes': x }) => !x || !x.length,
|
||||
() => false,
|
||||
);
|
||||
|
||||
if (!success) {
|
||||
ctx.throw(400, 'hcaptcha-failed');
|
||||
}
|
||||
}
|
||||
if (process.env.NODE_ENV !== 'test' && instance.enableRecaptcha && instance.recaptchaSecretKey) {
|
||||
recaptcha.init({
|
||||
secret_key: instance.recaptchaSecretKey
|
||||
|
|
|
@ -65,6 +65,7 @@ const nodeinfo2 = async () => {
|
|||
disableRegistration: meta.disableRegistration,
|
||||
disableLocalTimeline: meta.disableLocalTimeline,
|
||||
disableGlobalTimeline: meta.disableGlobalTimeline,
|
||||
enableHcaptcha: meta.enableHcaptcha,
|
||||
enableRecaptcha: meta.enableRecaptcha,
|
||||
maxNoteTextLength: meta.maxNoteTextLength,
|
||||
enableTwitterIntegration: meta.enableTwitterIntegration,
|
||||
|
|
|
@ -106,6 +106,9 @@ html
|
|||
tr
|
||||
th Registration
|
||||
td= !meta.disableRegistration ? 'yes' : 'no'
|
||||
tr
|
||||
th hCaptcha enabled
|
||||
td= meta.enableHcaptcha ? 'enabled' : 'disabled'
|
||||
tr
|
||||
th reCAPTCHA enabled
|
||||
td= meta.enableRecaptcha ? 'enabled' : 'disabled'
|
||||
|
|
|
@ -4302,6 +4302,11 @@ hash-sum@^1.0.2:
|
|||
resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-1.0.2.tgz#33b40777754c6432573c120cc3808bbd10d47f04"
|
||||
integrity sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=
|
||||
|
||||
hcaptcha@0.0.1:
|
||||
version "0.0.1"
|
||||
resolved "https://registry.yarnpkg.com/hcaptcha/-/hcaptcha-0.0.1.tgz#e8c5e25a943083d06630bf077bae8a3053fa3da5"
|
||||
integrity sha512-xGU7wSg3BENwEsOplfMghyR7SL/AXKllmCRMkmt3WQHxhINVNs2u7pP7V5FhigNFBNt6zz32GDRzLqfeDzqPyA==
|
||||
|
||||
he@1.2.0, he@^1.1.0, he@^1.2.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
|
||||
|
|
Loading…
Reference in New Issue