网站端Google Sign-In功能无法正常使用问题求助

Hey there! Let’s break down why your Google Sign-In isn’t working and fix it step by step. I noticed a few key issues in your code snippet that are likely causing the problem:

1. Conflicting Sign-In Logic #

Your current code calls auth2.signIn() when the user is already signed in—that’s redundant and can trigger unexpected behavior. Instead, handle signed-in and signed-out states separately:

var auth2;
var initClient = function() {
  gapi.load('auth2', function(){
    auth2 = gapi.auth2.init({
      client_id: '*********.apps.googleusercontent.com',
      fetch_basic_profile: true, // Adjust based on your needs
      scope: 'profile'
    });
    
    auth2.then(function() {
      if (auth2.isSignedIn.get()) {
        // User is already signed in—run your post-login logic here
        const currentUser = auth2.currentUser.get();
        console.log('Signed-in user:', currentUser.getBasicProfile());
      } else {
        // Bind sign-in action to your button (replace with your button ID)
        document.getElementById('google-signin-btn').addEventListener('click', () => {
          auth2.signIn()
            .then(user => console.log('Login successful:', user))
            .catch(err => console.error('Login failed:', err));
        });
      }
    }).catch(err => console.error('Auth initialization failed:', err));
  });
};

// Initialize after DOM is ready to avoid missing elements
document.addEventListener('DOMContentLoaded', initClient);

2. Mismatched fetch_basic_profile and Scope #

You set fetch_basic_profile: false but requested the profile scope. This creates a conflict:

• If you don’t need user profile data, switch to the openid scope (required for Google Sign-In) and keep fetch_basic_profile: false.
• If you do need profile data, set fetch_basic_profile: true so the SDK automatically fetches basic profile info when a user signs in.

3. Incomplete Error Handling #

Your code cuts off mid-then() chain, which means you’re missing critical error feedback. Always add .catch() blocks to catch initialization or login errors—this will show you exactly what’s broken in your browser’s console.

4. Client ID & Domain Configuration #

Double-check these in Google Cloud Console:

• Ensure your client_id is copied correctly (no extra characters or typos).
• Add your website’s domain (or http://localhost:PORT for local testing) to the Authorized JavaScript origins list under your OAuth 2.0 client ID settings.

5. Clean Up Script Loading #

Remove the trailing ? from your API script URL—it’s unnecessary and can cause unexpected loading issues:

<!-- Google Authentication -->
<script async defer src="https://apis.google.com/js/api.js"></script>

Try these fixes one by one, and keep an eye on your browser’s developer console (F12) for any error messages—they’ll be your best clue if something still isn’t working.

内容的提问来源于stack exchange，提问作者G.Ff