Great question! Let me break this down clearly for you—yes, the new Google Identity Services (GIS) JavaScript library does support authorizing requests to Google APIs (like Calendar, Drive, Gmail, etc.), even though this capability might fly under the radar in some sections of the official docs. It’s not just for login; it fully replaces the old platform.js and gapi.client libraries for both authentication and API authorization. Here’s a step-by-step guide to make it work:

Step 1: Load the GIS Library #

First, add the GIS script to your page (async/defer ensures it doesn’t block your page load):

<script src="https://accounts.google.com/gsi/client" async defer></script>

Step 2: Initialize the OAuth 2.0 Token Client #

You’ll use google.accounts.oauth2.initTokenClient to set up your authorization client. This requires your Google Cloud client ID, the API scopes you need access to, and a callback to handle the token response.

For example, if you need read access to the user’s Calendar:

const tokenClient = google.accounts.oauth2.initTokenClient({
  client_id: 'YOUR_GOOGLE_CLOUD_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  callback: (tokenResponse) => {
    if (tokenResponse.error) {
      console.error('Authorization error:', tokenResponse.error);
      return;
    }
    // Token is valid—use it to call the Google API
    fetchCalendarEvents(tokenResponse.access_token);
  },
});

Step 3: Trigger the Authorization Flow #

Add a button or any user interaction to kick off the authorization request. When the user clicks, call requestAccessToken() on your token client.

• Use prompt: '' to silently retrieve a token if the user has already granted access; if not, a consent window will pop up.
• Use prompt: 'consent' to force the user to re-confirm their permissions (useful if you’re adding new scopes later).

document.getElementById('authorize-calendar-btn').addEventListener('click', () => {
  // Trigger the authorization flow
  tokenClient.requestAccessToken({prompt: ''});
});

Step 4: Call the Google API with the Access Token #

Once you have a valid access token, you can use it to make authenticated requests to the Google API via fetch (no need for the old gapi.client anymore):

function fetchCalendarEvents(accessToken) {
  fetch('https://www.googleapis.com/calendar/v3/calendars/primary/events', {
    headers: {
      'Authorization': `Bearer ${accessToken}`,
      'Content-Type': 'application/json'
    }
  })
  .then(response => {
    if (!response.ok) throw new Error('API request failed');
    return response.json();
  })
  .then(data => {
    // Handle the returned calendar events
    console.log('User\'s calendar events:', data.items);
    // Render events to your UI here
  })
  .catch(error => console.error('Error fetching events:', error));
}

Key Additional Notes #

• Refresh Tokens: For long-term access (e.g., syncing data when the user isn’t active), add the offline_access scope to your client initialization. You’ll receive a refresh token in the response, which you can store securely. Use google.accounts.oauth2.refreshToken to get a new access token when the old one expires.
• Revoke Access: To let users revoke your app’s permissions, call google.accounts.oauth2.revoke('USER_ACCESS_TOKEN_OR_EMAIL').
• Scopes: Always request the narrowest scopes possible (e.g., calendar.readonly instead of calendar) to comply with Google’s policies and build user trust.

To address your core concern: The new GIS library is designed to handle both user authentication (login) and API authorization—it’s a full replacement for the old libraries, not just a login-only tool. The documentation splits login and authorization topics, which can make the API authorization flow easy to miss, but it’s absolutely supported.

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