-
-
Notifications
You must be signed in to change notification settings - Fork 86
sign in via QR code 📸
Yaro Shm edited this page Mar 10, 2024
·
1 revision
You can use gem rqrcode to generate a QR code to login.
Update app/views/passwordless/mailer/sign_in.html.erb
:
<% qrcode = RQRCode::QRCode.new(@magic_link) %>
<% svg = qrcode.as_svg(
offset: 0,
color: '000',
shape_rendering: 'crispEdges',
module_size: 11,
viewbox: true, # to control width within div. if "false", width is controlled by module_size
standalone: true) %>
<div style="width: 200px;">
<%= raw svg %>
</div>
result:
![Screenshot 2024-03-10 at 16 30 48](https://private-user-images.githubusercontent.com/13472945/311530773-bec1948d-5ec3-44c6-ab41-937f6e373242.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEzMzA1OTMsIm5iZiI6MTcyMTMzMDI5MywicGF0aCI6Ii8xMzQ3Mjk0NS8zMTE1MzA3NzMtYmVjMTk0OGQtNWVjMy00NGM2LWFiNDEtOTM3ZjZlMzczMjQyLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzE4VDE5MTgxM1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTJlZTJlNjUzYTFiOWRkOTQyNTM1ZDA3NmI5MDUzODdjMDhhYTY5MDVmYzVjZGNiYWQwNTAxZmRkY2YyNGVhY2UmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.QIS2mu8FQmgsPqApKIYOPKfeEoitHJbOXFL9YahxOM8)
It is tricker to display the QR code in plain-text email. So far this is the closest I got by updating app/views/passwordless/mailer/sign_in.text.erb
:
<% qrcode = RQRCode::QRCode.new("http:https://github.com/") %>
<%= qrcode.to_s.gsub('x', "\u2588") %>
![Screenshot 2024-03-10 at 18 57 41](https://private-user-images.githubusercontent.com/13472945/311531513-7c8ffa37-df72-421e-9ce3-18576ab4a0c7.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEzMzA1OTMsIm5iZiI6MTcyMTMzMDI5MywicGF0aCI6Ii8xMzQ3Mjk0NS8zMTE1MzE1MTMtN2M4ZmZhMzctZGY3Mi00MjFlLTljZTMtMTg1NzZhYjRhMGM3LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzE4VDE5MTgxM1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTVjNjM2MDE3N2NkNTlmNWU0YmJhMzAzNGQ2MDk5OWUzYzUwZDBmMjI0OTQ2OGJhY2Y2ZmJkMmNlOTc4ZTI2OTEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.t5_RNmNgpyvI9EUC7-u5pqSjNCoxE215EERFmjb_rXU)
🚨 My phone did not manage to read this plain-text QR code. Better solutions would be appreciated