如何实现类似Google Drive的Slack集成及消息框+按钮功能？

Hey there! Let's walk through how to build that Google Drive-style integration with Slack—starting with the composer "+" button functionality you noticed, then covering the full integration approach.

That "+" button entry is called a Composer Action (officially named Message Composer Action) in Slack's platform. It's designed to let users quickly trigger app functionality directly from the message input area. Here's how to build it:

Step 1: Configure the Composer Action in Slack's Developer Portal #

• Head to your Slack app's settings, navigate to Interactivity & Shortcuts, and enable Interactivity (you'll need to set a Request URL for your backend here too).
• Under the Shortcuts section, click "Create New Shortcut" and select the Message Composer type.
• Fill in the action details: name (e.g., "Create Google Drive File"), description, and upload a relevant icon (like Google Drive's logo). Set the shortcut's Callback URL to your backend endpoint that will handle the trigger.

Step 2: Handle the Slack Trigger Request #

When a user clicks your Composer Action, Slack sends a POST request to your Callback URL with context data (user ID, channel ID, etc.). Your backend needs to:

• Validate the request: Use Slack's signing secret to verify the request is legitimate (never skip this—prevents spoofing).
• Return an interactive response: Typically, you'll send back a modal to let the user select the file type (Doc, Sheet, Slide) they want to create. For example, a modal with a static select menu for file types.

Step 3: Integrate with Google Drive API #

Once the user confirms their choice in the modal:

• Authenticate the user: Ensure your app has OAuth 2.0 access to the user's Google Drive (you can trigger the Google auth flow directly from Slack via a modal button or app installation).
• Create the file: Call Google Drive's API (e.g., files.create endpoint) to generate the new file with the user's selected type.
• Insert the file link into Slack: Use Slack's API (like chat.postMessage or the modal's response URL) to drop the file's shareable link into the user's message input box.

Google Drive's Slack integration goes beyond just creating files—here's how to replicate that full experience:

• File Selection & Sharing: Add a Composer Action that lets users browse their existing Google Drive files and insert links into Slack messages. Use Google Drive's files.list API to fetch the user's files, display them in a Slack modal, and insert the selected file's link when confirmed.
• Real-Time Notifications: Set up Google Drive webhooks to listen for file events (edits, comments, new files). When an event triggers, your backend sends a formatted message to the relevant Slack channel (e.g., "Jane edited the Q3 Budget Sheet").
• Slash Commands: Complement the Composer Action with slash commands like /gdrive create doc for quick access, which can trigger the same modal or directly create a file and share the link.
• Context Menus: Add message context menus (right-click options) for Google Drive links in Slack—let users open the file in Drive, view its details, or subscribe to notifications directly from Slack.
• Cross-Account Sync: Ensure users can link multiple Google accounts to your Slack app, and store their OAuth credentials securely (encrypt sensitive data, never store plaintext tokens).

Example: Basic Composer Action Handler (Node.js) #

Here's a simplified snippet to handle the initial Composer Action trigger and open a file-type selection modal:

const express = require('express');
const { createHmac } = require('crypto');
const app = express();
app.use(express.json());

// Verify Slack request signature to prevent spoofing
const verifySlackSignature = (req) => {
  const slackSecret = process.env.SLACK_SIGNING_SECRET;
  const timestamp = req.headers['x-slack-request-timestamp'];
  const signature = req.headers['x-slack-signature'];
  const baseString = `v0:${timestamp}:${JSON.stringify(req.body)}`;
  const computedSignature = `v0=${createHmac('sha256', slackSecret).update(baseString).digest('hex')}`;
  return computedSignature === signature;
};

// Handle Composer Action trigger
app.post('/slack/gdrive-composer', (req, res) => {
  if (!verifySlackSignature(req)) return res.sendStatus(403);

  // Return a modal for file type selection
  res.json({
    response_action: 'open_modal',
    modal: {
      type: 'modal',
      callback_id: 'gdrive_create_modal',
      title: { type: 'plain_text', text: 'Create Google Drive File' },
      blocks: [
        {
          type: 'input',
          block_id: 'file_type',
          label: { type: 'plain_text', text: 'Choose File Type' },
          element: {
            type: 'static_select',
            options: [
              { text: { type: 'plain_text', text: 'Google Document' }, value: 'doc' },
              { text: { type: 'plain_text', text: 'Google Sheet' }, value: 'sheet' },
              { text: { type: 'plain_text', text: 'Google Slide' }, value: 'slide' }
            ]
          }
        }
      ],
      submit: { type: 'plain_text', text: 'Create File' }
    }
  });
});

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

Key Notes #

• Slack Permissions: Request necessary scopes like chat:write, users:read, and commands (if using slash commands) in your app's settings.
• Google API Permissions: Enable the Google Drive API in the Google Cloud Console, and request scopes like drive.file (for file creation) and drive.readonly (for file browsing).
• Security: Always validate incoming requests from Slack and Google, encrypt stored OAuth tokens, and follow best practices for data handling.

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