如何使用Google Identity Services JS SDK实现授权？官方示例中的两处核心疑问咨询

Let's Fix Your Google OAuth 2.0 Code Flow Issues #

I see exactly where you're stuck—let's tackle your two questions and fix that broken code snippet so you can get the auth flow working end-to-end.

1. What is AUTHORIZATION_CODE_ENDPOINT_URI? #

This is an endpoint you build on your own backend server. Its core job is to receive the short-lived authorization code from your frontend, then securely exchange that code with Google's OAuth 2.0 server for a valid access token and refresh token.

You can't handle this exchange directly in the browser because it requires your Google Cloud project's client_secret—exposing that sensitive value in frontend code is a massive security risk. So the frontend only passes the temporary code to your backend, which handles the secret part of the transaction safely.

For example, if you're using Node.js/Express, this might be a route like /api/google/auth/exchange-code; if you're on Python/Flask, it could be /google-auth/callback. The exact path depends on your backend setup, but it needs to accept POST requests and implement the code-to-token exchange logic.

2. Where does the code variable come from? #

This is a straightforward bug in your code! The authorization code is included in the response object that gets passed to your callback function. You're trying to use a variable named code that doesn't exist—you need to access response.code instead.

Also, always URL-encode the code before sending it via x-www-form-urlencoded to avoid issues with special characters that might break the request.

Fixed Code Snippet #

Here's your corrected JavaScript code with these fixes applied:

var client;
function initClient() {
  client = google.accounts.oauth2.initCodeClient({
    client_id: 'YOUR_CLIENT_ID',
    scope: 'https://www.googleapis.com/auth/calendar.readonly',
    ux_mode: 'popup',
    callback: (response) => {
      // Fixed: Removed trailing comma that would cause syntax issues
      var code_receiver_uri = 'YOUR_AUTHORIZATION_CODE_ENDPOINT_URI';
      // Send auth code to your backend platform
      const xhr = new XMLHttpRequest();
      xhr.open('POST', code_receiver_uri, true);
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
      xhr.onload = function() {
        console.log('Signed in as: ' + xhr.responseText);
      };
      // Fixed: Use response.code and URL-encode it to avoid request errors
      xhr.send('code=' + encodeURIComponent(response.code));
      // After receipt, the code is exchanged for an access token and
      // refresh token, and the platform then updates this web app
      // running in user's browser with the requested calendar info.
    },
  });
}
function getAuthCode() {
  // Request authorization code and obtain user consent
  client.requestCode();
}

Quick Backend Exchange Tip #

Once your backend receives the code, it needs to send a POST request to Google's token endpoint (https://oauth2.googleapis.com/token) with these parameters:

• code: The authorization code from the frontend
• client_id: Your Google Cloud client ID
• client_secret: Your Google Cloud client secret
• redirect_uri: Must match the one configured in your Google Cloud Console (for the popup flow, this is usually your frontend page's URL, or you can explicitly set it in initCodeClient)
• grant_type: authorization_code

Google will respond with an access token (for making Calendar API requests), a refresh token (for getting new access tokens when the old one expires), and an expiration time. Your backend can then use the access token to fetch the user's calendar data and send it back to the frontend.

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