[MÚSICA]
Agora que entendemos a necessidade de autenticação básica em nosso
aplicativo Express, vamos prosseguir para o exercício em que adicionaremos
a autenticação básica ao servidor ConFusion que temos vindo a desenvolver até agora,
o servidor de API REST Express.
Ao longo do caminho,
aprenderemos como podemos usar a autenticação básica dentro do nosso servidor.
E, em exercícios subsequentes, expandiremos essa ideia ainda mais
para adicionar um serviço de autenticação completo para o nosso servidor Express REST API.
Neste exercício, vamos para o servidor ConFusion,
o que temos trabalhado até agora.
Então você deve ter completado a implementação da segunda tarefa até
agora, onde você teria desenvolvido as promoções e o modelo de líderes.
E também atualizou as rotas para o roteador líder e
o roteador promocional em seu aplicativo de servidor ConFusion.
Então, dentro deste código, vamos para app.js e,
em seguida, adicionar a autenticação básica em app.js.
Então, em app.js como temos entendido sobre a forma como
o meio caminho ele funciona na aplicação Express.
Então começamos aqui no app.js
importando todos os vários módulos de nó aqui.
E depois disso, começamos aqui primeiro dizendo app.use logger dev.
Então, tudo isso vai ser aplicado à nossa aplicação.
E então, esta chamada aqui app.use (express.static)
é o que nos permite servir dados estáticos da pasta pública.
Agora, eles querem fazer a autenticação antes de
permitirmos que o cliente seja capaz de buscar dados do nosso servidor.
Então, ali mesmo, vamos entrar e adicionar um emblema de autenticação.
Então você percebe que tudo o que vem depois disso,
todo o middleware que é montado e vem depois deste ponto em particular.
Teremos que passar pela fase de autorização antes
que o middleware possa ser acessado.
Então, bem ali, eu vou adicionar em app.use e, em
seguida, adicionar uma função chamada auth, que eu vou implementar agora.
Então, fazendo isso, o que estamos especificando é o padrão,
o cliente pode acessar qualquer um desses recursos,
seja seus recursos estáticos na pasta pública, ou qualquer um dos recursos
, pratos, promoções ou líderes, ou até mesmo usuários como veremos mais tarde.
O cliente tem que ser autorizado primeiro.
Então, bem ali, vamos adicionar no auth.
Então deixe-me adicionar na função aqui chamada auth bem ali.
E, em seguida, usá-lo imediatamente dentro do nosso
aplicativo Express como o middleware lá.
Então esta função, auth vai levar em três parâmetros,
o objeto request, o objeto de recurso, e o próximo objeto, sim.
Então, dentro desta função deixe-me primeiro,
apenas para saber o que está contido no cabeçalho do pedido.
Deixe-me apenas registrar os cabeçalhos de solicitação ali apenas para demonstrar a você,
porque uma vez que você adicionar o cabeçalho de autorização,
então nós queremos ser capazes de vê-lo bem ali.
Então vamos primeiro fazer um log de console,
apenas para ver o que está vindo do lado do cliente.
Em seguida, deixe-me obter o
cabeçalho de autorização dizendo
req.headers .authorization.
Então, este é o lugar onde vamos obter o cabeçalho de autorização que é adicionado no
lado do nosso cliente.
Se não existe, obviamente, então temos de agir em conformidade.
Então, se, O AuthHeader é nulo, o
que significa que não há nenhum cabeçalho de autenticação em nossa
solicitação de entrada, então, obviamente, nosso cliente não incluiu o nome de usuário e
senha no cabeçalho de autenticação.
Por isso, precisamos desafiar o nosso cliente a fornecer esta informação.
Então, se o cabeçalho de autorização é nulo, então vamos ver,
var err novo erro,
então não vamos permitir que a nossa solicitação de cliente para ir além deste ponto.
Então vamos dizer, você não está autenticado,
e então vamos desafiar o cliente lá.
Então vamos dizer Res.SetHeader, então
vamos definir o cabeçalho na
mensagem de resposta dizendo WWW-Authenticate,
e da palestra anterior,
você verá por que estamos
colocando isso no cabeçalho de resposta.
E então vamos dizer err status.401.
401 é acesso não autorizado.
E, em seguida, vamos simplesmente gerar a nossa chamada seguinte com o cabeçalho.
Então isso significa que ele vai pular sobre tudo isso e ir para o manipulador de erros,
onde o manipulador de erros irá construir a mensagem de resposta e
enviar de volta para o meu cliente lá.
Então, se o cliente não incluiu o cabeçalho de autenticação ou
o cabeçalho de autorização, então eu vou desafiar o cliente a
pedir-lhe para me fornecer o cabeçalho de autorização lá.
Então, se não, então eu sei que o cabeçalho de autorização existe.
Então, além deste ponto, vamos dizer var auth,
e eu vou extrair o cabeçalho de autorização.
E, em seguida, uma vez que o AuthHeader é uma string,
eu vou dividir
esse valor e este cabeçalho de autorização, eu vou dividir o valor.
Então, como você pode ver, o buffer permite dividir o valor e
, em seguida, nós também dar a codificação do buffer que é codificação Base64 aqui.
Então vamos converter isso em um buffer dividindo isso em duas partes,
usando o espaço como a parte de divisão.
Então, quando você olhou para o cabeçalho de autorização, você viu por que o espaço
separa o valor dizendo básico, e então ele lhe dá o resto da
string codificada Base64 que contém o nome de usuário e senha.
E a partir disso, queremos extrair o nome de usuário e a senha.
Então nós vamos dividir esse valor, e então nós só vamos considerar Então
quando você dividir a string usando isso, ele vai dividir isso em uma matriz.
E o primeiro elemento da matriz contém Básico.
O segundo elemento da matriz é onde esta string codificada base64 existe.
Então é por isso que estamos apenas olhando para o segundo elemento desta matriz.
Portanto, esta divisão fará com que a string se divida em uma matriz de dois itens.
Então nós poderíamos, nós estamos pegando a string codificada base64 a partir disso.
E então nós entramos neste Buffer, e então nós vamos converter isso para string.
E, novamente, dividir a string mais uma vez porque a string
em si conterá o nome de usuário e a senha separados por dois pontos.
Então, eu vou dividi-lo usando os dois pontos como
o ponto de divisão para esta string aqui.
Então note que eu estou carregando duas divisões aqui, uma no espaço e
a segunda, usando os dois pontos que separa o nome de usuário e senha.
Assim, no final desta variável auth deve ser uma matriz contendo dois itens,
o nome de usuário e a senha que é extraída da string base64.
Então, neste ponto, o que eu vou fazer é,
apenas para sua clareza,
eu vou simplesmente dizer var
username = auth [0] e, em seguida,
var password = auth [1].
Então agora eu extraí o nome de usuário e senha do meu cabeçalho de autorização.
Agora vou usar um valor padrão para o nome de usuário e
senha nesta implementação.
Mais tarde, veremos que podemos permitir que os usuários criem seu próprio nome de usuário e
senha.
Mas por enquanto, vou usar o nome de
usuário codificado e a senha como administrador.
E a senha será apenas senha.
Para este exercício básico,
vamos usar isso como nome de usuário e senha padrão.
Se o nome de usuário que obtenho for admin e a senha for a senha da string.
Então eu estou tudo bem para permitir que o
pedido do cliente será passado através do próximo middleware assim, Eu vou dizer seguinte.
Então, quando eu digo a seguir, isso significa que a partir da autenticação
sua solicitação será passada no próximo conjunto de middleware aqui e
, em seguida, Express tentará corresponder a solicitação específica para eram
middleware específico que servirá essa solicitação.
Então é aqui que vamos permitir que ele passe.
Caso contrário, isso significa que o nome de usuário e
senha não corresponderam à solicitação,
ao nome de usuário e senha padrão que estou configurando.
Então isso significa que há um erro.
Então, neste caso, eu vou novamente causar um erro aqui,
então vamos dizer outra coisa, Erro.
Então vamos novamente gerar um erro e,
em seguida, desafiar o cliente a enviar as informações de autorização corretas, o nome de usuário e senha aqui.
Então é isso.
Este pouco de middleware que acabamos de implementar aqui,
middleware de autorização que acabamos de implementar aqui.
É suficiente o suficiente para implementar a autenticação básica dentro do aplicativo fora.
Então, tendo feito essas alterações,
vamos salvar as alterações e, em seguida, veremos como isso realmente funciona na prática.
Vamos salvar as alterações.
E então vamos começar o nosso servidor.
Agora, indo para o terminal, é claro,
certifique-se de que você está MongoDB servidor está funcionando.
Caso contrário, o servidor Express não inicializará.
Então eu tenho o tipo de prompt npm start e,
em seguida, seu servidor Express estará ativo e em execução.
Agora, abra na janela anônima em seu navegador.
A razão pela qual eu estou pedindo que você use uma janela anônima é que quando você digitar
o nome de usuário e senha, em seguida, ele será armazenado em cache pelo seu navegador.
Então, se você usar uma janela anônima, se você reiniciar o navegador...
Em seguida, o cache será limpo automaticamente,
então essa informação não será lembrada.
Agora, o que acontece se você digitar o nome de usuário e senha, ele será armazenado em cache,
então, posteriormente, quando você tentar acessar o servidor, as informações em cache
serão enviadas automaticamente na solicitação que você gerar.
É por isso que é importante
usar uma janela anônima apenas para mostrar que a autenticação básica funciona.
Então, na barra de endereço do seu navegador vamos digitar localhost:3000, e ver o que acontece.
Então, quando você digita localhost:3000 você vê imediatamente que seu navegador aparece
esta caixa de diálogo no topo pedindo que você digite o nome de usuário e a senha.
Se você não digitar, deixe-me digitar um nome de usuário aleatório e ver o que acontece.
Então, se eu digitar um nome de usuário e senha aleatórios,
então você verá que a solicitação é rejeitada.
Não tenho permissão para acessar o servidor e,
em seguida, se o servidor vai dizer novamente que o cliente não está autorizado.
E assim ele voltará e nos desafiará novamente para a autenticação correta.
Então deixe-me digitar a autenticação atual.
Então deixe-me digitar admin e a senha como senha.
E, em seguida, faça login, e você verá que agora o
aplicativo Express permitirá que você entre e acesse o valor padrão,
que neste caso é o arquivo Index.html dessa pasta pública estática.
Agora, a mesma coisa se você está tentando acessar localhost: pratos
sem a autorização, então não vai funcionar.
E vou demonstrar isso para você usando o carteiro em um minuto.
Agora, tendo visto como a autenticação funciona, vamos
ver o que aconteceu no console em nosso site do servidor.
Indo para o console em nosso site do servidor, você vê que um monte de informações
foram impressas aqui, então, como você viu,
nós estávamos desconectando os cabeçalhos de solicitação aqui.
Então, esta é a primeira solicitação que veio com o cabeçalho da solicitação.
E aqui você vê que não há cabeçalho de autorização na solicitação.
E assim o seu servidor rejeitou isso com um 401 pedindo ao nosso cliente para se autorizar.
A segunda vez também desde que não digitamos a autorização correta que o
servidor rejeitou.
É claro que agora você percebe que no cabeçalho, bem ali, a autorização é
realmente incluída lá, e você vê a forma como a autorização está incluída.
Ele diz Básico separado por um espaço, e
separado pela string codificada de 64 bits que contém o nome de usuário e senha.
E então, vemos que o servidor
rejeitou isso porque a autorização estava errada naquele momento.
Agora, mais tarde, digitamos o nome de usuário e a senha corretos.
Então, na terceira solicitação que chegou, digitamos o nome de usuário e a
senha corretos.
Então, é por isso que você vê que o cabeçalho da solicitação contém a autorização,
e essa string usa a codificação correta do nome de usuário e senha.
Como é que eu sei disso?
Bem, eu cruzei e sei que,
essa é a versão básica codificada estrangeira da string lá.
Nós também veremos isso da nossa imagem de carteiro ou o quê.
Agora, então, você vê que a solicitação foi aceita e
retornou o valor corretamente.
E então, claro, posteriormente, o cliente solicitou um favicon, o ícone.
E como não temos o favicon no lado do servidor, ele responde com o 404 e,
claro, seu ícone favorito não é exibido na barra de endereços.
Então, tudo bem, mas note em particular.
Os pedidos específicos entraram,
onde o cabeçalho de autorização correto foi incluído.
E assim, foi bem sucedido na época.
Vamos tentar e ver como podemos fazer a mesma coisa com postmap.
Aqui tenho a janela do mapa postal aberta.
E assim, na minha janela Postman eu vou digitar em
um get to localhost: para o meu servidor, e, em seguida, enviar o pedido e
você vai notar imediatamente que ele desafia dizendo 401 não autorizado.
Então esta é a mensagem de resposta do lado do servidor,
então observe o que ele salva, 401 Não autorizado.
E diz que a resposta deve incluir um campo de cabeçalho WWW-Authenticate.
E isso desafiará o cliente a enviar as informações de autorização,
o nome de usuário e a senha.
Então, visualizando isso, vemos que a frase que você não está autenticado e
, em seguida, o código 401 aqui.
Agora olhando para os cabeçalhos da mensagem de resposta.
Quando você olha para o cabeçalho da mensagem de resposta, você pode ver em particular
este cabeçalho incluído lá, que é www.authenticatebasic.
Agora, como fazemos autenticação ou autorização no post?
Então é aqui que eles iriam para isto logo abaixo desta caixa aqui,
você verá esta autorização aqui.
E quando você clica na autorização, agora ele diz NÃO AUTH..
Vamos usar a autenticação básica.
Então, quando eu digo autenticação básica, ele vai
me dar esses dois campos aqui onde eu posso digitar o nome de usuário e senha.
Deixe-me digitar o nome de usuário e senha corretos.
Então eu vou dizer nome de usuário admin, senha é senha P-A-S-S-W-O-R-D.
Então você pode ver que, essa é exatamente a senha que temos aqui.
Assim que você digitar o nome de usuário e a senha, eles dirão Solicitação de Atualização.
Então, quando eu clicar em Atualizar solicitação, você veria que imediatamente no cabeçalho,
você verá que
há este campo aqui que foi adicionado aqui dizendo autorização.
E então, você verá o que esta segunda parte, o valor que você pode tomar.
Ele diz básico e um espaço, e então esta cadeia particular.
Então, se você marcar esta string particular aqui, esta será a
string exata que você verá no cabeçalho da mensagem de solicitação bem-sucedida.
Observe o que esta string diz.
Diz YWR alguma coisa, e depois termina com um Q igual a.
Indo para o nosso terminal, você vê que a solicitação bem-sucedida
realmente continha exatamente essa string aqui.
Diz YWR e, em seguida, terminando com Q igual a lá.
Então, digitando as informações na autorização e clicando
na solicitação de atualização, essas informações são adicionadas aos cabeçalhos de autorização.
Então agora este é um pedido get,
eu não preciso do tipo de conteúdo lá porque ele não contém nenhum corpo.
Então, agora que a autorização foi incluída,
vamos enviar a solicitação agora corretamente e,
em seguida, você verá que a resposta vinda do site do servidor irá conter o arquivo de índice como você espera.
Agora, deixe-me apagar a autorização.
Agora esta é a razão pela qual Postmap me ajuda a verificar essas coisas muito mais
facilmente, eu posso excluir a autorização e, em seguida, enviar o pedido.
E ainda conterá essa autorização,
porque digitei isso no campo de autorização.
Então deixe-me limpar a autorização a partir daí, e então enviar o pedido aqui.
E aí diz que você não está autenticado.
Da mesma forma, se eu enviar o pedido para os pratos.
Anteriormente, isso funcionava bem, mas
agora você vê que estamos impedidos de acessar o endpoint /meals também.
E a mesma coisa com todos os outros endpoints APR resto também.
Você não terá permissão para acessar, porque o middleware de autorização vem antes de
você obter acesso a qualquer um desses endpoints
na lista de middleware para seu servidor expresso.
Então, agora, se eu incluir a autorização,
e depois atualizar minha solicitação e enviar a solicitação para o servidor,
então o servidor responderá.
Agora, obviamente, neste momento meu banco de dados está vazio, então
ele está respondendo com um array vazio lá.
Mas agora o pedido foi feito com sucesso, e
eu sou capaz de recuperar a informação da meia do servidor.
Portanto, esta é uma demonstração rápida de
autorização básica em nosso aplicativo APR descanso expresso.
Com isso, completamos este exercício.
Este é um bom momento
para você fazer um comentário get com a mensagem de autenticação básica.
[ MUSIC]