Как использовать google recaptcha в nuxt?


Как использовать google recaptcha в nuxt?

25.08.2020 11:19:26 Просмотров 4 Источник

Я использую nuxt и хотел бы использовать эту библиотеку: https://github.com/nuxt-community/recaptcha-module. Но я не понимаю, как проверить, что пользователь прошел проверку. Этот пример не говорит мне слишком много (https://github.com/nuxt-community/recaptcha-module/blob/master/example/v3/pages/index.vue). Может ли кто-нибудь показать мне, как это сделать правильно?

У вопроса есть решение - Посмотреть?

Ответы - Как использовать google recaptcha в nuxt? / How to use google recaptcha in nuxt?

Является ответом!
Jordan

25.08.2020 11:42:30

Этот пример-только половина истории. Он возвращает токен Recaptcha V3 на стороне клиента.

Затем он должен быть отправлен на сервер и проверен с помощью вашего секретного ключа.

Это делается путем отправки сообщения по этому адресу:

const url = `https://www.google.com/recaptcha/api/siteverify?secret=${secretKey}&response=${token}`;

Вы не хотите, чтобы этот секретный ключ был разрешен на стороне клиента.

Для достижения этой цели в Nuxt, предполагая версию 2.13+, вы можете использовать privateRuntimeConfig в вашей конфигурации nuxt.

Это позволит вам связать файл. env, который будет введен только на стороне сервера.

Для этого случая использования должно быть достаточно такого privateRuntimeConfig:

privateRuntimeConfig: {
    secretKey: process.env.GOOGLE_SECRET
}

Как только вы это сделаете, вы сможете получить доступ к этим переменным как к части this.$config в вашем приложении Nuxt - в данном случае this.$config.secretKey при вызове конечной точки Recaptcha verify.

Для получения дополнительной информации посетите блог Nuxt

Daniel Danielecki

15.11.2020 08:11:26

Использование https://github.com/nuxt-community/recaptcha-module, в вашем nuxt.config.js

modules: [
  '@nuxtjs/recaptcha',
],

recaptcha: {
  hideBadge: true,
  siteKey: "ABC...", // Better would be from 'process.env.API_KEY' and with '.env' file
  version: 2, // Or 3
},

Имейте в виду, что modules-это не то же самое, что buildModules (иногда это может сбить с толку из-за схожего наименования).

Помочь в развитии проекта:
Закрыть X