求助：实现仅Google登录用户可提交注册表单的功能（已启用Google Sign-In）

Got it, let's get this sorted so users can only submit your registration form after signing in with Google. You already have the client ID and scope set up, so let's build on that with concrete steps and code:

Step 1: Make Sure the Google Sign-In Script is Included #

First, double-check you've added the official Google Sign-In script to your page (this is required for the functionality to work):

<script src="https://apis.google.com/js/platform.js" async defer></script>

Step 2: Add the Sign-In Button & Disable Form Submit by Default #

Add the Google Sign-In button to your page, and set your form's submit button to be disabled initially. This ensures users can't submit until they sign in:

<!-- Google Sign-In Button -->
<div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div>

<!-- Your Registration Form -->
<form id="registrationForm">
  <!-- Your existing form fields here (name, etc.) -->
  <input type="text" name="fullName" placeholder="Full Name" required>
  <!-- ... other fields ... -->
  
  <!-- Disabled Submit Button -->
  <button type="submit" id="submitBtn" disabled>Submit Registration</button>
</form>

Step 3: Implement the Sign-In Callback #

Create a JavaScript function that triggers when a user successfully signs in. This function will enable the submit button and can capture user details (like email) to pre-fill or attach to your form submission:

function onSignIn(googleUser) {
  // Get user profile info (optional, but useful for your form)
  const profile = googleUser.getBasicProfile();
  console.log('Signed in as: ' + profile.getName());
  console.log('User email: ' + profile.getEmail());
  
  // Enable the submit button
  document.getElementById('submitBtn').disabled = false;
  
  // Optional: Store user ID token in a hidden field for server-side verification
  const idToken = googleUser.getAuthResponse().id_token;
  const hiddenTokenField = document.createElement('input');
  hiddenTokenField.type = 'hidden';
  hiddenTokenField.name = 'googleIdToken';
  hiddenTokenField.value = idToken;
  document.getElementById('registrationForm').appendChild(hiddenTokenField);
}

Step 4: Check for Existing Signed-In Users on Page Load #

If a user is already signed in to Google when they visit your page, you should automatically enable the submit button instead of making them sign in again:

// Wait for the Google API to load before checking
window.onload = function() {
  gapi.load('auth2', function() {
    gapi.auth2.init({
      client_id: '964441361771-o54lshie0mvgufergku9a35oi8o3bl1n.apps.googleusercontent.com'
    }).then(function(authInstance) {
      if (authInstance.isSignedIn.get()) {
        // User is already signed in, enable submit button
        document.getElementById('submitBtn').disabled = false;
        // Optional: Get existing user profile
        const currentUser = authInstance.currentUser.get();
        const profile = currentUser.getBasicProfile();
        console.log('Existing user: ' + profile.getName());
      }
    });
  });
};

Step 5: Add a Guard to Prevent Unauthorized Form Submission #

Even if someone tries to enable the submit button via browser dev tools, add a check in your form's submit event to block submission if no user is signed in:

document.getElementById('registrationForm').addEventListener('submit', function(e) {
  const authInstance = gapi.auth2.getAuthInstance();
  if (!authInstance.isSignedIn.get()) {
    e.preventDefault(); // Stop form submission
    alert('Please sign in with Google to submit the form.');
    // Optionally, scroll to the sign-in button
    document.querySelector('.g-signin2').scrollIntoView();
  }
});

Optional: Add Sign-Out Functionality #

If you want users to be able to switch accounts, add a sign-out button and function:

<button onclick="signOut()">Sign Out</button>

function signOut() {
  const authInstance = gapi.auth2.getAuthInstance();
  authInstance.signOut().then(function() {
    console.log('User signed out');
    // Disable submit button again
    document.getElementById('submitBtn').disabled = true;
    // Remove the hidden ID token field if present
    const tokenField = document.querySelector('input[name="googleIdToken"]');
    if (tokenField) tokenField.remove();
  });
}

Common Pitfalls to Check #

• Ensure your Google Client ID is exactly the one provided in your meta tag (no typos!)
• Make sure the data-onsuccess attribute on the sign-in button matches the name of your callback function (onSignIn)
• Verify that your domain is authorized in the Google Cloud Console (under OAuth 2.0 Client IDs > Authorized JavaScript origins)

内容的提问来源于stack exchange，提问作者Danish Khan