Neste artigo, será criado uma aplicação usando Angular onde uma simples aplicação WEB será implementada usando a plataforma do Auth0 para autenticar e autorizar o usuário e a plataforma da ZENVIA para integrar com o canal SMS com o propósito de validar o telefone do usuário.

SMS (Short Message Service) é um protocolo de comunicação que utiliza a infraestrutura das operadoras, com o propósito de enviar e receber mensagens de texto com até 160 caracteres.

Índice:

1. Criar a conta na plataforma da ZENVIA
2. Criar o sandbox na plataforma da ZENVIA
3. Criar a conta na plataforma do Auth0
4. Configurar a plataforma do Auth0
5. Criando a aplicação Angular
6. Testando o cadastro da aplicação

2. Criar a conta na plataforma da ZENVIA

ZENVIA é uma plataforma que empodera as empresas a criar experiências únicas de comunicação para seus clientes através dos canais SMS, WhatsApp, Voz, Facebook Messenger, Instagram, WEB Chat e RCS.

1. Acessar o site https://app.zenvia.com e clicar no link Create your account.

2. Preencher os campos Name, E-mail, Password, clicar na opção I’m not a robot e clicar no botão Create account.

3. Verificar o e-mail cadastrado.

4. Clicar no botão YES IT’S ME! CONFIRM IT 🙂 do e-mail enviado.

5. Preencher o campo E-mail e clicar no botão Next.

6. Preencher o campo Password e clicar no botão Sign in.

7. Preencher o campo Enter your phone number e clicar no botão Continue.

8. Preencher o campo Enter the 6-digit code com o código que recebeu no seu celular e clicar no botão Continue.

9. Pronto! Conta criada.

3. Criar o sandbox na plataforma da ZENVIA

Sandbox é um conceito muito conhecido entre os desenvolvedores, onde é possível testar alguma funcionalidade de uma plataforma sem contratar o serviço. Portanto, precisa ser intuitivo e sem burocracias.

1. Clicar no menu Solutions e Sandbox.

2. Clicar no botão Create New.

3. Selecionar a opção SMS e clicar no botão Next.

4. Ler o QR Code ou enviar a palavra chave north-broom para o número 28577 usando o seu aplicativo de mensagem SMS.

Observações:

• Esse cadastro é obrigatório para que a plataforma da ZENVIA cadastre o(s) número(s) que gostaria de testar, impossibilitando o envio da mensagem para qualquer celular.
• É possível cadastrar outros números usando o mesmo procedimento.

5. Você receberá uma mensagem no seu celular confirmando que o seu número foi cadastrado.

6. O(s) número(s) cadastrado(s) será(ão) exibido(s) na tela, assim como o limite de 200 mensagens no período de 24 horas. Clicar no botão Next.

Observação:

• Quanto o período de 24 horas for atingido, cadastre novamente o(s) número(s) para iniciar um novo ciclo de 200 mensagens no período de 24 horas. Caso utilize as 200 mensagens, terá que aguardar o período de 24 horas.

7. Você poderá testar o envio de uma mensagem do tipo texto. Selecionar o número que deseja enviar no campo To, preencher a mensagem no campo Message e clicar no botão Send message. Copiar o parâmetro from e, no meu caso, o valor north-broom foi gerado e copiar o token no parâmetro X-API-TOKEN e, no meu caso, o token UbH-3NSJMufN0VN5fejawn633zDGnXRiRhYI foi gerado pois esses valores serão configurados na plataforma do Auth0. Clicar no botão Next.

Observações:

• No campo From, por ser um Sandbox, uma palavra aleatória é criada que corresponde ao identificador da integração quando o serviço é contratado.
• No campo Request é exibido um exemplo de requisição usando a ferramenta curl. Você poderá simular essa mesma requisição usando outras ferramentas como Postman ou Insomnia.
• No campo Response é exibido a resposta da requisição no formato JSON.

8. Mensagem de teste enviada para o número selecionado.

9. Nesse artigo, não precisamos criar uma assinatura para o webhook. Clicar no Finish.

11. Pronto! Sandbox criado para o canal SMS e número configurado. A documentação da API está disponível em https://zenvia.github.io/zenvia-openapi-spec/.

4. Criar a conta na plataforma do Auth0

Auth0 é uma plataforma de autenticação e autorização adaptável e fácil de implementar.

1. Acessar o site https://auth0.com/ e clicar no botão Sign up.

2. Preencher o campo Email e clicar no botão Continue.

3. Preencher os campos Email, Password e clicar no botão Continue.

4. Clicar na opção Personal e clicar no botão NEXT.

5. Verificar o e-mail cadastrado.

6. Pronto! Conta criada.

5. Configurar a plataforma do Auth0

1. Clicar no menu Applications e clicar no menu Applications.

2. Clicar no link com o nome da aplicação.

3. Copiar do domínio que foi gerado, no meu caso, o domínio dev-5tf99p7c.us.auth0.com foi copiado, copiar o Client ID que foi gerado, no meu caso, o Client ID GBPB42qhMWCtvrwGmYxvm5cbHXU68nzG foi copiado, selecionar a opção Single Page Application no campo Application Type, preencher os campos Allowed Callback URLs, Allowed Logout URLs, Allowed Web Origins e clicar no botão Save Changes.

4. Clicar no menu Actions e clicar no menu Flows.

5. Clicar na caixa Send Phone Message.

6. Clicar no menu Custom.

7. Clicar no link Create Action.

8. Preencher o campo Name, selecionar a opção Send Phone Message no campo Trigger, selecionar a opção Node 16 (recommended) no campo Runtime e clicar no botão Create.

9. Clicar no ícone da chave.

10. Clicar no botão Add Secret.

11. Preencher os campos Key com valor ZENVIA_TOKEN e Value com o valor UbH-3NSJMufN0VN5fejawn633zDGnXRiRhYI e clicar no botão Create.

12. Preencher os campos Key com valor ZENVIA_FROM e Value com o valor north-broom e clicar no botão Create.

13. Clicar no ícone da dependência.

14. Clicar no botão Add Dependency.

15. Preencher o campo Name com valor @zenvia/sdk e clicar no botão Create.

16. Preencher o editor com o script abaixo e clicar no botão Deploy.

const { Client, TextContent } = require('@zenvia/sdk');
/**
* Handler that will be called during the execution of a SendPhoneMessage flow.
*
* @param {Event} event - Details about the user and the context in which they are logging in.
*/
exports.onExecuteSendPhoneMessage = async (event) => {
  const text = event.message_options.text;
  const recipient = event.message_options.recipient;
  const client = new Client(event.secrets.ZENVIA_TOKEN);
  const sms = client.getChannel('sms');
  return sms.sendMessage(event.secrets.ZENVIA_FROM, recipient, new TextContent(text))
};

18. Clicar no menu Custom.

19. Arrastar a ação ZENVIA SMS entre os pontos Start e Complete.

20. Clicar no menu Security e clicar no menu Flows.

21. Clicar na caixa Phone Message.

22. Clicar no botão para habilitar, clicar nas caixas Custom e SMS e clicar no botão Save.

23. Clicar na caixa Always e no botão Save.

24. Pronto! Aplicação, ação de envio da mensagem SMS e autenticação multi-factor (AMF) configuradas. A documentação do Auth0 está disponível em https://auth0.com/docs.

6. Criando a aplicação Angular

Angular é uma plataforma de desenvolvimento para a construção de aplicações WEB, móvel e desktop usando HTML, CSS e TypeScript (JavaScript). Atualmente, o Angular está na versão 13 e o Google é o principal mantenedor do projeto.

1. Vamos criar a aplicação com a estrutura base do Angular usando a ferramenta Angular CLI com o arquivo de rota e o formato de estilo SCSS.

ng new angular-auth0-zenvia-sms --routing true --style scss
CREATE angular-auth0-zenvia-sms/README.md (1075 bytes)
CREATE angular-auth0-zenvia-sms/.editorconfig (274 bytes)
CREATE angular-auth0-zenvia-sms/.gitignore (548 bytes)
CREATE angular-auth0-zenvia-sms/angular.json (3315 bytes)
CREATE angular-auth0-zenvia-sms/package.json (1087 bytes)
CREATE angular-auth0-zenvia-sms/tsconfig.json (863 bytes)
CREATE angular-auth0-zenvia-sms/.browserslistrc (600 bytes)
CREATE angular-auth0-zenvia-sms/karma.conf.js (1441 bytes)
CREATE angular-auth0-zenvia-sms/tsconfig.app.json (287 bytes)
CREATE angular-auth0-zenvia-sms/tsconfig.spec.json (333 bytes)
CREATE angular-auth0-zenvia-sms/.vscode/extensions.json (130 bytes)
CREATE angular-auth0-zenvia-sms/.vscode/launch.json (474 bytes)
CREATE angular-auth0-zenvia-sms/.vscode/tasks.json (938 bytes)
CREATE angular-auth0-zenvia-sms/src/favicon.ico (948 bytes)
CREATE angular-auth0-zenvia-sms/src/index.html (307 bytes)
CREATE angular-auth0-zenvia-sms/src/main.ts (372 bytes)
CREATE angular-auth0-zenvia-sms/src/polyfills.ts (2338 bytes)
CREATE angular-auth0-zenvia-sms/src/styles.scss (80 bytes)
CREATE angular-auth0-zenvia-sms/src/test.ts (745 bytes)
CREATE angular-auth0-zenvia-sms/src/assets/.gitkeep (0 bytes)
CREATE angular-auth0-zenvia-sms/src/environments/environment.prod.ts (51 bytes)
CREATE angular-auth0-zenvia-sms/src/environments/environment.ts (658 bytes)
CREATE angular-auth0-zenvia-sms/src/app/app-routing.module.ts (245 bytes)
CREATE angular-auth0-zenvia-sms/src/app/app.module.ts (393 bytes)
CREATE angular-auth0-zenvia-sms/src/app/app.component.scss (0 bytes)
CREATE angular-auth0-zenvia-sms/src/app/app.component.html (23364 bytes)
CREATE angular-auth0-zenvia-sms/src/app/app.component.spec.ts (1127 bytes)
CREATE angular-auth0-zenvia-sms/src/app/app.component.ts (229 bytes)
Packages installed successfully.
    Successfully initialized git.

2. Instalar e configurar o Bootstrap CSS framework. Realizar os passos 2 e 3 da postagem Adicionando o framework de CSS Bootstrap em uma aplicação Angular.

3. Configurar a variável auth0.domain com o domínio do Auth0 e a variável auth0.clientId com o Client ID do Auth0 nos arquivos src/environments/environment.ts e src/environments/environment.prod.ts conforme abaixo.

auth0: {
  domain: 'dev-5tf99p7c.us.auth0.com',
  clientId: 'GBPB42qhMWCtvrwGmYxvm5cbHXU68nzG',
  redirectUri: 'http://localhost:4200/profile',
},

4. Instalar a biblioteca @auth0/auth0-angular.

npm install @auth0/auth0-angular

5. Criar o componente SignInComponent.

ng generate component sign-in --skip-tests=true
CREATE src/app/sign-in/sign-in.component.scss (0 bytes)
CREATE src/app/sign-in/sign-in.component.html (22 bytes)
CREATE src/app/sign-in/sign-in.component.ts (279 bytes)
UPDATE src/app/app.module.ts (477 bytes)

6. Alterar o arquivo src/app/sign-in/sign-in.component.ts. Importar o serviço Router e criar método signIn conforme abaixo.

import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
  selector: 'app-sign-in',
  templateUrl: './sign-in.component.html',
  styleUrls: ['./sign-in.component.scss'],
})
export class SignInComponent {
  constructor(private router: Router) {
  }
  public signIn(): void {
    this.router.navigate(['/profile']);
  }
}

7. Alterar o arquivo src/app/sign-in/sign-in.component.html. Adicionar as linhas conforme abaixo.

<div class="row justify-content-center my-5">
  <div class="col-4">
    <div class="card">
      <div class="card-body">
        <div class="row">
          <div class="col d-grid">
            <button type="button" (click)="signIn()" class="btn btn-sm btn-success">
              Sign in
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

8. Criar o componente ProfileComponent.

ng generate component profile --skip-tests=true
CREATE src/app/profile/profile.component.scss (0 bytes)
CREATE src/app/profile/profile.component.html (22 bytes)
CREATE src/app/profile/profile.component.ts (280 bytes)
UPDATE src/app/app.module.ts (710 bytes)

9. Alterar o arquivo src/app/profile/profile.component.ts. Importar o serviço AuthService e adicionar as linhas conforme abaixo.

import { Component, OnInit } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';
@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.scss'],
})
export class ProfileComponent implements OnInit {
  user: any;
  constructor(private authService: AuthService) {
    this.user = {};
  }
  public ngOnInit(): void {
    this.authService.user$.subscribe((success: any) => {
      this.user = success;
    });
  }
}

10. Alterar o arquivo src/app/profile/profile.component.html. Adicionar as linhas conforme abaixo.

<div class="row justify-content-center my-5">
  <div class="col-4">
    <div class="row" *ngIf="user.picture">
      <div class="col mb-2 text-center">
        <img [src]="user.picture" class="rounded-circle w-25">
      </div>
    </div>
    <div class="row">
      <div class="col mb-2">
        <label for="email" class="form-label">Email:</label>
        <input type="email" id="email" name="email" #email="ngModel" [ngModel]="user.email" class="form-control form-control-sm">
      </div>
    </div>
    <div class="row">
      <div class="col mb-2">
        <label for="nickname" class="form-label">Nickname:</label>
        <input type="text" id="nickname" name="nickname" #nickname="ngModel" [(ngModel)]="user.nickname" class="form-control form-control-sm">
      </div>
    </div>
  </div>
</div>

11. Alterar o arquivo src/app/app.component.ts. Importar o serviço AuthService e criar os métodos isAuthenticated e signOut conforme abaixo.

import { Component, Inject, OnInit } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { AuthService } from '@auth0/auth0-angular';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  isAuthenticated: boolean;
  constructor(@Inject(DOCUMENT) private document: Document,
              private authService: AuthService) {
    this.isAuthenticated = false;
  }
  public ngOnInit(): void {
    this.authService.isAuthenticated$.subscribe((success: boolean) => {
      this.isAuthenticated = success;
    });
  }
  public signOut(): void {
    this.authService.logout({
      returnTo: this.document.location.origin,
    });
  }
}

12. Alterar o arquivo src/app/app.component.html. Adicionar o menu conforme abaixo.

<nav class="navbar navbar-expand-sm navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Angular Auth0 ZENVIA SMS</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div id="navbarContent" class="collapse navbar-collapse">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link" routerLink="/signIn" routerLinkActive="active" *ngIf="!isAuthenticated">Sign in</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="/profile" routerLinkActive="active" *ngIf="isAuthenticated">Profile</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="" (click)="signOut()" *ngIf="isAuthenticated">Sign out</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<router-outlet></router-outlet>

13. Alterar o arquivo src/app/app-routing.component.ts. Adicionar as rotas conforme abaixo.

import { AuthGuard } from '@auth0/auth0-angular';
import { ProfileComponent } from './profile/profile.component';
import { SignInComponent } from './sign-in/sign-in.component';
const routes: Routes = [
  {
    path: '',
    redirectTo: 'signIn',
    pathMatch: 'full',
  },
  {
    path: 'profile',
    component: ProfileComponent,
    canActivate: [AuthGuard],
  },
  {
    path: 'signIn',
    component: SignInComponent,
  },
  {
    path: '**',
    redirectTo: 'signIn',
  },
];

14. Alterar o arquivo src/app/app.module.ts. Importar os módulos FormsModule e AuthModule, os componentes ProfileComponent e SignInComponent e configurar o módulo AuthModule conforme abaixo.

import { FormsModule } from '@angular/forms';
import { AuthModule } from '@auth0/auth0-angular';
import { environment } from '../environments/environment';
import { SignInComponent } from './sign-in/sign-in.component';
import { ProfileComponent } from './profile/profile.component';
declarations: [
  AppComponent,
  SignInComponent,
  ProfileComponent,
],
imports: [
  BrowserModule,
  FormsModule,
  AuthModule.forRoot(environment.auth0),
  AppRoutingModule,
],

15. Executar a aplicação com o comando abaixo.

npm start
> [email protected] start
> ng serve
Browser application bundle generation complete.
Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   2.43 MB | 
styles.css, styles.js | styles        | 454.67 kB | 
polyfills.js          | polyfills     | 294.83 kB | 
scripts.js            | scripts       |  76.33 kB | 
main.js               | main          |  21.87 kB | 
runtime.js            | runtime       |   6.54 kB | 
                      | Initial Total |   3.27 MB
Build at: 2022-03-31T20:10:33.566Z - Hash: 9c7286a62dfaa60c - Time: 5025ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Compiled successfully.

16. Pronto! Acessar a URL http://localhost:4200/ e verificar se a aplicação está funcionando. Veja a aplicação funcionando em GitHub Pages e Stackblitz.

7. Testando o cadastro da aplicação

1. Vamos testar o cadastro da aplicação. Acessar a URL http://localhost:4200/ e clicar no botão Sign in.

2. Clicar no botão Sign up.

3. Preencher os campos Email Address, Password e clicar no botão Continue.

4. Selecionar o código do país, preencher o campo Enter your phone number e clicar no botão Continue.

5. Copiar o código que recebeu por mensagem SMS.

6. Preencher o campo Enter the 6-digit code com o código que recebeu por mensagem SMS e clicar no botão Continue.

7. Clicar no botão Accept.

8. Você será redirecionado para a aplicação.

9. Verificar o e-mail cadastrado.

10. Pronto! Testamos o cadastro da aplicação com a validação do telefone do usuário por SMS e a visualização do perfil.

O repositório da aplicação está disponível em https://github.com/rodrigokamada/angular-auth0-zenvia-sms.

*Rodrigo Kamada é IT Specialist na Zenvia | Blog, Medium, Dev Community e Hacker Noon.