使用 Rails 的新 recaptcha 的工作示例？

Question

有人在 Rails 应用程序中有 Google 的新 recaptcha 的工作示例吗？我尝试遵循的每个指南都不清楚或不完整，而且似乎使用了不同的方法。

最好手写代码。

正在进行的工作：

config/environments/production.rb:

  #...
  recaptcha_public_key= "[PUBLIC KEY]"
  recaptcha_private_key= "[PRIVATE KEY]"
end

config/environments/development.rb:

  #...
  recaptcha_public_key= "[PUBLIC KEY]"
  recaptcha_private_key= "[PRIVATE KEY]"
end

config/initializers/recaptcha.rb

Recaptcha.configure do |config|
  config.public_key  = Rails.application.secrets.recaptcha_public_key
  config.private_key = Rails.application.secrets.recaptcha_secret_key
  config.api_version = 'v2'
end

Answer 1

使用 recaptcha gem，我创建了一个使用复选框方法的示例。

此处提供代码： https://github.com/sunnyrjuneja/recaptcha_example

提交应该很容易理解。如果您还有其他问题，请告诉我。

此处的示例应用程序： https://recaptcha-checkbox.herokuapp.com/

更新：

这里有一个不用 secrets.yml.

的方法

将您的初始化程序更改为如下所示：

Recaptcha.configure do |config|
  config.public_key  = ENV['RECAPTCHA_PUBLIC_KEY']
  config.private_key = ENV['RECAPTCHA_PRIVATE_KEY']
end

在您的开发或生产环境中，将此添加到您的 .bashrc 或 .zshrc。

export RECAPTCHA_PUBLIC_KEY="YOURPUBLICKEY"
export RECAPTCHA_PRIVATE_KEY="YOURPRIVATEKEY"

如果您使用 Heroku 进行部署，请在命令行执行此操作：

heroku config:set RECAPTCHA_PUBLIC_KEY="YOURPUBLICKEY"
heroku config:set RECAPTCHA_PRIVATE_KEY="YOURPRIVATEKEY"

更新 2：

recaptcha gem 现在使用不同的方法名称来设置密钥。

Recaptcha.configure do |config| config.site_key = 'YOUR_SITE_KEY_HERE' config.secret_key = 'YOUR_SECRET_KEY_HERE' # Uncomment the following line if you are using a proxy server: # config.proxy = 'http://myproxy.com.au:8080' end

Answer 2

请关注：

第 1 步。在 Rails 应用程序上创建一个 Ruby：-

a) 打开终端，导航到您有权创建应用程序的目录并键入： rails 新回顾

b)创建应用程序后，切换到其文件夹：

$cd recap

c)类型和运行捆绑安装：

$bundle install

步骤 2. 创建模型、视图和控制器：-

步骤 3. 在 Rails 上将 Google Recaptcha 与 Ruby 集成：-

a) 请登录 Google Recaptcha 网站注册您的域以获取访问权限。(https://www.google.com/recaptcha/intro/index.html)

b) 请登录并注册您的站点，并提供详细信息 c)注册后google提供

脚本标记将此代码段放在 HTML 模板的结束标记之前。 div 将此代码段放在您想要的位置的末尾显示 reCAPTCHA 小部件。

d)完成上述步骤后，我们就可以在站点中看到recaptcha了。

f)对于服务器端验证，我们可以使用密钥和将作为参数发送到控制器中的表单提交操作的响应。

g)要检查 Google 是否已验证该用户，请发送包含这些 parameters:URL 的 GET 请求：https://www.google.com/recaptcha/api/siteverify

第 4 步。更改服务器端验证的应用程序代码。

请参阅以下链接了解更多详情，

1) recaptcha-in-rails

2) google-recaptcha-in-rails

布局中：

<script src='https://www.google.com/recaptcha/api.js'></script>

我的观点app/views/users/_form.html.erb:

<div class="g-recaptcha" data-sitekey="6LdgWwETAAAAAPwAddRqDtNbt9sdfsfsfsdJhggghhKKYTdadsHt54"></div>

在初始值设定项中：

SECRET_KEY = "my_secret_key_here"

在用户控制器中：

 def verify_google_recptcha(secret_key,response)
  status = `curl "https://www.google.com/recaptcha/api/siteverify?secret=#{secret_key}&response=#{response}"`
     logger.info "---------------status ==> #{status}"
     hash = JSON.parse(status)
     hash["success"] == true ? true : false
  end

  def create
    @user = User.new(user_params)
    status = verify_google_recptcha(SECRET_KEY,params["g-recaptcha-response"])
    respond_to do |format|
    if @user.save && status
      format.html { redirect_to @user, notice: 'User was successfully created.' }
      format.json { render :show, status: :created, location: @user }
    else
      format.html { render :new }
      format.json { render json: @user.errors, status: :unprocessable_entity }
    end
  end
end
logger.info "---------------status ==> #{status}" will print like below

错误：

---------------status ==> {
"success": false,
 "error-codes": [
  "missing-input-response"
 ]
}

成功

 ---------------status ==> {
"success": true
}

因为你可以拿 status["error-codes"][0] 并且你可以在 _form.html.erb

中展示它

在heroku

中查看我的申请

Answer 3

您应该试试 RailsCarma's Blog 中的这个例子。

按照以下步骤操作： 1）获取凭证 2）添加recaptcha标签 3) 要处理验证，创建一个 recaptcha class 4) 在注册控制器中添加 verify_recaptcha 方法

设置第 1 步：-

将以下内容添加到您的 gem 文件中：

gem “recaptcha”, :require => “recaptcha/rails”

第 2 步：-

登录 developers.google.com 并登录您的 gmail 帐户并搜索“recaptcha”。单击“注册 API 密钥”link。检查秘密和站点密钥。顾名思义，密钥应保存在更安全的位置，而站点密钥是用于 Google 身份验证的 public 密钥。使用您的 google 帐户注册您的站点名称以检索 public 和稍后将在应用程序中使用的私钥。

注册完成后，您将获得public密钥和私钥。从客户端，public 密钥被发送到 recaptcha 服务以请求新的验证码。私钥在服务器端应用，以验证是否输入了正确的值。

然后注册 reCAPTCHA API 密钥并将其添加到您的环境配置文件中：

#put this in development.rb and in production.rb
ENV_RECAPTCHA_PUBLIC_KEY= ‘your-public-key’
ENV_RECAPTCHA_PRIVATE_KEY= ‘your-private-key’

第 3 步：-

Create a file named recaptcha.rb in config/initializers to configure recaptcha parameters.
Recaptcha.configure do |config|
config.public_key = ‘ ENV_RECAPTCHA_PUBLIC_KEY’
config.private_key = ‘ENV_RECAPTCHA_PRIVATE_KEY’
config.proxy = ‘http://www.google.com/recaptcha/api/verify’
end

第 4 步：- 查看

验证码 Gem 有助于呈现实际的验证码框。就像在您希望验证码出现的位置将以下内容放入您的视图中一样简单：

<%= raw recaptcha_tags %>
If you are using SSL, use this instead:
<%= recaptcha_tags :ssl => true %>, The SSL option ensures we send a https request to the recaptcha service.

第 5 步：- 控制器

验证码 Gem 提供了另一种辅助方法，该方法会发送到 reCaptcha API 服务器以验证提交是否正确。如果是则方法 returns true，如果不是，它将向模型实例添加一条自定义错误消息，指出 recaptcha 错误。这是您在控制器的创建操作中可能拥有的基本代码：-

在设计控制器中，app/controllers/registrations_controller.rb，插入以下代码：

require ‘recaptcha.rb’
before_action :verify_recaptcha, only: [:create]
def verify_recaptcha
response = Recaptcha.verify(params)
session[:sign_up] = params[:user].except(:password, :password_confirmation, :remoteip)
if response.code == 200
if response[‘success’]
flash[:notice] = “Recaptcha verification successful.”
else
redirect_to new_user_registration_path(user: params[:user]),
alert: “Recaptcha verification error.”
end
else
redirect_to new_user_registration_path(user: params[:user]),
alert: “HTTP connection error.”
end
end

会话[:sign_up] 保持不变，因为如果验证失败，可以预先填写注册表单。

Answer 4

完整的解决方案，一步一步：

此处的其他答案不再有效，因为验证码 gem 已更新，您可以查看 here。这就是我如何在 Rails 6 应用程序中逐步使用 recaptcha。

第 1 步： 将 gem 放入您的 Gemfile 中：

gem 'recaptcha'

如果您使用 gems figaro（就像我的例子）或 dotenv 来存储 Env 变量，您需要将 recaptcha gem 放在这两个中任何一个的声明下方gems.

步骤 # 2： 获取 recaptcha APY 密钥：

转到属于 Google 的 reCAPTCHA admin console 页面，获取一个用于生产的 reCAPTCHA API 密钥和另一个用于开发的（稍后您会明白为什么）。暂时将所有这些信息复制到安全的地方。为了在这件事上有一些秩序，因为你将来可能需要几个其他的 recaptcha 键，你应该为这些 recaptcha 键的标签遵循某种独特的符号。例如，在我的案例中，它是针对我的个人网站的，所以我称它们为 reiniergarcia_production 和 reiniergarcia_development.

您需要 select 那里有您要使用的特定类型的验证码。一种 recaptcha 的 API 密钥不适用于另一种类型的 recaptcha。在我的例子中，我使用了 v2 Checkbox 类型（上面写着：“我不是机器人”）。

步骤 # 3: 将 recaptcha APY 密钥存储在 rails:

在我的例子中，我使用 Figaro 将我的环境变量存储在 rails 上，所以这就是我在 config/application.yml:

中输入的内容

production:
  recaptcha_site_key: 'wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww'
  recaptcha_secret_key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'

development:
  recaptcha_site_key: 'yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy'
  recaptcha_secret_key: 'zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz'

步骤 # 4： 添加 Recaptcha 初始值设定项：

我添加了文件 config/initializers/recaptcha.rb 并在里面放置了：

Recaptcha.configure do |config|
  # New configuration format:
  config.site_key = Figaro.env.recaptcha_site_key
  config.secret_key = Figaro.env.recaptcha_secret_key
end

这是新配置。请注意，现在是 site_key & secret_key（不再是 public_key 或 private_key）。 Figaro 将根据环境动态加载正确的密钥。在我的例子中，我部署到了 Heroku，但别担心，我很快就会到达那里。

第 5 步：将 recatcha 标签放入您的表单中：

这就是我在我的案例中所做的：

  <%= form_with(model: contact, local: true) do |form| %>
    <%= hidden_field_tag :return_to, return_to %>

    <%= form.text_field :name, placeholder: 'Name', autofocus: false %>
    <%= form.email_field :email, placeholder: 'Email', autofocus: false %>
    <%= form.text_field :subject, placeholder: 'Subject', autofocus: false %>
    <%= form.text_area :message, placeholder: 'Message', autofocus: false, disabled: false %>

    <div class="row">
      <div class="col-md-6">
        <div style="margin-top: 14px;">
          <%= recaptcha_tags %>
        </div>
      </div>

      <div class="col-md-6 submit-button">
        <%= form.submit "SEND", name: "send" %>
      </div>
    </div>
  <% end %>

第 6 步： 设计您的 recaptcha 标签：

您可能需要在前端（为 recaptcha_tags 助手生成）中设置 recaptcha 标签的位置 and/or 大小。这就是我在我的案例中所做的：

我将文件 app/assets/stylesheets/recaptcha_tags.scss 添加为：

.g-recaptcha {
  transform: scale(0.6);
  transform-origin: 0 0;
}

它首先允许减小 recaptcha 标签的大小（非常有用，因为 recaptcha 标签通常太大）。在你的情况下，如果你需要添加更多的样式，你应该把它放在那里，而不是与你的其他 css 代码混合。这个样式文件的导入方式是在app/assets/stylesheets/application.scss处添加如下：

// Imports the recaptcha_tags styling:
@import "recaptcha_tags";

旁注：如果您要使用多个布局，您应该为每个布局创建一个主 .scss 文件，并且在每个布局上您将只导入该特定布局所需的内容（仅那些额外的 .scss 绝对必要）。

第 7 步：添加 verify_recaptcha 逻辑：

您需要在各自控制器的正确操作中添加verify_recaptcha逻辑。在我的例子中，我只想在用户“不是机器人”时保留一个 Contact 对象，所以这就是我在 app/controllers/contacts_controller.rb:

所做的

  def create
    @contact = contact_service.build_contact(contact_params)

    if verify_recaptcha(model: @contact) && @contact.save
      redirect_notice = t('contacts.send.success_notice')
      redirect_to @return_to, notice: redirect_notice
    else
      flash[:alert] = @contact.errors.full_messages.first
      redirect_to @return_to
    end
  end

如果用户没有点击“我不是机器人”，它会在我的页面上显示 flash 错误。

步骤 # 8: 放置环境。服务器中的变量：

如前所述，我使用的是 Heroku。所以我只是去了我在 Heroku 中的仪表板，然后我点击了我的项目，稍后在设置选项卡中，然后在一个按钮中，上面写着：“显示配置变量”。然后我将在末尾添加以下对（仅限键和值）：

  recaptcha_site_key: 'wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww'
  recaptcha_secret_key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'

如您所见，我只添加了生产 recaptcha APY 密钥。

您可以从终端执行相同的操作：

$ heroku config:set recaptcha_site_key=wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
$ heroku config:set recaptcha_secret_key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

步骤 # 9: 将所有这些更改推送到 Github:

$ git push origin master

第 10 步：再次部署到 Heroku：

$ git push heroku master

就是这样。如果您按照这些步骤操作，您应该也会在您的生产网站上完美地获得您的 recaptcha 运行。希望有用。

使用 Rails 的新 recaptcha 的工作示例？

Working example of new recaptcha with Rails?

ruby

validation

ruby-on-rails

recaptcha

ruby-on-rails-4