Komunikace: Odesílání e-mailů a SMS zpráv

2025-06-13

Kromě telefonních hovorů můžou služby Azure Communication Services také posílat e-maily a SMS zprávy. To může být užitečné, když chcete poslat zprávu zákazníkovi nebo jinému uživateli přímo z aplikace.

V tomto cvičení budete:

Podívejte se, jak se dají e-maily a SMS zprávy odesílat z aplikace.
Projděte si kód a zjistěte, jak se implementují funkce e-mailu a SMS.

Používání funkcí e-mailu a SMS

V předchozím cvičení jste vytvořili prostředek služby Azure Communication Services (ACS) a spustili databázi, webový server a server rozhraní API. Aktualizovali jste také následující hodnoty v souboru .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>
```
Než budete pokračovat, ujistěte se, že jste dokončili předchozí cvičení .
Vraťte se do prohlížeče (http://localhost:4200) a v prvním řádku vyberte Kontaktovat zákazníka následovaný e-mailem nebo sms zákazníkem .
Vyberte kartu E-mail/SMS a proveďte následující úlohy:
- Zadejte předmět e-mailu a text a vyberte tlačítko Odeslat e-mail .
- Zadejte zprávu SMS a vyberte tlačítko Odeslat SMS .
Poznámka:

Ověření sms pro bezplatná čísla je nyní povinné v USA a Kanadě. Pokud chcete povolit zasílání zpráv SMS, musíte po zakoupení telefonního čísla odeslat ověření. I když tento kurz neprojde tímto procesem, můžete na webu Azure Portal vybrat telefonie a SMS –->Regulační dokumenty z prostředku služby Azure Communication Services a přidat požadovanou dokumentaci k ověření.
Zkontrolujte, že jste dostali e-maily a zprávy SMS. Funkce SMS bude fungovat pouze v případě, že jste odeslali regulační dokumenty uvedené v předchozí poznámce. Připomínáme, že e-mailová zpráva se odešle na hodnotu definovanou pro CUSTOMER_EMAIL_ADDRESS a zpráva SMS se odešle na hodnotu definovanou CUSTOMER_PHONE_NUMBER v souboru .env . Pokud jste nemohli zadat telefonní číslo založené na USA, které byste mohli použít pro zprávy SMS, můžete tento krok přeskočit.

Poznámka:

Pokud nevidíte e-mailovou zprávu ve složce Doručená pošta pro adresu, kterou jste definovali CUSTOMER_EMAIL_ADDRESS v souboru .env , zkontrolujte složku spamu.

Zkoumání e-mailového kódu

Návod

Pokud používáte Visual Studio Code, můžete soubory otevřít přímo tak, že vyberete:

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

Potom zadejte název souboru, který chcete otevřít.

Otevřete soubor customers-list.component.ts . Úplná cesta k souboru je client/src/app/customers-list/customers-list.component.ts.

Když jste v datovémgridu vybrali možnost Kontaktovat zákazníka a potom e-mail/SMS Zákazník , zobrazila customer-list se součást dialogové okno. To zpracovává openEmailSmsDialog() funkce v souboru 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.');
    }
}

Funkce openEmailSmsDialog() provádí následující úlohy:

Zkontroluje, jestli data objekt (který představuje řádek z datagridu) obsahuje phone a email vlastnost. Pokud ano, vytvoří dialogData objekt, který obsahuje informace, které se mají předat do dialogového okna.
EmailSmsDialogComponent Otevře dialogové okno a předá dialogData mu objekt.
Přihlásí se k odběru afterClosed() události dialogového okna. Tato událost se aktivuje při zavření dialogového okna. Objekt response obsahuje informace, které byly zadány do dialogového okna.

Otevřete soubor email-sms-dialog.component.ts . Úplná cesta k souboru je client/src/app/email-sms-dialog/email-sms-dialog.component.ts.
sendEmail() Vyhledejte funkci:
```
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
    }
}
```
Funkce sendEmail() provádí následující úlohy:
- Zkontroluje, jestli acsEmailEnabled je příznak funkce nastavený na true. Tento příznak zkontroluje, jestli ACS_EMAIL_ADDRESS má proměnná prostředí přiřazenou hodnotu.
- Pokud acsEmailEnabled je hodnota true, volá se acsService.sendEmail() funkce a předá se předmět e-mailu, text, jméno zákazníka a e-mailová adresa zákazníka. Vzhledem k tomu, že databáze obsahuje ukázková data, CUSTOMER_EMAIL_ADDRESS používá this.data.emailse místo proměnné prostředí . V reálné aplikaci this.data.email by se hodnota použila.
- Přihlásí se k odběru sendEmail() funkce ve službě acsService . Tato funkce vrátí pozorovatelný RxJS, který obsahuje odpověď ze služby na straně klienta.
- Pokud se e-mail úspěšně odeslal, vlastnost je nastavena emailSent na truehodnotu .
Pro zajištění lepšího zapouzdření a opětovného použití kódu se používají služby na straně klienta, jako je acs.service.ts , v celé aplikaci. To umožňuje sloučení všech funkcí služby ACS do jednoho místa.
Otevřete acs.service.ts a vyhledejte sendEmail() funkci. Úplná cesta k souboru je 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)
    );
}
```
Funkce sendEmail() v AcsService nástroji provádí následující úlohy:
- http.post() Zavolá funkci a předá jí předmět e-mailu, zprávu, jméno zákazníka a e-mailovou adresu zákazníka. Funkce http.post() vrátí pozorovatelný RxJS, který obsahuje odpověď z volání rozhraní API.
- Zpracovává všechny chyby vrácené http.post() funkcí pomocí operátoru RxJS catchError .
Teď se podíváme, jak aplikace komunikuje s funkcí e-mailu služby ACS. Otevřete soubor acs.ts a vyhledejte sendEmail() funkci. Úplná cesta k souboru je server/typescript/acs.ts.
Funkce sendEmail() provádí následující úlohy:
- Vytvoří nový EmailClient objekt a předá připojovací řetězec služby ACS (tato hodnota se načte z ACS_CONNECTION_STRING proměnné prostředí).
```
const emailClient = new EmailClient(connectionString);
```
- Vytvoří nový EmailMessage objekt a předá odesílatele, předmět, zprávu a informace o příjemci.
```
const msgObject: EmailMessage = {
    senderAddress: process.env.ACS_EMAIL_ADDRESS as string,
    content: {
        subject: subject,
        plainText: message,
    },
    recipients: {
        to: [
            {
                address: customerEmailAddress,
                displayName: customerName,
            },
        ],
    },
};
```
- Odešle e-mail pomocí emailClient.beginSend() funkce a vrátí odpověď. I když funkce odesílá pouze jednomu příjemci v tomto příkladu beginSend() , dá se použít i k odeslání více příjemcům.
```
const poller = await emailClient.beginSend(msgObject);
```
- Čeká na to, poller aby objekt signalizoval, že je hotový, a odešle odpověď volajícímu.

Seznámení s kódem SMS

Vraťte se k souboru email-sms-dialog.component.ts , který jste otevřeli dříve. Úplná cesta k souboru je client/src/app/email-sms-dialog/email-sms-dialog.component.ts.
sendSms() Vyhledejte funkci:
```
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;
    }
}
```
Funkce sendSMS() provádí následující úlohy:
- Zkontroluje, jestli acsPhoneEnabled je příznak funkce nastavený na true. Tento příznak zkontroluje, jestli ACS_PHONE_NUMBER má proměnná prostředí přiřazenou hodnotu.
- Pokud acsPhoneEnabled je hodnota true, zavolá se acsService.SendSms() funkce a předá se zpráva SMS a telefonní číslo zákazníka. Vzhledem k tomu, že databáze obsahuje ukázková data, CUSTOMER_PHONE_NUMBER používá this.data.customerPhoneNumberse místo proměnné prostředí . V reálné aplikaci this.data.customerPhoneNumber by se hodnota použila.
- Přihlásí se k odběru sendSms() funkce ve službě acsService . Tato funkce vrátí pozorovatelný RxJS, který obsahuje odpověď ze služby na straně klienta.
- Pokud byla zpráva SMS úspěšně odeslána, nastaví smsSent vlastnost na true.
Otevřete acs.service.ts a vyhledejte sendSms() funkci. Úplná cesta k souboru je 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)
    );
}  
```
Funkce sendSms() provádí následující úlohy:
- http.post() Zavolá funkci a předá jí zprávu a telefonní číslo zákazníka. Funkce http.post() vrátí pozorovatelný RxJS, který obsahuje odpověď z volání rozhraní API.
- Zpracovává všechny chyby vrácené http.post() funkcí pomocí operátoru RxJS catchError .
Nakonec se podíváme, jak aplikace komunikuje s funkcí ACS SMS. Otevřete soubor acs.ts . Úplná cesta k souboru je server/typescript/acs.ts a vyhledejte sendSms() funkci.
Funkce sendSms() provádí následující úlohy:
- Vytvoří nový SmsClient objekt a předá připojovací řetězec služby ACS (tato hodnota se načte z ACS_CONNECTION_STRING proměnné prostředí).
```
const smsClient = new SmsClient(connectionString);
```
- smsClient.send() Zavolá funkci a předá telefonní číslo služby ACS (from), telefonní číslo zákazníka (to) a SMS zprávu:
```
const sendResults = await smsClient.send({
    from: process.env.ACS_PHONE_NUMBER as string,
    to: [customerPhoneNumber],
    message: message
});
return sendResults;
```
- Vrátí odpověď volajícímu.
Další informace o funkcích E-mailu a SMS služby ACS najdete v následujících článcích:
- E-mail ve službě Azure Communication Services
- SMS ve službě Azure Communication Services
Než přejdeme k dalšímu cvičení, pojďme se podívat na klíčové koncepty popsané v tomto cvičení:
- Soubor acs.service.ts zapouzdřuje funkce ACS e-mailu a SMS používané aplikací na straně klienta. Zpracovává volání rozhraní API na server a vrací odpověď volajícímu.
- Rozhraní API na straně serveru používá ACS EmailClient a SmsClient objekty k odesílání e-mailových a SMS zpráv.
Teď, když jste se dozvěděli, jak se dají odesílat e-maily a SMS zprávy, pojďme se zaměřit na integraci dat organizace do aplikace.

Další krok

Data organizace: Vytvoření registrace aplikace Microsoft Entra ID

Sdílet prostřednictvím

Komunikace: Odesílání e-mailů a SMS zpráv

Používání funkcí e-mailu a SMS

Zkoumání e-mailového kódu

Seznámení s kódem SMS

Další krok

Váš názor

Další materiály