mirror of
				https://github.com/lingble/chatwoot.git
				synced 2025-10-30 18:47:51 +00:00 
			
		
		
		
	 d827e66453
			
		
	
	d827e66453
	
	
	
		
			
			This PR introduces basic minimum version of **Instagram Business Login**, making Instagram inbox setup more straightforward by removing the Facebook Page dependency. This update enhances user experience and aligns with Meta’s recommended best practices. Fixes https://linear.app/chatwoot/issue/CW-3728/instagram-login-how-to-implement-the-changes ## Why Introduce Instagram as a Separate Inbox? Currently, our Instagram integration requires linking an Instagram account to a Facebook Page, making setup complex. To simplify this process, Instagram now offers **Instagram Business Login**, which allows users to authenticate directly with their Instagram credentials. The **Instagram API with Instagram Login** enables businesses and creators to send and receive messages without needing a Facebook Page connection. While an Instagram Business or Creator account is still required, this approach provides a more straightforward integration process. | **Existing Approach (Facebook Login for Business)** | **New Approach (Instagram Business Login)** | | --- | --- | | Requires linking Instagram to a Facebook Page | No Facebook Page required | | Users log in via Facebook credentials | Users log in via Instagram credentials | | Configuration is more complex | Simpler setup | Meta recommends using **Instagram Business Login** as the preferred authentication method due to its easier configuration and improved developer experience. --- ## Implementation Plan The core messaging functionality is already in place, but the transition to **Instagram Business Login** requires adjustments. ### Changes & Considerations - **API Adjustments**: The Instagram API uses `graph.instagram`, whereas Koala (our existing library) interacts with `graph.facebook`. We may need to modify API calls accordingly. - **Three Main Modules**: 1. **Instagram Business Login** – Handle authentication flow. 2. **Permissions & Features** – Ensure necessary API scopes are granted. 3. **Webhooks** – Enable real-time message retrieval.  --- ## Instagram Login Flow 1. User clicks **"Create Inbox"** for Instagram. 2. App redirects to the [Instagram Authorization URL](https://developers.facebook.com/docs/instagram-platform/instagram-api-with-instagram-login/business-login#embed-the-business-login-url). 3. After authentication, Instagram returns an authorization code. 5. The app exchanges the code for a **long-lived token** (valid for 60 days). 6. Tokens are refreshed periodically to maintain access. 7. Once completed, the app creates an inbox and redirects to the Chatwoot dashboard. --- ## How to Test the Instagram Inbox 1. Create a new app on [Meta's Developer Portal](https://developers.facebook.com/apps/). 2. Select **Business** as the app type and configure it. 3. Add the Instagram product and connect a business account. 4. Copy Instagram app ID and Instagram app secret 5. Add the Instagram app ID and Instagram app secret to your app config via `{Chatwoot installation url}/super_admin/app_config?config=instagram` 6. Configure Webhooks: - Callback URL: `{your_chatwoot_url}/webhooks/instagram` - Verify Token: `INSTAGRAM_VERIFY_TOKEN` - Subscribe to `messages`, `messaging_seen`, and `message_reactions` events. 7. Set up **Instagram Business Login**: - Redirect URL: `{your_chatwoot_url}/instagram/callback` 8. Test inbox creation via the Chatwoot dashboard. ## Troubleshooting & Common Errors ### Insufficient Developer Role Error - Ensure the Instagram user is added as a developer: - **Meta Dashboard → App Roles → Roles → Add People → Enter Instagram ID** ### API Access Deactivated - Ensure the **Privacy Policy URL** is valid and correctly set. ### Invalid request: Request parameters are invalid: Invalid redirect_uri - Please configure the Frontend URL. The Frontend URL does not match the authorization URL. --- ## To-Do List - [x] Basic integration setup completed. - [x] Enable sending messages via [Messaging API](https://developers.facebook.com/docs/instagram-platform/instagram-api-with-instagram-login/messaging-api). - [x] Implement automatic webhook subscriptions on inbox creation. - [x] Handle **canceled authorization errors**. - [x] Handle all the errors https://developers.facebook.com/docs/instagram-platform/instagram-graph-api/reference/error-codes - [x] Dynamically fetch **account IDs** instead of hardcoding them. - [x] Prevent duplicate Instagram channel creation for the same account. - [x] Use **Global Config** instead of environment variables. - [x] Explore **Human Agent feature** for message handling. - [x] Write and refine **test cases** for all scenarios. - [x] Implement **token refresh mechanism** (tokens expire after 60 days). Fixes https://github.com/chatwoot/chatwoot/issues/10440 --------- Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com> Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
		
			
				
	
	
		
			147 lines
		
	
	
		
			3.8 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			147 lines
		
	
	
		
			3.8 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
| import { computed } from 'vue';
 | |
| import { useMapGetter } from 'dashboard/composables/store';
 | |
| import { useCamelCase } from 'dashboard/composables/useTransformKeys';
 | |
| import { INBOX_TYPES } from 'dashboard/helper/inbox';
 | |
| 
 | |
| export const INBOX_FEATURES = {
 | |
|   REPLY_TO: 'replyTo',
 | |
|   REPLY_TO_OUTGOING: 'replyToOutgoing',
 | |
| };
 | |
| 
 | |
| // This is a single source of truth for inbox features
 | |
| // This is used to check if a feature is available for a particular inbox or not
 | |
| export const INBOX_FEATURE_MAP = {
 | |
|   [INBOX_FEATURES.REPLY_TO]: [
 | |
|     INBOX_TYPES.FB,
 | |
|     INBOX_TYPES.WEB,
 | |
|     INBOX_TYPES.TWITTER,
 | |
|     INBOX_TYPES.WHATSAPP,
 | |
|     INBOX_TYPES.TELEGRAM,
 | |
|     INBOX_TYPES.API,
 | |
|   ],
 | |
|   [INBOX_FEATURES.REPLY_TO_OUTGOING]: [
 | |
|     INBOX_TYPES.WEB,
 | |
|     INBOX_TYPES.TWITTER,
 | |
|     INBOX_TYPES.WHATSAPP,
 | |
|     INBOX_TYPES.TELEGRAM,
 | |
|     INBOX_TYPES.API,
 | |
|   ],
 | |
| };
 | |
| 
 | |
| /**
 | |
|  * Composable for handling macro-related functionality
 | |
|  * @returns {Object} An object containing the getMacroDropdownValues function
 | |
|  */
 | |
| export const useInbox = () => {
 | |
|   const currentChat = useMapGetter('getSelectedChat');
 | |
|   const inboxGetter = useMapGetter('inboxes/getInboxById');
 | |
| 
 | |
|   const inbox = computed(() => {
 | |
|     const inboxId = currentChat.value.inbox_id;
 | |
| 
 | |
|     return useCamelCase(inboxGetter.value(inboxId), { deep: true });
 | |
|   });
 | |
| 
 | |
|   const channelType = computed(() => {
 | |
|     return inbox.value.channelType;
 | |
|   });
 | |
| 
 | |
|   const isAPIInbox = computed(() => {
 | |
|     return channelType.value === INBOX_TYPES.API;
 | |
|   });
 | |
| 
 | |
|   const isAFacebookInbox = computed(() => {
 | |
|     return channelType.value === INBOX_TYPES.FB;
 | |
|   });
 | |
| 
 | |
|   const isAWebWidgetInbox = computed(() => {
 | |
|     return channelType.value === INBOX_TYPES.WEB;
 | |
|   });
 | |
| 
 | |
|   const isATwilioChannel = computed(() => {
 | |
|     return channelType.value === INBOX_TYPES.TWILIO;
 | |
|   });
 | |
| 
 | |
|   const isALineChannel = computed(() => {
 | |
|     return channelType.value === INBOX_TYPES.LINE;
 | |
|   });
 | |
| 
 | |
|   const isAnEmailChannel = computed(() => {
 | |
|     return channelType.value === INBOX_TYPES.EMAIL;
 | |
|   });
 | |
| 
 | |
|   const isATelegramChannel = computed(() => {
 | |
|     return channelType.value === INBOX_TYPES.TELEGRAM;
 | |
|   });
 | |
| 
 | |
|   const whatsAppAPIProvider = computed(() => {
 | |
|     return inbox.value.provider || '';
 | |
|   });
 | |
| 
 | |
|   const isAMicrosoftInbox = computed(() => {
 | |
|     return isAnEmailChannel.value && inbox.value.provider === 'microsoft';
 | |
|   });
 | |
| 
 | |
|   const isAGoogleInbox = computed(() => {
 | |
|     return isAnEmailChannel.value && inbox.value.provider === 'google';
 | |
|   });
 | |
| 
 | |
|   const isATwilioSMSChannel = computed(() => {
 | |
|     const { medium: medium = '' } = inbox.value;
 | |
|     return isATwilioChannel.value && medium === 'sms';
 | |
|   });
 | |
| 
 | |
|   const isASmsInbox = computed(() => {
 | |
|     return channelType.value === INBOX_TYPES.SMS || isATwilioSMSChannel.value;
 | |
|   });
 | |
| 
 | |
|   const isATwilioWhatsAppChannel = computed(() => {
 | |
|     const { medium: medium = '' } = inbox.value;
 | |
|     return isATwilioChannel.value && medium === 'whatsapp';
 | |
|   });
 | |
| 
 | |
|   const isAWhatsAppCloudChannel = computed(() => {
 | |
|     return (
 | |
|       channelType.value === INBOX_TYPES.WHATSAPP &&
 | |
|       whatsAppAPIProvider.value === 'whatsapp_cloud'
 | |
|     );
 | |
|   });
 | |
| 
 | |
|   const is360DialogWhatsAppChannel = computed(() => {
 | |
|     return (
 | |
|       channelType.value === INBOX_TYPES.WHATSAPP &&
 | |
|       whatsAppAPIProvider.value === 'default'
 | |
|     );
 | |
|   });
 | |
| 
 | |
|   const isAWhatsAppChannel = computed(() => {
 | |
|     return (
 | |
|       channelType.value === INBOX_TYPES.WHATSAPP ||
 | |
|       isATwilioWhatsAppChannel.value
 | |
|     );
 | |
|   });
 | |
| 
 | |
|   const isAInstagramChannel = computed(() => {
 | |
|     return channelType.value === INBOX_TYPES.INSTAGRAM;
 | |
|   });
 | |
| 
 | |
|   return {
 | |
|     inbox,
 | |
|     isAFacebookInbox,
 | |
|     isALineChannel,
 | |
|     isAPIInbox,
 | |
|     isASmsInbox,
 | |
|     isATelegramChannel,
 | |
|     isATwilioChannel,
 | |
|     isAWebWidgetInbox,
 | |
|     isAWhatsAppChannel,
 | |
|     isAMicrosoftInbox,
 | |
|     isAGoogleInbox,
 | |
|     isATwilioWhatsAppChannel,
 | |
|     isAWhatsAppCloudChannel,
 | |
|     is360DialogWhatsAppChannel,
 | |
|     isAnEmailChannel,
 | |
|     isAInstagramChannel,
 | |
|   };
 | |
| };
 |