Komunikacja: wysyłanie wiadomości e-mail i wiadomości SMS

Oprócz połączeń telefonicznych usługi Azure Communication Services mogą również wysyłać wiadomości e-mail i SMS. Może to być przydatne, gdy chcesz wysłać wiadomość do klienta lub innego użytkownika bezpośrednio z aplikacji.

W tym ćwiczeniu wykonasz następujące czynności:

Dowiedz się, jak można wysyłać wiadomości e-mail i SMS z aplikacji.
Zapoznaj się z kodem, aby dowiedzieć się, jak zaimplementowano funkcję poczty e-mail i wiadomości SMS.

Korzystanie z funkcji poczty e-mail i wiadomości SMS

W poprzednim ćwiczeniu utworzono zasób usług Azure Communication Services (ACS) i uruchomiono bazę danych, serwer internetowy i serwer interfejsu API. Zaktualizowano również następujące wartości w pliku 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>
```
Przed kontynuowaniem upewnij się, że wykonano poprzednie ćwiczenie .
Wróć do przeglądarki (http://localhost:4200) i wybierz pozycję Skontaktuj się z klientem , a następnie pozycję E-mail/SMS Customer w pierwszym wierszu.
Wybierz kartę Poczta e-mail/sms i wykonaj następujące zadania:
- Wprowadź temat wiadomości e-mail i treść , a następnie wybierz przycisk Wyślij wiadomość e-mail .
- Wprowadź wiadomość SMS i wybierz przycisk Wyślij wiadomość SMS .
Uwaga / Notatka

Weryfikacja wiadomości SMS dla bezpłatnych numerów jest teraz obowiązkowa w Stany Zjednoczone i Kanadzie. Aby włączyć obsługę wiadomości SMS, musisz przesłać weryfikację po zakupie numeru telefonu. Chociaż ten samouczek nie przejdzie przez ten proces, możesz wybrać pozycję Telefonia i sms -->Regulatory Documents z zasobu usług Azure Communication Services w witrynie Azure Portal i dodać wymaganą dokumentację weryfikacji.
Sprawdź, czy odebrano wiadomości e-mail i SMS. Funkcjonalność wiadomości SMS będzie działać tylko wtedy, gdy przesłano dokumenty regulacyjne wymienione w poprzedniej notatce. Przypominamy, że wiadomość e-mail zostanie wysłana do wartości zdefiniowanej dla , a wiadomość SMS zostanie wysłana do wartości zdefiniowanej CUSTOMER_EMAIL_ADDRESSCUSTOMER_PHONE_NUMBER w pliku env . Jeśli nie możesz podać Stany Zjednoczone numeru telefonu do użycia dla wiadomości SMS, możesz pominąć ten krok.

Uwaga / Notatka

Jeśli w skrzynce odbiorczej nie widzisz wiadomości e-mail dla adresu zdefiniowanego CUSTOMER_EMAIL_ADDRESS w pliku env , sprawdź folder spamu.

Eksplorowanie kodu wiadomości e-mail

Wskazówka

Jeśli używasz programu Visual Studio Code, możesz otwierać pliki bezpośrednio, wybierając pozycję:

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

Następnie wpisz nazwę pliku, który chcesz otworzyć.

Otwórz plik customers-list.component.ts . Pełna ścieżka do pliku to client/src/app/customers-list/customers-list.component.ts.

Po wybraniu pozycji Kontakt z klientem , a następnie e-mail/SMS Customer w usłudze datagrid, customer-list składnik wyświetli okno dialogowe. Jest to obsługiwane przez openEmailSmsDialog() funkcję w pliku 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.');
    }
}

Funkcja openEmailSmsDialog() wykonuje następujące zadania:

Sprawdza, czy data obiekt (który reprezentuje wiersz z usługi datagrid) zawiera phone właściwość i email . Jeśli tak, tworzy dialogData obiekt zawierający informacje przekazywane do okna dialogowego.
EmailSmsDialogComponent Otwiera okno dialogowe i przekazuje dialogData do niego obiekt.
Subskrybuje afterClosed() zdarzenie okna dialogowego. To zdarzenie jest wyzwalane po zamknięciu okna dialogowego. Obiekt response zawiera informacje wprowadzone w oknie dialogowym.

Otwórz plik email-sms-dialog.component.ts . Pełna ścieżka do pliku to client/src/app/email-sms-dialog/email-sms-dialog.component.ts.
sendEmail() Znajdź funkcję:
```
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
    }
}
```
Funkcja sendEmail() wykonuje następujące zadania:
- Sprawdza, czy flaga acsEmailEnabled funkcji jest ustawiona na true. Ta flaga sprawdza, czy zmienna ACS_EMAIL_ADDRESS środowiskowa ma przypisaną wartość.
- Jeśli acsEmailEnabled ma wartość true, funkcja jest wywoływana, acsService.sendEmail() a temat wiadomości e-mail, treść, nazwa klienta i adres e-mail klienta są przekazywane. Ponieważ baza danych zawiera przykładowe dane, zmienna CUSTOMER_EMAIL_ADDRESS środowiskowa jest używana zamiast this.data.email. W rzeczywistej aplikacji this.data.email wartość będzie używana.
- Subskrybuje funkcję w usłudze sendEmail()acsService . Ta funkcja zwraca obserwowalny zestaw RxJS zawierający odpowiedź z usługi po stronie klienta.
- Jeśli wiadomość e-mail została wysłana pomyślnie, właściwość jest ustawiona emailSent na truewartość .
Aby zapewnić lepszą hermetyzację i ponowne użycie kodu, usługi po stronie klienta, takie jak acs.service.ts , są używane w całej aplikacji. Dzięki temu wszystkie funkcje usługi ACS można skonsolidować w jednym miejscu.
Otwórz acs.service.ts i znajdź sendEmail() funkcję. Pełna ścieżka do pliku to 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)
    );
}
```
Funkcja sendEmail() w programie AcsService wykonuje następujące zadania:
- http.post() Wywołuje funkcję i przekazuje do niej temat wiadomości e-mail, wiadomość, nazwę klienta i adres e-mail klienta. Funkcja http.post() zwraca obserwowalny zestaw RxJS zawierający odpowiedź wywołania interfejsu API.
- Obsługuje wszelkie błędy zwracane przez http.post() funkcję przy użyciu operatora RxJS catchError .
Teraz sprawdźmy, jak aplikacja współdziała z funkcją poczty e-mail usługi ACS. Otwórz plik acs.ts i znajdź sendEmail() funkcję. Pełna ścieżka do pliku to server/typescript/acs.ts.
Funkcja sendEmail() wykonuje następujące zadania:
- Tworzy nowy EmailClient obiekt i przekazuje parametry połączenia ACS do niego (ta wartość jest pobierana ze zmiennej środowiskowejACS_CONNECTION_STRING).
```
const emailClient = new EmailClient(connectionString);
```
- Tworzy nowy EmailMessage obiekt i przekazuje informacje nadawcy, tematu, wiadomości i adresata.
```
const msgObject: EmailMessage = {
    senderAddress: process.env.ACS_EMAIL_ADDRESS as string,
    content: {
        subject: subject,
        plainText: message,
    },
    recipients: {
        to: [
            {
                address: customerEmailAddress,
                displayName: customerName,
            },
        ],
    },
};
```
- Wysyła wiadomość e-mail przy użyciu emailClient.beginSend() funkcji i zwraca odpowiedź. Mimo że funkcja wysyła tylko do jednego adresata w tym przykładzie, beginSend() funkcja może służyć do wysyłania do wielu adresatów.
```
const poller = await emailClient.beginSend(msgObject);
```
- Czeka, aż poller obiekt będzie sygnalizować, że jest on wykonany i wysyła odpowiedź do obiektu wywołującego.

Eksplorowanie kodu SMS

Wróć do otwartego wcześniej pliku email-sms-dialog.component.ts . Pełna ścieżka do pliku to client/src/app/email-sms-dialog/email-sms-dialog.component.ts.
sendSms() Znajdź funkcję:
```
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;
    }
}
```
Funkcja sendSMS() wykonuje następujące zadania:
- Sprawdza, czy flaga acsPhoneEnabled funkcji jest ustawiona na true. Ta flaga sprawdza, czy zmienna ACS_PHONE_NUMBER środowiskowa ma przypisaną wartość.
- Jeśli acsPhoneEnabled ma wartość true, funkcja jest wywoływana, acsService.SendSms() a wiadomość SMS i numer telefonu klienta są przekazywane. Ponieważ baza danych zawiera przykładowe dane, zmienna CUSTOMER_PHONE_NUMBER środowiskowa jest używana zamiast this.data.customerPhoneNumber. W rzeczywistej aplikacji this.data.customerPhoneNumber wartość będzie używana.
- Subskrybuje funkcję w usłudze sendSms()acsService . Ta funkcja zwraca obserwowalny zestaw RxJS zawierający odpowiedź z usługi po stronie klienta.
- Jeśli wiadomość SMS została wysłana pomyślnie, ustawia smsSent właściwość na true.
Otwórz acs.service.ts i znajdź sendSms() funkcję. Pełna ścieżka do pliku to 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)
    );
}  
```
Funkcja sendSms() wykonuje następujące zadania:
- http.post() Wywołuje funkcję i przekazuje do niej komunikat i numer telefonu klienta. Funkcja http.post() zwraca obserwowalny zestaw RxJS zawierający odpowiedź wywołania interfejsu API.
- Obsługuje wszelkie błędy zwracane przez http.post() funkcję przy użyciu operatora RxJS catchError .
Na koniec sprawdźmy, jak aplikacja współdziała z funkcją programu ACS SMS. Otwórz plik acs.ts . Pełna ścieżka do pliku to server/typescript/acs.ts i lokalizowanie sendSms() funkcji.
Funkcja sendSms() wykonuje następujące zadania:
- Tworzy nowy SmsClient obiekt i przekazuje parametry połączenia ACS do niego (ta wartość jest pobierana ze zmiennej środowiskowejACS_CONNECTION_STRING).
```
const smsClient = new SmsClient(connectionString);
```
- smsClient.send() Wywołuje funkcję i przekazuje numer telefonu ACS (from), numer telefonu klienta (to) i wiadomość SMS:
```
const sendResults = await smsClient.send({
    from: process.env.ACS_PHONE_NUMBER as string,
    to: [customerPhoneNumber],
    message: message
});
return sendResults;
```
- Zwraca odpowiedź na obiekt wywołujący.
Więcej informacji na temat funkcji wiadomości e-mail i wiadomości SMS usługi ACS można uzyskać w następujących artykułach:
- Poczta e-mail w usługach Azure Communication Services
- Sms w usługach Azure Communication Services
Przed przejściem do następnego ćwiczenia przejrzyjmy kluczowe pojęcia omówione w tym ćwiczeniu:
- Plik acs.service.ts hermetyzuje funkcje poczty e-mail i wiadomości SMS usługi ACS używane przez aplikację po stronie klienta. Obsługuje wywołania interfejsu API do serwera i zwraca odpowiedź na obiekt wywołujący.
- Interfejs API po stronie serwera używa usług ACS EmailClient i SmsClient obiektów do wysyłania wiadomości e-mail i wiadomości SMS.
Teraz, gdy wiesz już, jak można wysyłać wiadomości e-mail i SMS, przełączmy naszą koncentrację na integrowanie danych organizacji z aplikacją.

Następny krok

Dane organizacyjne: tworzenie rejestracji aplikacji Microsoft Entra ID

Sprzężenie zwrotne

Czy ta strona była pomocna?

Last updated on 2025-06-13