Atribua tokens de acesso ao vídeo com sua API de vídeo Express + TypeScript

Tempo de leitura: 3 minutos

April 08, 2021

Escrito por

Mia Adjei

Twilion

Revisado por

Miguel Grinberg

Twilion

Tilde Thurium

Twilion

Atribua tokens de acesso ao vídeo com sua API de vídeo Express + TypeScript

This article is for reference only. We're not onboarding new customers to Programmable Video. Existing customers can continue to use the product until December 5, 2024.

We recommend migrating your application to the API provided by our preferred video partner, Zoom. We've prepared this migration guide to assist you in minimizing any service disruption.

Bom, você criou uma API de vídeo com o Programmable Video da Twilio, o Node.js, o TypeScript e o Express. Você adicionou suporte CORS para que seu futuro aplicativo de vídeo seja capaz de acessar recursos em seu servidor. O que vem a seguir?

Para que os usuários possam realmente se conectar às salas de vídeo em seu aplicativo, eles precisarão ser autenticados usando um token de acesso. Neste tutorial, você atualizará sua API de vídeo Express + TypeScript para adicionar uma nova rota que concede tokens de acesso aos usuários do seu app de vídeo. Vamos começar!

Pré-requisitos

Você precisará de:

Uma conta gratuita na Twilio. (Cadastre-se aqui e faça o upgrade para uma conta paga, recebendo $ 10 em crédito da Twilio!)
Node.js (versão 14.16.1 ou mais recente) e npm instalados na sua máquina.
HTTPie ou cURL.
O código do tutorial anterior (veja abaixo).

O restante deste tutorial se baseia no código que você escreveu no tutorial anterior para adicionar suporte CORS ao seu vídeo API. Se você ainda não tiver esse código, é possível encontrá-lo no branch added-cors deste repositório do GitHub. Siga as instruções no arquivo README.md desse repositório para colocar a mão na massa.

Depois de executar o comando npm run start, você verá um log no seu terminal informando que o servidor está sendo executado na porta 5000:

Express server listening on port 5000

Tudo pronto para começar!

Criar um roteador de autorização

Você já tem um roteador no seu código para lidar com solicitações relacionadas à sala de vídeo. É hora de criar um novo roteador que vai lidar com suas solicitações de autorização. No caso da sua API de vídeo, essa será a parte em que um token de acesso assinado é gerado e o retornado no lado do cliente para que seus usuários possam entrar em uma sala de chamada de vídeo.

Embora este tutorial específico não se aprofunde no gerenciamento de usuários, você pode adicionar a lógica de gerenciamento de usuários à sua API. Cada usuário deve ter um identificador exclusivo (UserId), como um nome de usuário, endereço de e-mail ou UUID.

Você pode adicionar um roteador de usuário que trabalha com a criação, listagem, atualização e exclusão de usuários, além da conexão do seu banco de dados favorito para armazenar seus dados de usuário. Além disso, cogite adicionar uma rota de login que garantirá que somente usuários registrados e verificados possam recuperar tokens para seu app de vídeo.

Navegue até o diretório src e crie um novo arquivo chamado auth.ts. É nesse ponto que seu roteador de autenticação ficará ativo.

Abra esse arquivo no seu editor de código e adicione as seguintes importações na parte superior do arquivo:

import { Router } from 'express';
import config from '../config';
import twilio from 'twilio';

Em seguida, crie um novo roteador para lidar com solicitações de autorização:

const authRouter = Router();

Depois, adicione as constantes abaixo. Essas constantes representam o token de acesso que será criado para o usuário, a permissão ao vídeo que será anexada a esse token e o tempo máximo que a sessão de um participante em uma sala de chamada de vídeo pode durar:

const AccessToken = twilio.jwt.AccessToken;
const VideoGrant = AccessToken.VideoGrant;

// Maximum number of seconds that a participant's video room session can last (4 hours)
const MAXIMUM_SESSION_DURATION = 14400;

Agora, crie a rota que irá gerar seu token de acesso:

/**
 * Get a token for a user for a video room
 */
authRouter.post('/token', async (request, response, next) => {
  // Implementation forthcoming!
});

Dentro da sua nova rota, escreva algum código para pegar o identificador exclusivo do usuário (UserId) e da sala de chamada de vídeo (roomSid) da solicitação recebida da API:

  // Get the userId and roomName from the request.
  const userId: string  = request.body.userId;
  const roomSid: string = request.body.roomSid;

Fique atento, pois variáveis de ambiente podem estar ausentes. Isso não pode acontecer, mas, por via das dúvidas, é bom lidar com situações como essa. Se uma variável de ambiente estiver ausente, retorne uma resposta de erro antecipadamente, informando o lado do cliente de que o servidor não conseguiu gerar um token de acesso:

  // Handle case where environment variables could be missing.
  if (!config.TWILIO_ACCOUNT_SID || !config.TWILIO_API_KEY || !config.TWILIO_API_SECRET) {
    return response.status(400).send({
      message: 'Unable to create access token'
    });
  }

Em seguida, adicione o seguinte código para criar um novo AccessToken, associe-o ao usuário e conceda acesso à sala de chamada de vídeo específica cujo roomSid foi passado para a solicitação da API:

  // Create an access token.
  const token = new AccessToken(
    config.TWILIO_ACCOUNT_SID,
    config.TWILIO_API_KEY,
    config.TWILIO_API_SECRET,
    { ttl: MAXIMUM_SESSION_DURATION }
  );

  // Associate this token with the user from the request.
  token.identity = userId;

  // Grant the access token Twilio Video capabilities.
  const grant = new VideoGrant({ room: roomSid });
  token.addGrant(grant);

Retorne o token de acesso ao cliente na resposta do JSON:

  // Serialize the token to a JWT and include it in the JSON response.
  return response.status(200).send({
    userId: userId,
    roomSid: roomSid,
    token: token.toJwt(),
  });

A rota concluída deve ser semelhante ao código abaixo:

/**
 * Get a token for a user for a video room
 */
authRouter.post('/token', async (request, response, next) => {

  // Get the userId and roomName from the request
  const userId: string  = request.body.userId;
  const roomSid: string = request.body.roomSid;

  // Handle case where environment variables could be missing.
  if (!config.TWILIO_ACCOUNT_SID || !config.TWILIO_API_KEY || !config.TWILIO_API_SECRET) {
    return response.status(400).send({
      message: 'Unable to create access token'
    });
  }

  // Create an access token.
  const token = new AccessToken(
    config.TWILIO_ACCOUNT_SID,
    config.TWILIO_API_KEY,
    config.TWILIO_API_SECRET,
    { ttl: MAXIMUM_SESSION_DURATION }
  );

  // Associate this token with the user from the request.
  token.identity = userId;

  // Grant the access token Twilio Video capabilities.
  const grant = new VideoGrant({ room: roomSid });
  token.addGrant(grant);

  // Serialize the token to a JWT and include it in the JSON response.
  return response.status(200).send({
    userId: userId,
    roomSid: roomSid,
    token: token.toJwt(),
  });
});

Por fim, exporte o authRouter para que ele possa ser usado por outras partes do seu servidor:

  export default authRouter;

Seu roteador de autenticação está concluído!

Importar e testar seu roteador de autenticação

Abra o arquivo src/index.ts no seu editor de código. Importe o authRouter adicionando a seguinte linha logo abaixo das outras importações na parte superior do arquivo:

import authRouter from './routes/auth';

Em seguida, logo acima da linha roomsRouter, adicione o seguinte código, que permitirá que o servidor use este authRouter para todas as solicitações enviadas ao URI /auth:

// Forward requests for the /auth URI to our auth router
app.use('/auth', authRouter);

Legal! Você tem todo o código de que precisa. Está na hora de testar a recuperação de um token de acesso!

Para fazer o teste, tente gerar um token de acesso para um usuário chamado Beyoncé, que quer entrar em uma sala de chamada de vídeo no seu app e tem um roomSid de RM12345678901234567890123456789012.

Se você estiver usando o HTTPie, execute o seguinte comando no seu terminal:

http POST localhost:5000/auth/token userId="Beyoncé" roomSid="RM12345678901234567890123456789012"

Se estiver usando cURL, execute este comando:

curl -X POST localhost:5000/auth/token \
    -d '{"roomSid":"RM12345678901234567890123456789012", "userId":"Beyoncé"}' \
    -H "Content-Type: application/json"

Na resposta, você verá que um token de acesso foi criado e devolvido para você!

HTTP/1.1 200 OK
Connection: keep-alive
Content-Length: 470
Content-Type: application/json; charset=utf-8
Date: Tue, 30 Mar 2021 21:32:34 GMT
ETag: <ETag>
Keep-Alive: timeout=5
Vary: Origin
X-Powered-By: Express

{
    "roomSid": "RM12345678901234567890123456789012",
    "token": <ACCESS_TOKEN_HERE>,
    "userId": "Beyoncé"
}

Incrível!

Se você quiser ver o código deste tutorial na íntegra, confira no branch access-token-added deste repositório do GitHub.

O que criar em seguida com sua API de vídeo Express + TypeScript e o Programmable Video da Twilio

Sua API de vídeo agora pode fornecer tokens de acesso para seus usuários. Agora você está pronto para conectar essa API ao app no lado do cliente que preferir. Que tipo de app interessante você adicionará um vídeo? Um app de bate-papo talvez? Um app de compartilhamento de tela? Que tal usar o Twilio Functions para gerar seus tokens de acesso? O céu é o limite! ⭐️

Mal posso esperar para ver o que você criou!

Este artigo foi traduzido do original "Grant Video Access Tokens with Your Express + TypeScript Video API". Enquanto melhoramos nossos processos de tradução, adoraríamos receber seus comentários em help@twilio.com - contribuições valiosas podem render brindes da Twilio.

Publicações relacionadas

Recursos relacionados

Twilio Docs

De APIs a SDKs e aplicativos de amostra

Documentação de referência de API, SDKs, bibliotecas auxiliares, guias de início rápido e tutoriais para sua linguagem e plataforma.

Centro de Recursos

Os mais recentes e-books, relatórios do setor e webinars

Aprenda com especialistas em engajamento do cliente para melhorar sua própria comunicação.

Ahoy

Centro da comunidade de desenvolvedores da Twilio

Melhores práticas, exemplos de código e inspiração para criar comunicações e experiências de engajamento digital.