How to get access token for Graph API in Teams bot-based message extension?

XDeveloper29 -

If you're using the Teams Toolkit and have your bot registered on dev.botframework.com, you can still implement OAuth without relying entirely on Azure Bot Service's built-in support. Here’s a step-by-step guide to handling OAuth manually in this setup:

1. Register Your Application with an Identity Provider

You need to register your bot application with an identity provider like Azure AD. This will give you the necessary credentials (client ID, client secret) and endpoints for OAuth 2.0.

1. Azure AD Registration:

   • Go to the Azure Portal.
   • Navigate to "Azure Active Directory" > "App registrations" and register a new application.
   • Note down the Application (client) ID and Directory (tenant) ID.
   • Under "Certificates & secrets," generate a new client secret.

2. Configure Redirect URIs:

   • Under "Authentication" for your registered app, add a redirect URI that matches your bot’s OAuth endpoint (e.g., https://yourdomain.com/oauth2/callback).

3. API Permissions:

   • Go to "API permissions" and add the necessary Microsoft Graph API permissions such as ChannelMessage.Read.All or ChannelMessage.ReadWrite.All.

2. Implement OAuth Flow Manually

Since Azure Bot Service simplifies OAuth, you'll handle the OAuth flow manually in your application. Here’s a detailed approach:

a. Create an Authorization URL:

You need to redirect the user to the Microsoft authorization endpoint where they can log in and grant permissions.

const authorizationUrl = `https://login.microsoftonline.com/{tenant}/oauth2/v2.0/authorize?response_type=code&client_id={client-id}&redirect_uri={redirect-uri}&response_mode=query&scope=https%3A%2F%2Fgraph.microsoft.com%2F.default&state={state}`;

• Replace {tenant} with your tenant ID.
• Replace {client-id} with your application (client) ID.
• Replace {redirect-uri} with your redirect URI.
• Replace {state} with a random string to prevent CSRF attacks.

b. Handle Authorization Code Callback:

After the user grants permissions, they will be redirected back to your application with an authorization code.

import express from 'express'; import axios from 'axios'; const app = express(); app.get('/oauth2/callback', async (req, res) => { const code = req.query.code as string; if (code) { const response = await axios.post('https://login.microsoftonline.com/{tenant}/oauth2/v2.0/token', null, { params: { client_id: 'your-client-id', scope: 'https://graph.microsoft.com/.default', code: code, redirect_uri: 'your-redirect-uri', grant_type: 'authorization_code', client_secret: 'your-client-secret' } }); const accessToken = response.data.access_token; res.send(`Access token: ${accessToken}`); } else { res.send('Authorization code not found'); } }); app.listen(3000, () => console.log('Server listening on port 3000'));​

c. Use Access Token to Call Microsoft Graph API:

With the access token, you can make authenticated requests to Microsoft Graph API to retrieve messages and replies.

const getReplies = async (accessToken: string, teamId: string, channelId: string, messageId: string) => { const response = await axios.get(`https://graph.microsoft.com/v1.0/teams/${teamId}/channels/${channelId}/messages/${messageId}/replies`, { headers: { Authorization: `Bearer ${accessToken}` } }); return response.data; };

3. Set Up OAuth in Teams Toolkit

For Teams Toolkit, you can configure OAuth in the manifest.json file of your Teams app. This ensures that Teams can handle authentication for you. However, manual OAuth flow is still necessary for accessing the Microsoft Graph API.

While Azure Bot Service simplifies OAuth with built-in support, you can manage the OAuth flow manually by:

1. Registering your app with Azure AD.
2. Implementing the OAuth authorization flow.
3. Using the access token to make Graph API requests.