Porquê implementar o OAuth em um aplicativo expresso usando o GitHub

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, agendas, etc. hospedados em outros aplicativos da web, uma vez que 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 uma vez que 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 uma vez que 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 portanto trocar o código recebido por um token de aproximação que pode ser usado para acessar os dados do usuário disponíveis.

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

Lanço 1: Configurando o envolvente 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

Oriente comando cria um pacote.json registro que contém detalhes sobre seu projeto uma vez que o nome, versão, etc.

Oriente tutorial apresentará o uso do sistema de módulos ES6. Configure isso abrindo seu pacote.json registro e especificando “tipo”: “módulo” no objeto JSON.

Lanço 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 geração do seu servidor.
Axios: Axios é um cliente HTTP fundamentado em promessa. Você precisará deste pacote para fazer uma solicitação POST para um token de aproximação ao GitHub.
dotenv: dotenv é um pacote que carrega variáveis de envolvente de um registro .env no objeto process.env. Você precisará dele para ocultar informações importantes sobre seu aplicativo.

Instale-os executando:

npm install express axios dotenv

Lanço 3: criando um aplicativo expresso

Você precisa gerar um servidor Express imprescindível para mourejar e fazer solicitações ao provedor OAuth.

Primeiro, crie um índice.js registro no diretório raiz do seu projeto contendo o seguinte:


import express from "express";
import axios from "axios";
import * as dotenv from "dotenv";
dotenv.config();const app = express();
const port = process.env.PORT || 3000
app.listen(port, () => {
console.log(`App is running on port ${port}`);
});

Oriente código importa a livraria expressa, instancia uma instância expressa e começa a escutar o tráfico na porta 3000.

Lanço 4: criando manipuladores de rota

Você precisará gerar dois manipuladores de rota para mourejar 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 aproximação quando um usuário autoriza seu aplicativo.

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

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 aproximação que um aplicativo OAuth tem às informações de um usuário. Você pode encontrar uma lista de escopos disponíveis na documentação do OAuth do GitHub. Cá você estará usando um “leia: usuário”, que concede aproximação para ler os dados do perfil de um usuário.

Adicione o seguinte código ao seu índice.js Registro:


app.get("/auth", (req, res) => {
const params = {
scope: "read:user",
client_id: process.env.CLIENT_ID,
};
const urlEncodedParams = new URLSearchParams(params).toString();
res.redirect(`https://github.com/login/oauth/authorize?${urlEncodedParams}`);
});

Oriente 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 índice.js registro para o segundo manipulador de rota:


app.get("/github-callback", (req, res) => {
const { code } = req.query;const body = {
client_id: process.env.CLIENT_ID,
client_secret: process.env.CLIENT_SECRET,
code,
};
let accessToken;
const options = { headers: { accept: "application/json" } };
axios
.post("https://github.com/login/oauth/access_token", body, options)
.then((response) => response.data.access_token)
.then((token) => {
accessToken = token;
res.redirect(`/?token=${token}`);
})
.catch((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 uma solicitação POST usando Axios para “https://github.com/login/oauth/access_token” com o código, ID do Clientee client_secret.

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

Lanço 5: criando um aplicativo GitHub

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

Primeiro, faça login na sua conta do GitHub e vá para Definiçõesrole para inferior até Configurações do desenvolvedore selecione Aplicativos OAuth. Por término, clique em “Registrar um novo aplicativo.”

O GitHub fornecerá um novo formulário de letreiro OAuth uma vez que nascente:

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

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

Por término, 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 Clientegere seu client_secrete copie-o também.

Crie um registro .env e armazene o ID do Cliente e client_secret dentro dele. Nomeie essas variáveis uma vez que CLIENT_ID e CLIENT_SECRET respectivamente.

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

A relevância do OAuth 2.0

Usar o OAuth 2.0 em seu aplicativo simplifica muito 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.