Search code examples
ruby-on-railsrubyqr-code

Ruby on Rails QR-Code with RQRCode-Gem not working

I'm trying to implement a two-factor-authentication for my Rails application and the tokens work fine, but the QR-Code isn't.

I want to create the provisioning_uri inside the code and therefore I'm using the RQRCode-Gem, which is recommended for this.

So basically I did everything like it's mentioned in the GitHub-Repo, but I don't get it working.

In my Gemfile I added:

gem 'active_model_otp'
gem 'rqrcode'

Then in my UsersController, I'm creating a new instance of the QR-Code library and passing in the parameters (show-Action):

@qr = RQRCode::QRCode.new(@user.provisioning_uri, :size => 8, :level => :h)

And then, like it's written in the Readme, I added the table for my QR-Code in my view:

<table class="qr">
      <% @qr.modules.each_index do |x| %>
          <tr>
            <% @qr.modules.each_index do |y| %>
                <% if @qr.dark?(x,y) %>
                    <td class="black">
                <% else %>
                    <td class="white">
                <% end %>
            <% end %>
          </tr>
      <% end %>
    </table>

I also added the necessary styles to my application.scss:

.qr {
    border-width: 0;
    border-style: none;
    border-color: #0000ff;
    border-collapse: collapse;
    width: 50%;
  }
  .qr td {
    border-width: 0;
    border-style: none;
    border-color: #0000ff;
    border-collapse: collapse;
    padding: 0;
    margin: 0;
    width: 10px;
    height: 10px;
  }
  .qr td.black { background-color: #000; }
  .qr td.white { background-color: #fff; }

So I don't think there is any fault from my side, at least I can't seem to find it.

If I run my application now and enter my show-Page I get the following error:

enter image description here

It looks like my application can't find the resource or something.

Any suggestions?

Solution

  • Okay I fixed it myself by rendering the QR-Code as PNG and show it with the chuny_png gem's to_data_url method. Just in case somebody gets the same problem! :)