Matt

It performs an AJAX request to the plugin’s backend to generate a new secret code. It then fills a form field with that value and generates a scannable QR code with Google’s Chart API.

Coolbeans, thanks!

Sidenote: This is the only role manager plugin that I could find that was intuitive to use for non-techie people in our organization and suited our needs perfectly of needing to maintain multiple roles per user.

Here’s a diff of the changes I made for AJAX support. Even supports lack of javascript support. I think this works really well and suits the purpose well of only showing to those who need it.

--- google-authenticator (copy).php	2013-06-10 13:06:42.000000000 -0700
+++ google-authenticator.php	2013-06-10 13:54:21.000000000 -0700
@@ -61,8 +61,10 @@
     add_action( 'login_footer', array( $this, 'loginfooter' ) );
     add_filter( 'authenticate', array( $this, 'check_otp' ), 50, 3 );

-    if ( defined( 'DOING_AJAX' ) && DOING_AJAX )
+    if ( defined( 'DOING_AJAX' ) && DOING_AJAX ) {
         add_action( 'wp_ajax_GoogleAuthenticator_action', array( $this, 'ajax_callback' ) );
+        add_action( 'wp_ajax_nopriv_check_otp_action', array( $this, 'ajax_check_otp' ) );
+    }

     add_action( 'personal_options_update', array( $this, 'personal_options_update' ) );
     add_action( 'profile_personal_options', array( $this, 'profile_personal_options' ) );
@@ -139,7 +141,7 @@
  * Add verification code field to login form.
  */
 function loginform() {
-    echo "\t<p>\n";
+    echo "\t<p id=\"google-auth\">\n";
     echo "\t\t<label title=\"".__('If you don\'t have Google Authenticator enabled for your WordPress account, leave this field empty.','google-authenticator')."\">".__('Google Authenticator code','google-authenticator')."<span id=\"google-auth-info\"></span><br />\n";
     echo "\t\t<input type=\"text\" name=\"googleotp\" id=\"user_email\" class=\"input\" value=\"\" size=\"20\" /></label>\n";
     echo "\t</p>\n";
@@ -153,6 +155,29 @@
     echo "\ttry{\n";
     echo "\t\tdocument.getElementById('user_email').setAttribute('autocomplete','off');\n";
     echo "\t} catch(e){}\n";
+    echo "jQuery(function($) {
+            $('#google-auth').hide();
+            $('#user_login').on('blur', function() {
+                if ($(this).val() != '') {
+                    var data = {
+                        action: 'check_otp_action',
+                        user: $(this).val()
+                    };
+                    $.post(
+                        '", admin_url('admin-ajax.php'), "',
+                        data,
+                        function(response) {
+                            if (response == true) {
+                                $('#google-auth').slideDown();
+                            } else {
+                                $('#google-auth').slideUp();
+                            }
+                        },
+                        'json'
+                    );
+                }
+            });
+        });";
     echo "</script>\n";
 }

@@ -492,6 +517,17 @@
 	die();
 }

+/**
+ * AJAX Callback to determine if user should have OTP
+ */
+function ajax_check_otp() {
+	$user = get_user_by( 'login', $_POST['user'] );
+
+	// Does the user have the Google Authenticator enabled ?
+	echo json_encode(trim(get_user_option( 'googleauthenticator_enabled', $user->ID ) ) == 'enabled');
+    die();
+}
+
 } // end class

 $google_authenticator = new GoogleAuthenticator;

Rather than a second page, I would like to see something in the form of AJAX – when the username field is ‘blured’, run an AJAX call to see if that username requires OTP and if so, show the OTP box.