create qrcode in the browser instead of an external service

src/opnsense/www/js/jquery.qrcode.js

+(function( $ ){
+	$.fn.qrcode = function(options) {
+		// if options is string, 
+		if( typeof options === 'string' ){
+			options	= { text: options };
+		}
+
+		// set default values
+		// typeNumber < 1 for automatic calculation
+		options	= $.extend( {}, {
+			render		: "canvas",
+			width		: 256,
+			height		: 256,
+			typeNumber	: -1,
+			correctLevel	: QRErrorCorrectLevel.H,
+                        background      : "#ffffff",
+                        foreground      : "#000000"
+		}, options);
+
+		var createCanvas	= function(){
+			// create the qrcode itself
+			var qrcode	= new QRCode(options.typeNumber, options.correctLevel);
+			qrcode.addData(options.text);
+			qrcode.make();
+
+			// create canvas element
+			var canvas	= document.createElement('canvas');
+			canvas.width	= options.width;
+			canvas.height	= options.height;
+			var ctx		= canvas.getContext('2d');
+
+			// compute tileW/tileH based on options.width/options.height
+			var tileW	= options.width  / qrcode.getModuleCount();
+			var tileH	= options.height / qrcode.getModuleCount();
+
+			// draw in the canvas
+			for( var row = 0; row < qrcode.getModuleCount(); row++ ){
+				for( var col = 0; col < qrcode.getModuleCount(); col++ ){
+					ctx.fillStyle = qrcode.isDark(row, col) ? options.foreground : options.background;
+					var w = (Math.ceil((col+1)*tileW) - Math.floor(col*tileW));
+					var h = (Math.ceil((row+1)*tileW) - Math.floor(row*tileW));
+					ctx.fillRect(Math.round(col*tileW),Math.round(row*tileH), w, h);  
+				}	
+			}
+			// return just built canvas
+			return canvas;
+		}
+
+		// from Jon-Carlos Rivera (https://github.com/imbcmdth)
+		var createTable	= function(){
+			// create the qrcode itself
+			var qrcode	= new QRCode(options.typeNumber, options.correctLevel);
+			qrcode.addData(options.text);
+			qrcode.make();
+			
+			// create table element
+			var $table	= $('<table></table>')
+				.css("width", options.width+"px")
+				.css("height", options.height+"px")
+				.css("border", "0px")
+				.css("border-collapse", "collapse")
+				.css('background-color', options.background);
+		  
+			// compute tileS percentage
+			var tileW	= options.width / qrcode.getModuleCount();
+			var tileH	= options.height / qrcode.getModuleCount();
+
+			// draw in the table
+			for(var row = 0; row < qrcode.getModuleCount(); row++ ){
+				var $row = $('<tr></tr>').css('height', tileH+"px").appendTo($table);
+				
+				for(var col = 0; col < qrcode.getModuleCount(); col++ ){
+					$('<td></td>')
+						.css('width', tileW+"px")
+						.css('background-color', qrcode.isDark(row, col) ? options.foreground : options.background)
+						.appendTo($row);
+				}	
+			}
+			// return just built canvas
+			return $table;
+		}
+  
+
+		return this.each(function(){
+			var element	= options.render == "canvas" ? createCanvas() : createTable();
+			$(element).appendTo(this);
+		});
+	};
+})( jQuery );

src/opnsense/www/js/jquery.qrcode.js.LICENSE

+Copyright (c) 2011 Jerome Etienne, http://jetienne.com
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
\ No newline at end of file

src/www/system_usermanager.php

@@ -368,6 +368,8 @@ legacy_html_escape_form_data($a_user);
 include("head.inc");
 
 ?>
+<script type="text/javascript" src="/ui/js/jquery.qrcode.js"></script>
+<script type="text/javascript" src="/ui/js/qrcode.js"></script>
 
 <body>
 
@@ -853,13 +855,16 @@ $( document ).ready(function() {
 <?php
                         if (!empty($pconfig['otp_seed'])):
                             // construct google url, using token, username and this machines hostname
-                            $google_otp_url = "https://chart.googleapis.com/chart?chs=200x200&amp;chld=M|0&amp;cht=qr&amp;chl=otpauth://totp/";
-                            $google_otp_url .= $pconfig['usernamefld']."@".htmlspecialchars($config['system']['hostname'])."%3Fsecret%3D";
-                            $google_otp_url .= $pconfig['otp_seed'];
+                            $otp_url = "otpauth://totp/";
+                            $otp_url .= $pconfig['usernamefld']."@".htmlspecialchars($config['system']['hostname'])."?secret=";
+                            $otp_url .= $pconfig['otp_seed'];
                         ?>
                             <br/>
-                            <?=gettext("When using google authenticator, the following link provides a qrcode for easy setup");?><br/>
-                            <a href="<?=$google_otp_url;?>" target="_blank"><?=$google_otp_url;?></a>
+                            <?=gettext("When using google authenticator, scan the following qrcode for easy setup:");?><br/>
+                            <div id="otp_qrcode"></div>
+                            <script type="text/javascript">
+                                $('#otp_qrcode').qrcode('<?= $otp_url ?>');
+                            </script>
 <?php
                         endif;?>
                       </div>