Open VoiceHub

Google Calendar

This documentation provides step-by-step instructions for setting up the Google Calendar API and configuring OAuth2 tokens, with detailed focus on the authorization flow steps 4 and 5.

Prerequisites

  • Google account

  • Postman (for API testing)

  • Basic understanding of OAuth2 flow

  • Web application or development environment

Step 1: Create a Google Cloud Project

  1. Navigate to the Google Cloud Console

  2. Click "Select a project" → "New Project"

  3. Enter a project name (e.g., "My Calendar Integration")

  4. Click "Create"

Step 2: Enable Google Calendar API

  1. In the Google Cloud Console, go to "APIs & Services" → "Library"

  2. Search for "Google Calendar API"

  3. Click on "Google Calendar API" and click "Enable"

Step 3: Configure OAuth2 Consent Screen

  1. Go to "APIs & Services" → "OAuth consent screen"

  2. Choose "External" (for testing) or "Internal" (for organization use)

  3. Fill in the required information:

    • App name

    • User support email

    • Developer contact information

  4. Add scopes: https://www.googleapis.com/auth/calendar

  5. Add test users (if using External type)

  6. Click "Save and Continue" through all steps

Step 4: Create OAuth2 Credentials

  1. Go to "APIs & Services" → "Credentials"

  2. Click "Create Credentials" → "OAuth 2.0 Client IDs"

  3. Choose "Web application" as the application type

  4. Configure the OAuth client:

    • Name: Give your OAuth client a descriptive name

    • Authorized JavaScript origins: Add your domain (e.g., http://localhost:3000 for development)

    • Authorized redirect URIs: Add your callback URL (e.g., http://localhost:3000/callback)

  5. Click "Create"

  6. Important: Copy and securely store the generated:

    • Client ID

    • Client Secret

OAuth2 Client Configuration Details

{
  "web": {
    "client_id": "your-client-id.apps.googleusercontent.com",
    "project_id": "your-project-id",
    "auth_uri": "https://accounts.google.com/o/oauth2/auth",
    "token_uri": "https://oauth2.googleapis.com/token",
    "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
    "client_secret": "your-client-secret",
    "redirect_uris": ["http://localhost:8080"]
  }
}

Step 5: Implement OAuth2 Authorization Flow

5.1 Generate Authorization URL

Create the authorization URL to redirect users to Google's OAuth2 server:

https://accounts.google.com/o/oauth2/v2/auth?
  client_id=YOUR_CLIENT_ID&
  response_type=code&
  scope=https://www.googleapis.com/auth/calendar&
  access_type=offline&
  redirect_uri=http://localhost:8081&
  state=RANDOM_STATE_STRING

Parameters Explanation:

  • client_id: Your OAuth2 client ID from Step 4

  • response_type=code: Indicates authorization code flow

  • scope: Calendar access permission

  • access_type=offline: Enables refresh token generation

  • redirect_uri: Must match the URI configured in Step 4

  • state: Security parameter to prevent CSRF attacks

This can be done with the following curl code

5.2 Handle Authorization Response

After user consent, Google redirects to your callback URL with:

  • Success: ?code=AUTHORIZATION_CODE&state=STATE_VALUE

  • Error: ?error=access_denied&state=STATE_VALUE

5.3 Exchange Authorization Code for Tokens

Using Postman for Token Exchange:

  1. Create a new POST request in Postman

  2. URL: https://oauth2.googleapis.com/token

  3. Headers:

    Content-Type: application/x-www-form-urlencoded

  4. Body (select "x-www-form-urlencoded"):

    client_id: YOUR_CLIENT_ID
client_secret: YOUR_CLIENT_SECRET
code: AUTHORIZATION_CODE_FROM_CALLBACK
grant_type: authorization_code
redirect_uri: YOUR_REDIRECT_URI
curl --location 'https://oauth2.googleapis.com/token' \
--header 'Content-Type: application/x-www-form-urlencoded' \
--data-urlencode 'code=<code retrieved above>' \
--data-urlencode 'client_id=<clientId>' \
--data-urlencode 'client_secret=<client Secret>' \
--data-urlencode 'grant_type=authorization_code' \
--data-urlencode 'redirect_uri=https://localhost:8081'

Expected Response:

{
  "access_token": "ya29.a0AfH6SMC...",
  "expires_in": 3599,
  "refresh_token": "1//04-xxxxxxxxxxx",
  "scope": "https://www.googleapis.com/auth/calendar",
  "token_type": "Bearer"
}

5.4 Store Tokens Securely

  • Access Token: Short-lived (1 hour), used for API requests

  • Refresh Token: Long-lived, used to generate new access tokens

  • Store both tokens securely (encrypted database, secure environment variables)

Additional Resources

PreviousCalendar Integration

Last updated