Google API Client Ruby端OAuth2授权报错redirect_uri_mismatch求助

Hey there, let's get this sorted out for your graduation project—this redirect URI mismatch is a tricky but common OAuth2 pitfall. Let's break down the most likely fixes based on your setup:

1. You're Using the Wrong Redirect URI in Your Backend Code #

This is the #1 culprit here. Let's clarify the OAuth2 flow to spot the mistake:

• Step 1: Your React frontend sends the user to Google's authorization page with a redirect_uri (this should be a frontend route where Google sends the authorization code after user approval).
• Step 2: Your frontend takes that code and sends it to your Rails backend's /api/v1/auth endpoint.
• Step 3: When your backend exchanges the code for a token, it must use the exact same redirect_uri that the frontend used in Step 1—not your backend's /api/v1/auth endpoint.

Looking at your code, you've hardcoded http://lvh.me:3000/api/v1/auth as the redirect URI for the token exchange, but that's your backend's API route, not the frontend callback URL.

Fix: #

• First, confirm what redirect_uri your React app is using when initiating the OAuth request (e.g., if you're using react-google-login, check the redirectUri prop). Let's say your frontend callback is http://lvh.me:3000/auth/callback.
• Update your Rails backend code to use that exact URI:

  auth_client.update!(
    :scope => 'profile https://www.googleapis.com/auth/gmail.readonly https://www.googleapis.com/auth/gmail.send',
    :redirect_uri => 'http://lvh.me:3000/auth/callback' # Match frontend's authorization redirect URI
  )
  

• Add this frontend callback URI to your Google API Console's authorized redirect URIs list.

2. Check for Exact String Matches (No Trailing Slashes, Case Sensitivity) #

Google's OAuth server enforces strict exact matches for redirect URIs. Even tiny differences will trigger the error:

• Trailing slashes: http://lvh.me:3000/auth/callback vs http://lvh.me:3000/auth/callback/ are considered different.
• Domain variations: localhost vs 127.0.0.1 are not interchangeable (even if they point to the same place).
• Port numbers: Double-check the port matches (3000 for frontend, make sure your Rails server isn't running on a different port by accident).

Fix: #

• Print the actual redirect URI your backend is using before fetching the token to verify:

  puts "Current redirect URI: #{auth_client.redirect_uri}" # Add this line before fetch_access_token!
  

• Compare this output directly to the URIs listed in your Google API Console—no typos allowed.

3. Clear Rails Cache & Verify Client Secrets Loading #

Rails might be caching your client_secrets.json file, especially in development. If you updated the file recently but didn't restart your server, your backend could still be using old settings.

Fix: #

• Restart your Rails server entirely.
• Verify that client_secrets.json is being loaded correctly by printing its contents:

  secrets = Google::APIClient::ClientSecrets.load("client_secrets.json")
  puts "Loaded redirect URIs: #{secrets.web.redirect_uris}"
  

• Ensure the loaded URIs include the frontend callback URI you're using.

4. Confirm You're Using the Correct OAuth Client ID #

It's easy to mix up client IDs if you have multiple projects or OAuth clients in the Google API Console.

Fix: #

• Double-check that the client_id in your client_secrets.json matches exactly the one in the Google API Console for your project.
• Make sure you're using a Web application OAuth client (not a Desktop or Mobile client) since this is a web app.

Quick Test to Validate #

Once you've updated the redirect URI in your backend:

1. Make sure the frontend's OAuth request uses the same URI.
2. Add that URI to Google Console's authorized redirect URIs.
3. Restart Rails and React servers.
4. Go through the auth flow again—this should resolve the mismatch error.

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