Communication : envoi de messages électroniques et SMS

En plus des appels téléphoniques, Azure Communication Services peut également envoyer des messages électroniques et SMS. Cela peut être utile lorsque vous souhaitez envoyer un message à un client ou à un autre utilisateur directement à partir de l’application.

Dans cet exercice, vous allez :

Découvrez comment envoyer des messages électroniques et SMS à partir de l’application.
Parcourez le code pour découvrir comment la fonctionnalité e-mail et SMS est implémentée.

Utilisation des fonctionnalités e-mail et SMS

Dans un exercice précédent , vous avez créé une ressource Azure Communication Services (ACS) et démarré la base de données, le serveur web et le serveur API. Vous avez également mis à jour les valeurs suivantes dans le fichier .env .
```
ACS_CONNECTION_STRING=<ACS_CONNECTION_STRING>
ACS_PHONE_NUMBER=<ACS_PHONE_NUMBER>
ACS_EMAIL_ADDRESS=<ACS_EMAIL_ADDRESS>
CUSTOMER_EMAIL_ADDRESS=<EMAIL_ADDRESS_TO_SEND_EMAIL_TO>
CUSTOMER_PHONE_NUMBER=<UNITED_STATES_BASED_NUMBER_TO_SEND_SMS_TO>
```
Vérifiez que vous avez terminé l’exercice précédent avant de continuer.
Revenez au navigateur (http://localhost:4200) et sélectionnez Contact Customer suivi par e-mail/SMS Customer dans la première ligne.
Sélectionnez l’onglet e-mail/SMS et effectuez les tâches suivantes :
- Entrez un objet et un corps de l’e-mail, puis sélectionnez le bouton Envoyer un e-mail .
- Entrez un sms et sélectionnez le bouton Envoyer un SMS .
Remarque

La vérification par SMS pour les numéros gratuits est désormais obligatoire dans les États-Unis et le Canada. Pour activer la messagerie SMS, vous devez soumettre la vérification après l’achat du numéro de téléphone. Bien que ce tutoriel ne passe pas par ce processus, vous pouvez sélectionner les documents de téléphonie et SMS -->Réglementaires à partir de votre ressource Azure Communication Services dans le portail Azure et ajouter la documentation de validation requise.
Vérifiez que vous avez reçu les messages électroniques et SMS. La fonctionnalité SMS fonctionne uniquement si vous avez soumis les documents réglementaires mentionnés dans la note précédente. En guise de rappel, le message électronique sera envoyé à la valeur définie CUSTOMER_EMAIL_ADDRESS et le sms sera envoyé à la valeur définie dans CUSTOMER_PHONE_NUMBER le fichier .env . Si vous n’avez pas pu fournir un numéro de téléphone basé sur États-Unis à utiliser pour les sms, vous pouvez ignorer cette étape.

Remarque

Si vous ne voyez pas le message électronique dans votre boîte de réception pour l’adresse que CUSTOMER_EMAIL_ADDRESS vous avez définie dans le fichier .env , vérifiez votre dossier de courrier indésirable.

Exploration du code de messagerie

Conseil / Astuce

Si vous utilisez Visual Studio Code, vous pouvez ouvrir des fichiers directement en sélectionnant :

Windows/Linux : Ctrl + P
Mac : Cmd + P

Tapez ensuite le nom du fichier que vous souhaitez ouvrir.

Ouvrez le fichier customers-list.component.ts . Le chemin complet du fichier est client/src/app/customers-list/customers-list.component.ts.

Lorsque vous avez sélectionné Contacter le client suivi par e-mail/SMS client dans le datagrid, le customer-list composant affiche une boîte de dialogue. Cela est géré par la openEmailSmsDialog() fonction dans le fichier customer-list.component.ts .

openEmailSmsDialog(data: any) {
    if (data.phone && data.email) {
        // Create the data for the dialog
        let dialogData: EmailSmsDialogData = {
            prompt: '',
            title: `Contact ${data.company}`,
            company: data.company,
            customerName: data.first_name + ' ' + data.last_name,
            customerEmailAddress: data.email,
            customerPhoneNumber: data.phone
        }

        // Open the dialog
        const dialogRef = this.dialog.open(EmailSmsDialogComponent, {
            data: dialogData
        });

        // Subscribe to the dialog afterClosed observable to get the dialog result
        this.subscription.add(
            dialogRef.afterClosed().subscribe((response: EmailSmsDialogData) => {
                console.log('SMS dialog result:', response);
                if (response) {
                    dialogData = response;
                }
            })
        );
    }
    else {
        alert('No phone number available.');
    }
}

La openEmailSmsDialog() fonction effectue les tâches suivantes :

Vérifie si l’objet data (qui représente la ligne à partir du datagrid) contient une propriété et phone une email valeur. Si c’est le cas, il crée un dialogData objet qui contient les informations à transmettre à la boîte de dialogue.
Ouvre la EmailSmsDialogComponent boîte de dialogue et lui transmet l’objet dialogData .
S’abonne à l’événement afterClosed() de la boîte de dialogue. Cet événement est déclenché lorsque la boîte de dialogue est fermée. L’objet response contient les informations entrées dans la boîte de dialogue.

Ouvrez le fichier email-sms-dialog.component.ts . Le chemin complet du fichier est client/src/app/email-sms-dialog/email-sms-dialog.component.ts.
Recherchez la sendEmail() fonction :
```
sendEmail() {
    if (this.featureFlags.acsEmailEnabled) {
        // Using CUSTOMER_EMAIL_ADDRESS instead of this.data.email for testing purposes
        this.subscription.add(
            this.acsService.sendEmail(this.emailSubject, this.emailBody, 
                this.getFirstName(this.data.customerName), CUSTOMER_EMAIL_ADDRESS /* this.data.email */)
            .subscribe(res => {
                console.log('Email sent:', res);
                if (res.status) {
                    this.emailSent = true;
                }
            })
        );
    }
    else {
        this.emailSent = true; // Used when ACS email isn't enabled
    }
}
```
La sendEmail() fonction effectue les tâches suivantes :
- Vérifie si l’indicateur de acsEmailEnabled fonctionnalité est défini sur true. Cet indicateur vérifie si la ACS_EMAIL_ADDRESS variable d’environnement a une valeur affectée.
- Si acsEmailEnabled la valeur est true, la acsService.sendEmail() fonction est appelée et l’objet de l’e-mail, le corps, le nom du client et l’adresse e-mail du client sont transmis. Étant donné que la base de données contient des exemples de données, la CUSTOMER_EMAIL_ADDRESS variable d’environnement est utilisée au lieu de this.data.email. Dans une application réelle, la this.data.email valeur serait utilisée.
- S’abonne à la sendEmail() fonction dans le acsService service. Cette fonction retourne une fonction RxJS observable qui contient la réponse du service côté client.
- Si l’e-mail a été envoyé avec succès, la emailSent propriété est définie sur true.
Pour fournir une meilleure encapsulation et réutilisation du code, les services côté client tels que les acs.service.ts sont utilisés dans l’application. Cela permet à toutes les fonctionnalités ACS d’être consolidées dans un emplacement unique.
Ouvrez acs.service.ts et recherchez la sendEmail() fonction. Le chemin complet du fichier est client/src/app/core/acs.service.ts.
```
sendEmail(subject: string, message: string, customerName: string, customerEmailAddress: string) : Observable<EmailSmsResponse> {
    return this.http.post<EmailSmsResponse>(this.apiUrl + 'sendEmail', { subject, message, customerName, customerEmailAddress })
    .pipe(
        catchError(this.handleError)
    );
}
```
La sendEmail() fonction dans AcsService effectue les tâches suivantes :
- Appelle la fonction et transmet l’objet http.post() de l’e-mail, le message, le nom du client et son adresse e-mail. La http.post() fonction retourne un RxJS observable qui contient la réponse de l’appel d’API.
- Gère les erreurs retournées par la fonction à l’aide http.post() de l’opérateur RxJS catchError .
Examinons maintenant comment l’application interagit avec la fonctionnalité de messagerie ACS. Ouvrez le fichier acs.ts et recherchez la sendEmail() fonction. Le chemin complet du fichier est serveur/typescript/acs.ts.
La sendEmail() fonction effectue les tâches suivantes :
- Crée un EmailClient objet et transmet le chaîne de connexion ACS à celui-ci (cette valeur est récupérée à partir de la variable d’environnementACS_CONNECTION_STRING).
```
const emailClient = new EmailClient(connectionString);
```
- Crée un EmailMessage objet et transmet les informations de l’expéditeur, de l’objet, du message et du destinataire.
```
const msgObject: EmailMessage = {
    senderAddress: process.env.ACS_EMAIL_ADDRESS as string,
    content: {
        subject: subject,
        plainText: message,
    },
    recipients: {
        to: [
            {
                address: customerEmailAddress,
                displayName: customerName,
            },
        ],
    },
};
```
- Envoie l’e-mail à l’aide de la emailClient.beginSend() fonction et retourne la réponse. Bien que la fonction n’envoie qu’un seul destinataire dans cet exemple, la beginSend() fonction peut également être utilisée pour envoyer plusieurs destinataires.
```
const poller = await emailClient.beginSend(msgObject);
```
- Attend que l’objet poller signale qu’il est terminé et envoie la réponse à l’appelant.

Exploration du code SMS

Revenez au fichier email-sms-dialog.component.ts que vous avez ouvert précédemment. Le chemin complet du fichier est client/src/app/email-sms-dialog/email-sms-dialog.component.ts.
Recherchez la sendSms() fonction :
```
sendSms() {
    if (this.featureFlags.acsPhoneEnabled) {
        // Using CUSTOMER_PHONE_NUMBER instead of this.data.customerPhoneNumber for testing purposes
        this.subscription.add(
            this.acsService.sendSms(this.smsMessage, CUSTOMER_PHONE_NUMBER /* this.data.customerPhoneNumber */)
              .subscribe(res => {
                if (res.status) {
                    this.smsSent = true;
                }
            })
        );
    }
    else {
        this.smsSent = true;
    }
}
```
La sendSMS() fonction effectue les tâches suivantes :
- Vérifie si l’indicateur de acsPhoneEnabled fonctionnalité est défini sur true. Cet indicateur vérifie si la ACS_PHONE_NUMBER variable d’environnement a une valeur affectée.
- Si acsPhoneEnabled la valeur est true, la acsService.SendSms() fonction est appelée et le sms et le numéro de téléphone du client sont passés. Étant donné que la base de données contient des exemples de données, la CUSTOMER_PHONE_NUMBER variable d’environnement est utilisée au lieu de this.data.customerPhoneNumber. Dans une application réelle, la this.data.customerPhoneNumber valeur serait utilisée.
- S’abonne à la sendSms() fonction dans le acsService service. Cette fonction retourne une fonction RxJS observable qui contient la réponse du service côté client.
- Si le message SMS a été envoyé avec succès, il définit la smsSent propriété sur true.
Ouvrez acs.service.ts et recherchez la sendSms() fonction. Le chemin complet du fichier est client/src/app/core/acs.service.ts.
```
sendSms(message: string, customerPhoneNumber: string) : Observable<EmailSmsResponse> {
    return this.http.post<EmailSmsResponse>(this.apiUrl + 'sendSms', { message, customerPhoneNumber })
    .pipe(
        catchError(this.handleError)
    );
}  
```
La sendSms() fonction effectue les tâches suivantes :
- Appelle la http.post() fonction et transmet le message et le numéro de téléphone client à celui-ci. La http.post() fonction retourne un RxJS observable qui contient la réponse de l’appel d’API.
- Gère les erreurs retournées par la fonction à l’aide http.post() de l’opérateur RxJS catchError .
Enfin, examinons comment l’application interagit avec la fonctionnalité DE SMS ACS. Ouvrez le fichier acs.ts . Le chemin complet du fichier est serveur/typescript/acs.ts et recherchez la sendSms() fonction.
La sendSms() fonction effectue les tâches suivantes :
- Crée un SmsClient objet et transmet le chaîne de connexion ACS à celui-ci (cette valeur est récupérée à partir de la variable d’environnementACS_CONNECTION_STRING).
```
const smsClient = new SmsClient(connectionString);
```
- Appelle la smsClient.send() fonction et transmet le numéro de téléphone ACS (from), le numéro de téléphone client (to) et le sms :
```
const sendResults = await smsClient.send({
    from: process.env.ACS_PHONE_NUMBER as string,
    to: [customerPhoneNumber],
    message: message
});
return sendResults;
```
- Retourne la réponse à l’appelant.
Vous pouvez en savoir plus sur les fonctionnalités de messagerie et SMS ACS dans les articles suivants :
- Courrier électronique dans Azure Communication Services
- SMS dans Azure Communication Services
Avant de passer à l’exercice suivant, examinons les concepts clés abordés dans cet exercice :
- Le fichier acs.service.ts encapsule les fonctionnalités de messagerie et SMS ACS utilisées par l’application côté client. Il gère les appels d’API au serveur et retourne la réponse à l’appelant.
- L’API côté serveur utilise les services ACS EmailClient et SmsClient les objets pour envoyer des messages électroniques et SMS.
Maintenant que vous avez appris comment envoyer des messages électroniques et SMS, nous allons nous concentrer sur l’intégration des données organisationnelles dans l’application.

Étape suivante

Données organisationnelles : création de l'enregistrement d'une application Microsoft Entra ID

Commentaires

Cette page a-t-elle été utile ?

Last updated on 2025-06-13