OAuth 2.0 é um padrão que permite que aplicativos de terceiros acessem dados de aplicativos da Web com segurança. Você pode usá-lo para buscar dados, incluindo informações de perfil, horários, etc. que está hospedado em outros aplicativos da web como Facebook, Google e GitHub. Um serviço pode fazer isso em nome de um usuário sem expor suas credenciais ao aplicativo de terceiros.

Aprenda a implementar o OAuth em um aplicativo Express usando o GitHub como provedor OAuth em algumas etapas.

O fluxo OAuth

Em um fluxo típico de OAuth, seu site oferece uma opção para os usuários fazerem login com sua conta de terceiros de um provedor como GitHub ou Facebook. Um usuário pode iniciar esse processo clicando em um botão de login do OAuth relevante.

Isso os redireciona do seu aplicativo para o site do provedor OAuth e apresenta um formulário de consentimento. O formulário de consentimento contém todas as informações que você deseja acessar do usuário, que podem ser seus e-mails, fotos, horários, etc.

Se o usuário autorizar seu aplicativo, o terceiro irá redirecioná-lo de volta ao seu aplicativo com um código. Seu aplicativo pode então trocar o código recebido por um token de acesso que pode ser usado para acessar os dados do usuário disponíveis.

instagram viewer

A implementação desse fluxo em um aplicativo Express envolve algumas etapas.

Etapa 1: Configurando o ambiente de desenvolvimento

Primeiro, crie um diretório de projeto vazio e cd no diretório criado.

Por exemplo:

mkdir github-app
cd github-app

Em seguida, inicialize o npm em seu projeto executando:

npm init -y

Este comando cria um pacote.json arquivo que contém detalhes sobre seu projeto como o nome, versão, etc.

Este tutorial apresentará o uso do sistema de módulos ES6. Configure isso abrindo seu pacote.json arquivo e especificando "tipo": "módulo" no objeto JSON.

Etapa 2: instalando dependências

Você precisará instalar algumas dependências para que seu servidor funcione corretamente:

  • ExpressJS: ExpressJS é uma estrutura NodeJS que fornece um conjunto robusto de recursos para aplicativos da Web e móveis. O uso do Express simplificará o processo de criação do seu servidor.
  • Axios: Axios é um cliente HTTP baseado em promessa. Você precisará deste pacote para fazer uma solicitação POST para um token de acesso ao GitHub.
  • dotenv: dotenv é um pacote que carrega variáveis ​​de ambiente de um arquivo .env no objeto process.env. Você precisará dele para ocultar informações importantes sobre seu aplicativo.

Instale-os executando:

npm instalar expressar axios dotenv

Etapa 3: criando um aplicativo expresso

Você precisa criar um servidor Express básico para lidar e fazer solicitações ao provedor OAuth.

Primeiro, crie um index.js arquivo no diretório raiz do seu projeto contendo o seguinte:

// index.js
importar expressar a partir de "expressar";
importar axios a partir de "axios";
importar * Como dotenv a partir de "dotenv";
dotenv.config();
const aplicativo = expresso();
const porta = processo.env. PORTO || 3000
app.listen (porta, () => {
console.registro(`App está sendo executado na porta ${porta}`);
});

Este código importa a biblioteca expressa, instancia uma instância expressa e começa a escutar o tráfego na porta 3000.

Etapa 4: criando manipuladores de rota

Você precisará criar dois manipuladores de rota para lidar com o fluxo OAuth. O primeiro redireciona o usuário para o GitHub e solicita autorização. O segundo trata do redirecionamento de volta para seu aplicativo e faz a solicitação do token de acesso quando um usuário autoriza seu aplicativo.

O primeiro manipulador de rota deve redirecionar o usuário para https://github.com/login/oauth/authorize? parâmetros.

Você precisará passar um conjunto de parâmetros obrigatórios para a URL OAuth do GitHub, que inclui:

  • ID do cliente: refere-se ao ID que seu aplicativo OAuth recebe quando registrado no GitHub.
  • Escopo: refere-se a uma string que especifica a quantidade de acesso que um aplicativo OAuth tem às informações de um usuário. Você pode encontrar uma lista de escopos disponíveis em Documentação OAuth do GitHub. Aqui você estará usando um “leia: usuário”, que concede acesso para ler os dados do perfil de um usuário.

Adicione o seguinte código ao seu index.js Arquivo:

// index.js
app.get("/auth", (req, res) => {
// Armazena parâmetros em um objeto
const parametros = {
 alcance: "leia: usuário",
ID do Cliente: processo.env.ID DO CLIENTE,
 };
// Converte parâmetros em uma string codificada por URL
const urlEncodedParams = novo URLSearchParams(params).toString();
 res.redirect(` https://github.com/login/oauth/authorize?${urlEncodedParams}`);
});

Este código implementa o primeiro manipulador de rota. Ele armazena os parâmetros necessários em um objeto, convertendo-os em um formato codificado por URL usando a API URLSearchParams. Em seguida, ele adiciona esses parâmetros à URL OAuth do GitHub e redireciona o usuário para a página de consentimento do GitHub.

Adicione o seguinte código ao seu index.js arquivo para o segundo manipulador de rota:

// index.js
app.get("/github-callback", (req, res) => {
const { código } = req.query;
const corpo = {
ID do Cliente: processo.env.ID DO CLIENTE,
client_secret: processo.env.CLIENT_SECRET,
 código,
 };


deixar accessToken;
 opções const = { headers: { aceitar: "aplicativo/json" } };
axios
 .publicar("https://github.com/login/oauth/access_token", corpo, opções)
 .then((resposta) => response.data.access_token)
 .then((token) => {
 accessToken = token;
 res.redirect(`/?token=${token}`);
 })
 .truque((err) => res.status(500).json({ err: err.message }));
});

O segundo manipulador de rota extrairá o código retornado do GitHub no req.consulta objeto. Em seguida, ele faz um POST solicitar usando Axios para " https://github.com/login/oauth/access_token" com o código, ID do Cliente, e client_secret.

o client_secret é uma string privada que você gerará ao criar um aplicativo GitHub OAuth. Quando o access_token é buscado com sucesso, ele é salvo em uma variável para uso posterior. O usuário é finalmente redirecionado para seu aplicativo com o access_token.

Etapa 5: criando um aplicativo GitHub

Em seguida, você precisará criar um aplicativo OAuth no GitHub.

Primeiro, faça login na sua conta do GitHub e vá para Definições, role para baixo até Configurações do desenvolvedor, e selecione Aplicativos OAuth. Por fim, clique em “Registrar um novo aplicativo.”

O GitHub fornecerá um novo formulário de inscrição OAuth como este:

Preencha os campos obrigatórios com os dados desejados. O "URL da Página incial" deveria estar " http://localhost: 3000”. Sua "URL de retorno de autorização" deveria estar " http://localhost: 3000/github-callback”. Você também pode habilitar o fluxo de dispositivo opcionalmente, permitindo que você autorize usuários para um aplicativo headless, como uma ferramenta CLI ou gerenciador de credenciais Git.

O fluxo do dispositivo está em versão beta pública e está sujeito a alterações.

Por fim, acerte o Cadastrar aplicativo botão.

GitHub irá direcioná-lo para uma página com seu ID do Cliente e uma opção para gerar seu client_secret. Copie seu ID do Cliente, gere seu client_secret, e copie-o também.

Crie um arquivo .env e armazenar o ID do Cliente e client_secret dentro dele. Nomeie essas variáveis ​​como CLIENT_ID e CLIENT_SECRET respectivamente.

Seu fluxo OAuth está concluído e agora você pode fazer solicitações com o token de acesso para ler os dados do usuário (o alcance você especificou anteriormente).

A importância do OAuth 2.0

Usar o OAuth 2.0 em seu aplicativo simplifica bastante a tarefa de implementar um fluxo de autenticação. Ele protege os dados de usuários de seus clientes usando o padrão Secure Sockets Layer (SSL), garantindo que eles permaneçam privados.