Paweł Łukasiewicz
2020-06-20
Paweł Łukasiewicz
2020-06-20
Udostępnij Udostępnij Kontakt
Wprowadzenie

W wolnych chwilach pracuję nad projektem bazującym w swojej idei na Uberze. Obecnie jest to bardzo wczesny etap ale jego efektem było powstanie dwóch artykułów związanych z Google Maps, które możecie znaleźć tutaj:

W dzisiejszych czasach weryfikacja użytkownika zakładającego konto nie jest niczym wyjątkowym. Po poprawnej rejestracji wysyłamy wiadomość e-mail ze specjalnie przygotowanym adresem url zawierającym zwykle zaszyty kod. Po kliknięciu przez użytkownika linka w wiadomości dokonujemy odesłania do odpowiedniej akcji, której celem jest sprawdzenie czy dana osoba potwierdziła swoją rejestrację w systemie.

W moim przypadku pojawił się jednak nieco inny problem – w trosce o bezpieczeństwo każdej ze stron potrzebuję dokonać weryfikacji numeru telefonu. Tutaj pojawiło się pytanie – jak wysłać wiadomość sms z aplikacji przygotowanej w oparciu o technologię ASP.NET Core?

Po dość krótkich poszukiwaniach natrafiłem na serwis oferujący taką możliwość. Nazywa się Twilio i w ramach darmowego konta oferuje 15.50$ do wykorzystania.

Twilio

Pierwszy krok w przypadku naszej implementacji to założenie darmowego konta.

I tutaj od razu mała uwaga. Możemy wykorzystać ogólnodostępny link https://www.twilio.com/try-twilio lub też skorzystać z programu poleceń. W tym przypadku każda ze stron, tj. Wy oraz ja dostaniemy dodatkowe 10$ do wykorzystania. W ramach domowych eksperymentów każdy dodatkowy $ na koncie ma znaczenie dlatego zachęcam do skorzystania z tego linka www.twilio.com/referral/H7qoG0 - z góry dziękuje za wszelkie kliknięcia

Przejdźmy zatem sprawnie przez cały proces. Strona rejestracji prezentuje się bardzo efektownie: OPIS Po wprowadzeniu danych zostaniemy poproszeni o podanie swojego numeru telefonu: OPIS Weryfikacja polega na wprowadzeniu otrzymanego kodu: OPIS Przed nami jeszcze kilka prostych pytań: OPIS Wybieramy nasz język programowania: OPIS Oraz informujemy o naszych zamiarach wobec serwisu: OPIS Efektem końcowym jest uzyskanie dostępu do naszego panelu zarządzania: OPIS

Z naszego punktu widzenia najważniejsze są klucze autoryzacji serwisu. Mowa tutaj o ACCOUNT SID oraz AUTH TOKEN.

Zanim przejdziemy do implementacji musimy jeszcze dokonać aktywacji numeru telefonu z którego będziemy wysyłać wiadomości do naszych użytkowników. Tutaj nie mamy dużego wyboru (w ramach darmowego konta) – numer generujemy klikając Get a Trial Number.

Implementacja

W pierwszym kroku tworzymy nowy projekt ASP.NET Core 3.1 (w moim przypadku) oraz dokonujemy wstępnej konfiguracji na bazie wpisu ASP.NET Core: odswieżanie widoku po zapisaniu zmian - brak odświeżania widoku po wprowadzeniu zmian jest "nieco" irytujący.

Następnie dodajemy paczkę, która pozwala nam na integracje z systemem Twilio: OPIS

W ramach tego wpisu przygotujemy prosty mechanizm wysyłania wiadomości korzystając ze wspomnianego powyżej serwisu. Docelową implementację pozostawiam Wam. Jeżeli jednak będziecie zainteresowani możemy przygotować kolejny wpis w którym dokonamy poprawnej rejestracji dopiero po wprowdzaniu kodu wysłanego w wiadomości.

Wykorzystując taki mechanizm mamy kilka możliwych implementacji:

  • wysłanie wiadomości powitalnej na podany numer telefonu;
  • wysłanie kodu weryfikacyjnego, który należy wprowadzić, aby ukończyć rejestrację;
  • wysłanie linka aktywacyjego z zaszytym kodem, który w prosty sposób pozwala na weryfikację danej osoby.

Obecnie skupimy się na prostym przetestowaniu funkcjonalności – sprawdzimy czy paczka pozwala na szybkie i bezproblemowe wysyłanie wiadomości sms. W tym celu przygotujemy prosty formularz zawierający imię, numer telefonu oraz przycisk wysyłania wiadomości: OPIS

Dotychczasowy kod widoku wygląda następująco:

@{
    ViewData["Title"] = "Twilio";
}

<h1>Test systemu Twilio</h1>
<!--Pamiętajcie o atrybucie 'name' dla pól wartości wejściowych-->
<!--W przeciwnym wypadku nie zostaną one wysłane jako tzw. dane formularza-->

<form method="POST">
    <label for="name">Podaj swoje imię: </label>
    <input type="text" name="name" id="name" placeholder="Imię" />
    <br />
    <br />
    <label for="telephone">Podaj numer telefonu:</label>
    <input type="tel" name="telephone" id="telephone" />
    <br />
    <br />
    <hr />
    <input type="submit" value="Wyślij wiadomość powitalną" />
</form>

Pora na przygotowanie kontrolera i obsługę bramki sms. W tym przypadku będziemy bazować na dokumencji, którą możecie znaleźć tutaj: https://www.twilio.com/docs/sms/quickstart/csharp-dotnet-core

W poniższym kodzie zawarłem wszystkie niezbędne komentarze:

[HttpPost]
public ActionResult Index(string name, string telephone)
{
    // Pamiętajcie, że jest to kod czysto poglądowy - skupiamy się funkcjonalności Twilio

    // poniższe dane możecie znaleźć w swoim panelu
    const string accountSid = "AXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
    const string authToken = "6XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";

    // Inicjalizacja klienta dla naszych danych
    TwilioClient.Init(accountSid, authToken);

    // wprowadzamy numer telefonu naszego użytkownika
    var to = new PhoneNumber("+48" + telephone);
            
    // definiujemy niezbędne parametry wysyłanego sms
    var message = MessageResource.Create(
        to: to,
        from: new PhoneNumber("+18XXXXXXXXXX"), // wprowadzamy numer, który otrzymaliśmy w ramach darmowego konta 
        body: $"Witaj {name}! Twój pierwszy sms wysłany z bramki Twilio!"); // treść wysyłanej wiadomości

    return View();
}

Jedyne co tak naprawdę musicie zrobić to zastąpić odpowiednie pola danymi dostępnymi w Waszym panelu zarządzania. W wersji darmowej jest jedno istotne ograniczenie - wiadomości możecie wysyłać tylko na zweryfikowane numery telefonów. W ramach testów, wypróbowania systemu oraz działania integracji jest to zupełnie wystarczające. Jeżeli chodzi o wdrożenie tego rozwiązania dla Waszego Klienta - tutaj już trzeba wykupić wersję premium, której możliwości są dużo szersze.

Podsumowanie

W tym wpisie przeszliśmy przez wszystkie niezbędne elementy integracji z systemem Twilio. Na potrzeby własnych projektów konto darmowe jest w zupełności wystarczające. Pozwala na przygotowanie szkieletu naszej aplikacji oraz przeprowadzenie wstępnych testów.

Jeżeli myślimy o wdrożeniu rozwiązania na produkcję musimy skorzystać z konta premium lub wykorzystać inne systemy pozwalające na wysyłanie wiadomości sms.

Tutaj pojawia się moje pytanie do Was - korzystaliście z tego lub innych rozwiązań? Jeżeli tak, dajcie proszę znać w wiadomości czy macie jakichś sprawdzonych dostawców takiej usługi.