How to build a public Cisco Webex integration: Building the Auth Flow

Aug 7, 2024 • 7 minute read

Hey there, fellow JavaScript developer! Ready to dive into the world of Cisco Webex integrations? Today, we're going to focus on one of the most crucial aspects of building a public integration: the authorization flow. Don't worry, I'll keep things concise and to the point – I know you've got code to write!

Introduction

Cisco Webex integrations are a powerful way to extend the platform's capabilities, and getting the auth flow right is key to creating a smooth user experience. We'll be walking through the process of setting up and implementing OAuth 2.0 for your integration. Trust me, it's not as daunting as it sounds!

Prerequisites

Before we jump in, make sure you've got:

A Cisco Webex developer account (if you don't have one, go grab it – it's free!)
Node.js and npm installed on your machine
A solid understanding of OAuth 2.0 (but don't sweat it if you're a bit rusty)

Setting up the project

Let's get our project off the ground:

mkdir webex-integration && cd webex-integration
npm init -y
npm install express axios dotenv

Configuring the Cisco Webex integration

Head over to the Cisco Webex developer portal and create a new integration. You'll need to jot down the client ID and client secret – treat these like your firstborn, they're precious!

Don't forget to set up your redirect URI. Something like http://localhost:3000/callback will do for now.

Implementing the authorization flow

Here's where the magic happens. Let's break it down:

require('dotenv').config();
const express = require('express');
const axios = require('axios');

const app = express();

const authorizationUrl = `https://webexapis.com/v1/authorize?client_id=${process.env.CLIENT_ID}&response_type=code&redirect_uri=${encodeURIComponent(process.env.REDIRECT_URI)}&scope=spark%3Aall`;

app.get('/login', (req, res) => {
  res.redirect(authorizationUrl);
});

app.get('/callback', async (req, res) => {
  const { code } = req.query;
  
  try {
    const { data } = await axios.post('https://webexapis.com/v1/access_token', {
      grant_type: 'authorization_code',
      client_id: process.env.CLIENT_ID,
      client_secret: process.env.CLIENT_SECRET,
      code,
      redirect_uri: process.env.REDIRECT_URI
    });
    
    // Store these tokens securely!
    const { access_token, refresh_token } = data;
    
    res.send('Authorization successful!');
  } catch (error) {
    console.error('Error exchanging code for tokens:', error);
    res.status(500).send('Authorization failed');
  }
});

app.listen(3000, () => console.log('Server running on port 3000'));

Refreshing the access token

Access tokens don't last forever, so let's implement a refresh mechanism:

async function refreshAccessToken(refresh_token) {
  try {
    const { data } = await axios.post('https://webexapis.com/v1/access_token', {
      grant_type: 'refresh_token',
      client_id: process.env.CLIENT_ID,
      client_secret: process.env.CLIENT_SECRET,
      refresh_token
    });
    
    return data.access_token;
  } catch (error) {
    console.error('Error refreshing token:', error);
    throw error;
  }
}

Making authenticated API calls

Now that we've got our access token, let's put it to use:

async function getUserInfo(access_token) {
  try {
    const { data } = await axios.get('https://webexapis.com/v1/people/me', {
      headers: { Authorization: `Bearer ${access_token}` }
    });
    return data;
  } catch (error) {
    console.error('Error fetching user info:', error);
    throw error;
  }
}

Error handling and edge cases

Always be prepared for things to go sideways. Handle authorization errors gracefully and have a plan for when access is revoked. Your users will thank you!

Best practices and security considerations

Remember:

Store tokens securely (please, not in plain text!)
Use the state parameter to prevent CSRF attacks
Consider implementing PKCE for an extra layer of security

Conclusion

And there you have it! You've just implemented the authorization flow for your Cisco Webex integration. Pat yourself on the back – you're well on your way to creating something awesome.

Additional resources

Want to dive deeper? Check out:

Now go forth and integrate! And remember, the best code is the code that works. Happy coding!