|
| 1 | +--- |
| 2 | +title: Include file |
| 3 | +description: Include file |
| 4 | +services: azure-communication-services |
| 5 | +author: shamkh |
| 6 | +ms.service: azure-communication-services |
| 7 | +ms.subservice: advanced-messaging |
| 8 | +ms.date: 07/15/2024 |
| 9 | +ms.topic: include |
| 10 | +ms.custom: include file |
| 11 | +ms.author: shamkh |
| 12 | +ms.custom: devx-track-extended-java, devx-track-js, devx-track-python |
| 13 | +zone_pivot_groups: acs-js-csharp-java-python |
| 14 | +--- |
| 15 | + |
| 16 | +### Authenticate the client |
| 17 | + |
| 18 | +#### [Connection String](#tab/connection-string) |
| 19 | + |
| 20 | +The following code retrieves the connection string for the resource from an environment variable named `COMMUNICATION_SERVICES_CONNECTION_STRING` using the dotenv package. |
| 21 | + |
| 22 | +For simplicity, this quickstart uses a connection string to authenticate. In production environments, we recommend using [service principals](../../../../identity/service-principal.md). |
| 23 | + |
| 24 | +Get the connection string from your Azure Communication Services resource in the Azure portal. On the left, navigate to the `Keys` tab. Copy the `Connection string` field for the `Primary key`. The connection string is in the format `endpoint=https://{your Azure Communication Services resource name}.communication.azure.com/;accesskey={secret key}`. |
| 25 | + |
| 26 | +:::image type="content" source="../../media/get-started/get-communication-resource-connection-string.png" lightbox="../../media/get-started/get-communication-resource-connection-string.png" alt-text="Screenshot that shows an Azure Communication Services resource in the Azure portal, viewing the 'Connection string' field in the 'Primary key' section."::: |
| 27 | + |
| 28 | +Set the environment variable `COMMUNICATION_SERVICES_CONNECTION_STRING` to the value of your connection string. |
| 29 | +Open a console window and enter the following command: |
| 30 | +```console |
| 31 | +setx COMMUNICATION_SERVICES_CONNECTION_STRING "<your connection string>" |
| 32 | +``` |
| 33 | + |
| 34 | +For more information on how to set an environment variable for your system, follow the steps at [Store your connection string in an environment variable](../../../../create-communication-resource.md#store-your-connection-string-in-an-environment-variable). |
| 35 | + |
| 36 | + |
| 37 | +To instantiate a MessageClient, add the following code to the `Main` method: |
| 38 | +```javascript |
| 39 | +const MessageClient = require("@azure-rest/communication-messages").default; |
| 40 | +
|
| 41 | +// Set Connection string |
| 42 | +const connectionString = process.env["COMMUNICATION_SERVICES_CONNECTION_STRING"]; |
| 43 | +
|
| 44 | +// Instantiate the client |
| 45 | +const client = MessageClient(connectionString); |
| 46 | +``` |
| 47 | + |
| 48 | +<a name='azure-active-directory'></a> |
| 49 | + |
| 50 | +#### [Microsoft Entra ID](#tab/aad) |
| 51 | + |
| 52 | +You can also authenticate with Microsoft Entra ID using the [Azure Identity library](https://github.com/Azure/azure-sdk-for-js/tree/main/sdk/identity/identity). |
| 53 | + |
| 54 | +The [`@azure/identity`](https://github.com/Azure/azure-sdk-for-js/tree/main/sdk/identity/identity) package provides various credential types that your application can use to authenticate. You can choose from the various options to authenticate the identity client detailed at [Azure Identity - Credential providers](/javascript/api/overview/azure/identity-readme#credentials) and [Azure Identity - Authenticate the client](/javascript/api/overview/azure/identity-readme#authenticate-the-client). This option walks through one way of using the [`DefaultAzureCredential`](/javascript/api/overview/azure/identity-readme#defaultazurecredential). |
| 55 | + |
| 56 | +The `DefaultAzureCredential` attempts to authenticate via [`several mechanisms`](/javascript/api/overview/azure/identity-readme#defaultazurecredential) and it might be able to find its authentication credentials if you're signed into Visual Studio or Azure CLI. However, this option walks you through setting up with environment variables. |
| 57 | + |
| 58 | +To create a `DefaultAzureCredential` object: |
| 59 | +1. To set up your service principle app, follow the instructions at [Creating a Microsoft Entra registered Application](../../../../identity/service-principal.md?pivots=platform-azcli#creating-a-microsoft-entra-registered-application). |
| 60 | + |
| 61 | +1. Set the environment variables `AZURE_CLIENT_ID`, `AZURE_CLIENT_SECRET`, and `AZURE_TENANT_ID` using the output of your app's creation. |
| 62 | + Open a console window and enter the following commands: |
| 63 | + ```console |
| 64 | + setx AZURE_CLIENT_ID "<your app's appId>" |
| 65 | + setx AZURE_CLIENT_SECRET "<your app's password>" |
| 66 | + setx AZURE_TENANT_ID "<your app's tenant>" |
| 67 | + ``` |
| 68 | + After you add the environment variables, you might need to restart any running programs that will need to read the environment variables, including the console window. For example, if you're using Visual Studio as your editor, restart Visual Studio before running the example. |
| 69 | + |
| 70 | +1. To use the [`DefaultAzureCredential`](/javascript/api/overview/azure/identity-readme#defaultazurecredential) provider, or other credential providers provided with the Azure SDK, install the `@azure/identity` package. |
| 71 | + ```bash |
| 72 | + npm install @azure/identity |
| 73 | + ``` |
| 74 | + |
| 75 | +1. To instantiate a `MessageClient`, add the following code to the `Main` method. |
| 76 | + ```javascript |
| 77 | + const DefaultAzureCredential = require("@azure/identity").DefaultAzureCredential; |
| 78 | + const MessageClient = require("@azure-rest/communication-messages").default; |
| 79 | + |
| 80 | + // Configure authentication |
| 81 | + const endpoint = "https://<resource name>.communication.azure.com"; |
| 82 | + let credential = new DefaultAzureCredential(); |
| 83 | + |
| 84 | + // Instantiate the client |
| 85 | + const client = MessageClient(endpoint, credential); |
| 86 | + ``` |
| 87 | + |
| 88 | +#### [AzureKeyCredential](#tab/azurekeycredential) |
| 89 | + |
| 90 | +You can also authenticate with an AzureKeyCredential. |
| 91 | + |
| 92 | +Get the endpoint and key from your Azure Communication Services resource in the Azure portal. On the left, navigate to the `Keys` tab. Copy the `Endpoint` and the `Key` field for the primary key. |
| 93 | + |
| 94 | +:::image type="content" source="../../media/get-started/get-communication-resource-endpoint-and-key.png" lightbox="../../media/get-started/get-communication-resource-endpoint-and-key.png" alt-text="Screenshot that shows an Azure Communication Services resource in the Azure portal, viewing the 'Connection string' field in the 'Primary key' section."::: |
| 95 | + |
| 96 | +Set the environment variable `COMMUNICATION_SERVICES_KEY` to the value of your connection string. |
| 97 | +Open a console window and enter the following command: |
| 98 | +```console |
| 99 | +setx COMMUNICATION_SERVICES_KEY "<your key>" |
| 100 | +``` |
| 101 | +After you add the environment variable, you might need to restart any running programs that will need to read the environment variable, including the console window. For example, if you're using Visual Studio as your editor, restart Visual Studio before running the example. |
| 102 | + |
| 103 | +For more information on how to set an environment variable for your system, follow the steps at [Store your connection string in an environment variable](../../../../create-communication-resource.md#store-your-connection-string-in-an-environment-variable). |
| 104 | + |
| 105 | +To instantiate a `MessageClient`, add the following code to the `Main` method: |
| 106 | +```javascript |
| 107 | +const AzureKeyCredential = require("@azure/core-auth").AzureKeyCredential; |
| 108 | +const MessageClient = require("@azure-rest/communication-messages").default; |
| 109 | +
|
| 110 | +// Configure authentication |
| 111 | +const endpoint = "https://<resource name>.communication.azure.com"; |
| 112 | +const credential = new AzureKeyCredential("<your key credential>"); |
| 113 | +
|
| 114 | +// Instantiate the client |
| 115 | +const client = MessageClient(endpoint, credential); |
| 116 | +``` |
| 117 | + |
| 118 | +--- |
| 119 | + |
| 120 | +### Set channel registration ID |
| 121 | + |
| 122 | +The Channel Registration ID GUID was created during [channel registration](../../connect-whatsapp-business-account.md). You can look it up in the portal on the Channels tab of your Azure Communication Services resource. |
| 123 | + |
| 124 | +:::image type="content" source="../../media/get-started/get-messages-channel-id.png" lightbox="../../media/get-started/get-messages-channel-id.png" alt-text="Screenshot that shows an Azure Communication Services resource in the Azure portal, viewing the 'Channels' tab. Attention is placed on the copy action of the 'Channel ID' field."::: |
| 125 | + |
| 126 | +Assign it to a variable called channelRegistrationId. |
| 127 | +```javascript |
| 128 | +const channelRegistrationId = "<your channel registration id GUID>"; |
| 129 | +``` |
| 130 | + |
| 131 | +### Set recipient list |
| 132 | + |
| 133 | +You need to supply a real phone number that has a WhatsApp account associated with it. This WhatsApp account receives the template, text, and media messages sent in this quickstart. |
| 134 | +For this quickstart, this phone number may be your personal phone number. |
| 135 | + |
| 136 | +The recipient phone number can't be the business phone number (Sender ID) associated with the WhatsApp channel registration. The Sender ID appears as the sender of the text and media messages sent to the recipient. |
| 137 | + |
| 138 | +The phone number should include the country code. For more information on phone number formatting, see WhatsApp documentation for [Phone Number Formats](https://developers.facebook.com/docs/whatsapp/cloud-api/reference/phone-numbers#phone-number-formats). |
| 139 | + |
| 140 | +> [!NOTE] |
| 141 | +> Only one phone number is currently supported in the recipient list. |
| 142 | +
|
| 143 | +Create the recipient list like this: |
| 144 | +```json |
| 145 | +const recipientList = ["<to WhatsApp phone number>"]; |
| 146 | +``` |
| 147 | + |
| 148 | +Example: |
| 149 | +```javascript |
| 150 | +// Example only |
| 151 | +const recipientList = ["+14255550199"]; |
| 152 | +``` |
| 153 | + |
| 154 | +### Start sending messages between a business and a WhatsApp user |
| 155 | + |
| 156 | +Conversations between a WhatsApp Business Account and a WhatsApp user can be initiated in one of two ways: |
| 157 | +- The business sends a template message to the WhatsApp user. |
| 158 | +- The WhatsApp user sends any message to the business number. |
| 159 | + |
| 160 | +Regardless of how the conversation was started, **a business can only send template messages until the user sends a message to the business.** Only after the user sends a message to the business, the business is allowed to send text or media messages to the user during the active conversation. Once the 24 hour conversation window expires, the conversation must be reinitiated. To learn more about conversations, see the definition at [WhatsApp Business Platform](https://developers.facebook.com/docs/whatsapp/pricing#conversations). |
| 161 | + |
| 162 | +#### (Option 1) Initiate conversation from business - Send a template message |
| 163 | +Initiate a conversation by sending a template message. |
| 164 | + |
| 165 | +First, create a MessageTemplate using the values for a template. |
| 166 | +> [!NOTE] |
| 167 | +> To check which templates you have available, see the instructions at [List templates](../../../../../concepts/advanced-messaging/whatsapp/template-messages.md#list-templates). |
| 168 | +> If you don't have a template to use, proceed to [Option 2](#option-2-initiate-conversation-from-user). |
| 169 | +
|
| 170 | +Here's MessageTemplate creation using a default template, `sample_template`. |
| 171 | +If `sample_template` isn't available to you, skip to [Option 2](#option-2-initiate-conversation-from-user). For advanced users, see the page [Templates](../../../../../concepts/advanced-messaging/whatsapp/template-messages.md) to understand how to send a different template with Option 1. |
| 172 | + |
| 173 | +Messages SDK allows Contoso to send templated WhatsApp messages to WhatsApp users. To send template messages below details are required: |
| 174 | +- [WhatsApp Channel ID](#set-channel-registration-id) |
| 175 | +- [Recipient Phone Number in E16 format](#set-recipient-list) |
| 176 | +- Template details |
| 177 | + - Name like 'sample_template' |
| 178 | + - Language like 'en_us' |
| 179 | + - Parameters if any |
| 180 | + |
| 181 | +```javascript |
| 182 | +// Assemble the template content |
| 183 | +const template = { |
| 184 | + name: "sample_template", |
| 185 | + language: "en_US" |
| 186 | +}; |
| 187 | +``` |
| 188 | + |
| 189 | +For more examples of how to assemble your MessageTemplate and how to create your own template, refer to the following resource: |
| 190 | +- [Send WhatsApp Template Messages](../../../../../concepts/advanced-messaging/whatsapp/template-messages.md) |
| 191 | + |
| 192 | +For further WhatsApp requirements on templates, refer to the WhatsApp Business Platform API references: |
| 193 | +- [Create and Manage Templates](https://developers.facebook.com/docs/whatsapp/business-management-api/message-templates/) |
| 194 | +- [Template Components](https://developers.facebook.com/docs/whatsapp/business-management-api/message-templates/components) |
| 195 | +- [Sending Template Messages](https://developers.facebook.com/docs/whatsapp/cloud-api/guides/send-message-templates) |
| 196 | + |
| 197 | +```javascript |
| 198 | +// Send template message |
| 199 | +const templateMessageResult = await client.path("/messages/notifications:send").post({ |
| 200 | + contentType: "application/json", |
| 201 | + body: { |
| 202 | + channelRegistrationId: channelRegistrationId, |
| 203 | + to: recipientList, |
| 204 | + kind: "template", |
| 205 | + template: template |
| 206 | + } |
| 207 | +}); |
| 208 | + |
| 209 | +// Process result |
| 210 | +if (templateMessageResult.status === "202") { |
| 211 | + templateMessageResult.body.receipts.forEach((receipt) => { |
| 212 | + console.log("Message sent to:"+receipt.to+" with message id:"+receipt.messageId); |
| 213 | + }); |
| 214 | +} else { |
| 215 | + throw new Error("Failed to send message"); |
| 216 | +} |
| 217 | +``` |
| 218 | + |
| 219 | +Now, the user needs to respond to the template message. From the WhatsApp user account, reply to the template message received from the WhatsApp Business Account. The content of the message is irrelevant for this scenario. |
| 220 | + |
| 221 | +> [!IMPORTANT] |
| 222 | +> The recipient must respond to the template message to initiate the conversation before text or media message can be delivered to the recipient. |
| 223 | +
|
| 224 | +#### (Option 2) Initiate conversation from user |
| 225 | + |
| 226 | +The other option to initiate a conversation between a WhatsApp Business Account and a WhatsApp user is to have the user initiate the conversation. |
| 227 | +To do so, from your personal WhatsApp account, send a message to your business number (Sender ID). |
| 228 | + |
| 229 | +:::image type="content" source="../../media/get-started/user-initiated-conversation.png" lightbox="../../media/get-started/user-initiated-conversation.png" alt-text="A WhatsApp conversation viewed on the web showing a user message sent to the WhatsApp Business Account number."::: |
0 commit comments