graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-27 10:13:09 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #6303 from syuilo/features/hcaptcha

Browse source 
Add support for hCaptcha
This commit is contained in:
Acid Chicken (硫酸鶏) 2020-05-05 10:22:49 +09:00 committed by GitHub
commit 4cccdb8a98
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 332 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
locales/ja-JP.yml
View file

@ -107,6 +107,7 @@ customEmojis: "カスタム絵文字"
emojiName: "絵文字名"
emojiUrl: "絵文字画像URL"
addEmoji: "絵文字を追加"
settingGuide: "おすすめ設定"
cacheRemoteFiles: "リモートのファイルをキャッシュする"
cacheRemoteFilesDescription: "この設定を無効にすると、リモートファイルをキャッシュせず直リンクするようになります。サーバーのストレージを節約できますが、サムネイルが生成されないので通信量が増加します。"
flagAsBot: "Botとして設定"
@ -299,10 +300,15 @@ bannerUrl: "バナー画像のURL"
basicInfo: "基本情報"
pinnedUsers: "ピン留めユーザー"
pinnedUsersDescription: "「みつける」ページなどにピン留めしたいユーザーを改行で区切って記述します。"
hcaptcha: "hCaptcha"
enableHcaptcha: "hCaptchaを有効にする"
hcaptchaSiteKey: "サイトキー"
hcaptchaSecretKey: "シークレットキー"
recaptcha: "reCAPTCHA"
enableRecaptcha: "reCAPTCHAを有効にする"
recaptchaSiteKey: "サイトキー"
recaptchaSecretKey: "シークレットキー"
avoidMultiCaptchaConfirm: "複数のCaptchaを使用すると干渉を起こす可能性があります。他のCaptchaを無効にしますか？キャンセルして複数のCaptchaを有効化したままにすることも可能です。"
antennas: "アンテナ"
manageAntennas: "アンテナの管理"
name: "名前"

18
migration/1588044505511-hCaptcha.ts Normal file
View file

@ -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);
}
}

1
package.json
View file

@ -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",

11
src/@types/hcaptcha.d.ts vendored Normal file
View file

@ -0,0 +1,11 @@
declare module 'hcaptcha' {
interface IVerifyResponse {
success: boolean;
challenge_ts: string;
hostname: string;
credit?: boolean;
'error-codes'?: unknown[];
}
export function verify(secret: string, token: string): Promise<IVerifyResponse>;
}

119
src/client/components/captcha.vue Normal file
View file

@ -0,0 +1,119 @@
<template>
<div>
<span v-if="!available">{{ $t('waiting') }}<mk-ellipsis/></span>
<div ref="captcha"></div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../i18n';
type Captcha = {
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;
};
type CaptchaProvider = 'hcaptcha' | 'grecaptcha';
type CaptchaContainer = {
readonly [_ in CaptchaProvider]?: Captcha;
};
declare global {
interface Window extends CaptchaContainer {
}
}
export default Vue.extend({
i18n,
props: {
provider: {
type: String,
required: true,
},
sitekey: {
type: String,
required: true,
},
value: {
type: String,
},
},
data() {
return {
available: false,
};
},
computed: {
loaded() {
return !!window[this.provider as CaptchaProvider];
},
src() {
const endpoint = ({
hcaptcha: 'https://hcaptcha.com/1',
grecaptcha: 'https://www.google.com/recaptcha',
} as Record<PropertyKey, unknown>)[this.provider];
return `${typeof endpoint == 'string' ? endpoint : 'about:invalid'}/api.js?render=explicit`;
},
captcha() {
return window[this.provider as CaptchaProvider] || {} as unknown as Captcha;
},
},
created() {
if (this.loaded) {
this.available = true;
} else {
(document.getElementById(this.provider) || document.head.appendChild(Object.assign(document.createElement('script'), {
async: true,
id: this.provider,
src: this.src,
})))
.addEventListener('load', () => this.available = true);
}
},
mounted() {
if (this.available) {
this.requestRender();
} else {
this.$watch('available', this.requestRender);
}
},
beforeDestroy() {
this.reset();
},
methods: {
reset() {
this.captcha?.reset();
},
requestRender() {
if (this.captcha.render && this.$refs.captcha instanceof Element) {
this.captcha.render(this.$refs.captcha, {
sitekey: this.sitekey,
theme: this.$store.state.device.darkMode ? 'dark' : 'light',
callback: this.callback,
'expired-callback': this.callback,
'error-callback': this.callback,
});
} else {
setTimeout(this.requestRender.bind(this), 1);
}
},
callback(response?: string) {
this.$emit('input', typeof response == 'string' ? response : null);
},
},
});
</script>

2
src/client/components/signup-dialog.vue
View file

@ -1,5 +1,5 @@
<template>
<x-window ref="window" @closed="() => { $emit('closed'); destroyDom(); }">
<x-window ref="window" :width="366" :height="506" @closed="() => { $emit('closed'); destroyDom(); }">
<template #header>{{ $t('signup') }}</template>
<x-signup :auto-set="autoSet" @signup="onSignup"/>
</x-window>

42
src/client/components/signup.vue
View file

@ -41,8 +41,9 @@
<a :href="meta.tosUrl" class="_link" target="_blank">{{ $t('tos') }}</a>
</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>
<captcha v-if="meta.enableHcaptcha" class="captcha" provider="hcaptcha" ref="hcaptcha" v-model="hCaptchaResponse" :sitekey="meta.hcaptchaSiteKey"/>
<captcha v-if="meta.enableRecaptcha" class="captcha" provider="grecaptcha" ref="recaptcha" v-model="reCaptchaResponse" :sitekey="meta.recaptchaSiteKey"/>
<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,
captcha: () => import('./captcha.vue').then(x => x.default),
},
data() {
@ -80,6 +82,8 @@ export default Vue.extend({
passwordRetypeState: null,
submitting: false,
ToSAgreement: false,
hCaptchaResponse: null,
reCaptchaResponse: null,
faLock, faExclamationTriangle, faSpinner, faCheck, faKey
}
},
@ -97,6 +101,14 @@ 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.meta.enableRecaptcha && !this.reCaptchaResponse ||
this.passwordRetypeState == 'not-match';
},
shouldShowProfileUrl(): boolean {
return (this.username != '' &&
this.usernameState != 'invalid-format' &&
@ -114,13 +126,6 @@ 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);
},
methods: {
onChangeUsername() {
if (this.username == '') {
@ -177,7 +182,8 @@ export default Vue.extend({
username: this.username,
password: this.password,
invitationCode: this.invitationCode,
'g-recaptcha-response': this.meta.enableRecaptcha ? (window as any).grecaptcha.getResponse() : null
'hcaptcha-response': this.hCaptchaResponse,
'g-recaptcha-response': this.meta.reCaptchaResponse,
}).then(() => {
this.$root.api('signin', {
username: this.username,
@ -187,17 +193,25 @@ export default Vue.extend({
});
}).catch(() => {
this.submitting = false;
this.$refs.hcaptcha?.reset?.();
this.$refs.recaptcha?.reset?.();
this.$root.dialog({
type: 'error',
text: this.$t('error')
});
if (this.meta.enableRecaptcha) {
(window as any).grecaptcha.reset();
}
});
}
}
});
</script>
<style lang="scss" scoped>
.mk-signup {
padding: 32px 0 0;
.captcha {
margin: 16px 0;
}
}
</style>

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>

80
src/client/pages/instance/settings.vue
View file

@ -38,10 +38,28 @@
</div>
</section>
<section class="_card">
<div class="_title"><fa :icon="faShieldAlt"/> {{ $t('hcaptcha') }}</div>
<div class="_content">
<mk-switch v-model="enableHcaptcha" ref="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">
<header>{{ $t('preview') }}</header>
<captcha v-if="enableHcaptcha" provider="hcaptcha" :sitekey="hcaptchaSiteKey || '10000000-ffff-ffff-ffff-000000000001'"/>
</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">
<mk-switch v-model="enableRecaptcha">{{ $t('enableRecaptcha') }}</mk-switch>
<mk-switch v-model="enableRecaptcha" ref="enableRecaptcha">{{ $t('enableRecaptcha') }}</mk-switch>
<template v-if="enableRecaptcha">
<mk-input v-model="recaptchaSiteKey" :disabled="!enableRecaptcha"><template #icon><fa :icon="faKey"/></template>{{ $t('recaptchaSiteKey') }}</mk-input>
<mk-input v-model="recaptchaSecretKey" :disabled="!enableRecaptcha"><template #icon><fa :icon="faKey"/></template>{{ $t('recaptchaSecretKey') }}</mk-input>
@ -49,7 +67,7 @@
</div>
<div class="_content" v-if="enableRecaptcha && recaptchaSiteKey">
<header>{{ $t('preview') }}</header>
<div ref="recaptcha" style="margin: 16px 0 0 0;" :key="recaptchaSiteKey"></div>
<captcha v-if="enableRecaptcha" provider="grecaptcha" :sitekey="recaptchaSiteKey"/>
</div>
<div class="_footer">
<mk-button primary @click="save(true)"><fa :icon="faSave"/> {{ $t('save') }}</mk-button>
@ -210,6 +228,7 @@ export default Vue.extend({
MkTextarea,
MkSwitch,
MkInfo,
Captcha: () => import('../../components/captcha.vue').then(x => x.default),
},
data() {
@ -234,6 +253,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 +304,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;
@ -324,26 +349,38 @@ export default Vue.extend({
},
mounted() {
const renderRecaptchaPreview = () => {
if (!(window as any).grecaptcha) return;
if (!this.$refs.recaptcha) return;
if (!this.recaptchaSiteKey) return;
(window as any).grecaptcha.render(this.$refs.recaptcha, {
sitekey: this.recaptchaSiteKey
this.$refs.enableHcaptcha.$on('change', () => {
if (this.enableHcaptcha && this.enableRecaptcha) {
this.$root.dialog({
type: 'question', // warning だと間違って cancel するかもしれない
showCancelButton: true,
title: this.$t('settingGuide'),
text: this.$t('avoidMultiCaptchaConfirm'),
}).then(({ canceled }) => {
if (canceled) {
return;
}
this.enableRecaptcha = false;
});
};
window.onRecaotchaLoad = () => {
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();
this.$refs.enableRecaptcha.$on('change', () => {
if (this.enableRecaptcha && this.enableHcaptcha) {
this.$root.dialog({
type: 'question', // warning だと間違って cancel するかもしれない
showCancelButton: true,
title: this.$t('settingGuide'),
text: this.$t('avoidMultiCaptchaConfirm'),
}).then(({ canceled }) => {
if (canceled) {
return;
}
this.enableHcaptcha = false;
});
}
});
},
@ -391,6 +428,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,

17
src/models/entities/meta.ts
View file

@ -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,
})

33
src/server/api/endpoints/admin/update-meta.ts
View file

@ -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;
}

4
src/server/api/endpoints/meta.ts
View file

@ -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;

18
src/server/api/private/signup.ts
View file

@ -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,9 +10,21 @@ export default async (ctx: Koa.Context) => {
const instance = await fetchMeta(true);
// Verify recaptcha
// Verify *Captcha
// ただしテスト時はこの機構は障害となるため無効にする
if (process.env.NODE_ENV !== 'test' && instance.enableRecaptcha && instance.recaptchaSecretKey) {
if (process.env.NODE_ENV !== 'test') {
if (instance.enableHcaptcha && instance.hcaptchaSecretKey) {
const success = await verify(instance.hcaptchaSecretKey, body['hcaptcha-response']).then(
({ success }) => success,
() => false,
);
if (!success) {
ctx.throw(400, 'hcaptcha-failed');
}
}
if (instance.enableRecaptcha && instance.recaptchaSecretKey) {
recaptcha.init({
secret_key: instance.recaptchaSecretKey
});
@ -22,6 +35,7 @@ export default async (ctx: Koa.Context) => {
ctx.throw(400, 'recaptcha-failed');
}
}
}
const username = body['username'];
const password = body['password'];

1
src/server/nodeinfo.ts
View file

@ -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,

3
src/server/web/views/info.pug
View file

@ -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'

5
yarn.lock
View file

@ -4307,6 +4307,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"