Agora que
concluímos a implementação do servidor REST API usando Express e MongoDB neste curso,
o próximo pensamento imediato que pode ocorrer em sua mente é,
uma vez que já desenvolvemos os aplicativos cliente,
seja o aplicativo Angular, o aplicativo Ionic,
ou o Aplicativo de Script nativo nos cursos anteriores,
como integramos os dois juntos para que nosso aplicativo cliente seja capaz de
interagir com o servidor API REST completo que desenvolvemos neste curso?
Então, isto é o que vamos examinar nesta lição,
nesta palestra, e os dois exercícios que se seguem a esta palestra.
Então, ao final desta lição,
você terá um cliente Angular que poderemos nos
comunicar com o servidor que você acabou de desenvolver
neste curso e ser capaz de suportar
a visão completa do lado do cliente de toda a nossa aplicação.
Então, dessa forma, vamos ver que temos desenvolvido
o aplicativo completo de ponta a ponta do lado do cliente todo o caminho para o lado do servidor.
Uma abordagem semelhante também pode ser usada com
seu cliente Ionic ou com seu cliente de script nativo,
dado o fato de que ambos os scripts Ionic e Native foram
desenvolvidos com o mecanismo Angular nos bastidores.
Assim, realizar um conjunto semelhante de etapas deve ser capaz de fazer o seu cliente Ionic e também
seu cliente de script nativo se comunicar com o
servidor de API de descanso Express mais MongoDB que desenvolvemos neste curso.
Para integrar o cliente e o servidor,
como percebemos,
nosso servidor já está implementado para suportar a API REST completa.
Do lado do nosso cliente,
seja o cliente angular,
o cliente iônico ou o cliente de script nativo,
todos eles interagem com o servidor usando os endpoints da API REST.
Assim, quando o cliente envia a solicitação para o servidor no ponto final da API REST,
o servidor responderá com os dados JSON correspondentes de volta ao cliente,
e o cliente pode então fazer uso dos dados JSON para renderizar as exibições para o usuário.
Assim, dado este entendimento da comunicação entre o cliente e o servidor,
a integração deve ser bastante simples.
Mas, agora é claro,
quando desenvolvemos nosso cliente Angular ou Ionic ou NativeScript,
não fizemos a parte completa de autenticação do usuário,
porque não tínhamos isso em nosso servidor JSON.
Agora que temos a autenticação do usuário embutida em nosso lado do servidor,
precisamos atualizar nossos aplicativos cliente para
habilitá-los a fazer autenticação do usuário no lado do servidor,
postando as informações de login no servidor e, em seguida,
obtendo o token de autenticação do lado do servidor,
e, posteriormente, comunicando-se com o servidor, incluindo
o token de autenticação no cabeçalho das mensagens de solicitação.
Então, tudo isso significa que precisamos fazer
pequenos ajustes tanto para o cliente quanto para o servidor, para
que os dois possam se comunicar uns com os outros.
Um aspecto que eu não lidei no exercício anteriormente,
é como o servidor irá lidar com os parâmetros de consulta que vêm do lado do cliente.
Então, como percebemos,
quando o lado do cliente envia um pedido para
um prato em destaque ou um líder em destaque ou uma promoção de recurso,
vimos que o URL inclui pratos,
recurso de ponto de interrogação é igual a verdadeiro na
URL da solicitação que vem do lado do cliente.
Agora, nos dados do lado do servidor,
já vimos que o prato, a
promoção ou o líder,
inclui o sinalizador de recurso já nos dados JSON.
Então, quando esta solicitação vem para o lado do servidor,
em seguida, o servidor deve ser capaz de extrair este parâmetro de consulta a partir da solicitação de entrada
e, em seguida, fazer apropriadamente a consulta
do MongoDB e, em seguida, obter apenas os resultados onde este sinalizador de destaque é definido como true.
Então, para fazer isso como vimos,
o URL que é usado para enviar a solicitação para o servidor é /dish? feature=true.
Então, é assim que vamos fornecer os parâmetros de consulta para o nosso lado do servidor.
Agora, além disso, quando esta informação é recebida no lado do servidor,
agora, vimos que antes quando fizemos o pedido get no lado do servidor,
nós simplesmente disse pratos encontrar e, em seguida, iria encontrar todos os pratos e, em seguida, retorná-los
quando o pedido get é enviado para o DishRouterRoute/.
A mesma lógica se aplica tanto ao roteador promocional quanto ao roteador líder.
Agora, quando você inclui um parâmetro de consulta como esse na URL,
como nosso servidor será capaz de extrair esse parâmetro de consulta?
Então, é aqui que quando a solicitação de entrada tem
esse parâmetro de consulta anexado à URL de entrada,
o servidor express processará automaticamente isso e transformará isso em
um objeto JSON que é carregado em uma mensagem de solicitação que entra no lado do servidor.
Agora, isso está disponível no lado do servidor na forma de req.query.
Assim, quaisquer parâmetros de consulta que você incluir na URL,
serão transformados em objetos JSON correspondentes com as informações definidas como mostrado aqui,
e então carregados no objeto request no lado do servidor.
Então, usando req.query no lado do servidor,
seremos capazes de obter esses parâmetros de consulta.
Então, quando você executa uma solicitação get no lado do servidor,
você diz dishes.find e, em seguida, você incluir o req.query no achado lá.
Então, assim, quando o MongoDB é consultado, então,
apenas esses registros ou apenas aqueles documentos para os quais o destaque é definido como true serão
extraídos do MongoDB e fornecidos de volta para nós dentro deste método get aqui,
e então, pode ser retornado para o lado do cliente.
Então, isso é tão simples quanto isso em lidar com os parâmetros de consulta em nosso lado do servidor.
Então, esta atualização vamos fazer tanto para o roteador prato,
o roteador promocional e o roteador líder no nosso lado do servidor.
A próxima parte é, naturalmente, a autenticação do usuário.
Então, como percebemos no lado do servidor,
já temos esses endpoints da API REST,
que são úteis para autenticação do usuário.
Em particular, quando você faz uma postagem para /users/login,
com o nome de usuário e senha, então,
você será capaz de autenticar o usuário no lado do servidor.
Agora, quando o usuário é autenticado no lado do servidor com êxito,
a mensagem de resposta vinda do lado do servidor incluirá
o token da Web JSON no corpo da resposta da mensagem de resposta recebida do lado do servidor.
Então, no lado do cliente,
devemos ser capazes de extrair este token e, em seguida, usar este token posteriormente.
Assim, quando o cliente recebe a mensagem de resposta do
lado do servidor e o usuário é autenticado com êxito no lado do servidor,
a mensagem de resposta conterá o token da Web JSON,
que deve ser extraído, e depois disso,
o cliente deve incluir este token da Web JSON
no cabeçalho de autorização para cada solicitação de saída do lado do cliente.
Então, como lidamos com todo esse conjunto de operações?
Agora, é aqui que vamos implementar
outro serviço que será usado no lado do nosso cliente,
em nosso cliente Angular,
chamado de serviço de autenticação,
e é aí que vamos lidar com todo o login e as operações de logout.
Agora, o processo de logout é bastante simples, mas,
se destruirmos o token da Web JSON que temos no lado do cliente,
então o cliente não será mais capaz de acessar o servidor.
Então, é tão simples quanto destruir
o token da Web JSON no lado do cliente para fazer logout desse cliente.
Então, dado esse entendimento,
vamos ver as etapas que estão envolvidas em
fazer a autenticação do usuário e lidar com a autenticação do usuário no lado do cliente.
Então, para lidar com a autenticação do usuário no lado do cliente,
o cliente enviará uma solicitação de postagem para o endpoint /users/login,
e o corpo da solicitação de postagem conterá o nome de usuário e a senha.
Neste caso, estamos usando a autenticação de login.
Agora, para autenticação no Facebook novamente,
essa é uma configuração diferente que eu não vou discutir agora.
Mas, o corpo da solicitação como você verá para autenticação local,
conterá o nome de usuário e a senha.
Assim, quando o usuário é autenticado com êxito no lado do servidor,
o servidor responderá de volta
ao cliente, incluindo o token da Web JSON na mensagem de resposta.
Então, quando o cliente recebe a mensagem de resposta do lado do servidor,
o cliente terá que capturar esse token da Web JSON
e, em seguida, salvar o token da Web JSON no armazenamento local no lado do cliente.
Posteriormente, o cliente deve incluir este token em cada solicitação de saída.
Então, como isso é feito no lado do cliente?
Em primeiro lugar, é claro,
você precisa salvar o token da Web JSON de entrada no armazenamento local,
e isso é feito no serviço de autenticação que implementaremos no lado do cliente.
Agora, para cada solicitação de saída,
o cliente incluirá esse token no cabeçalho,
o cabeçalho de autorização da solicitação de saída.
Agora, como isso é feito?
Então, este é o lugar onde nós vamos pegar a ajuda de um interceptor HTTP,
que o HttpClient em Angular suporta.
Então, com o interceptor HTTP,
o interceptor nos permite interceptar
todas as mensagens de solicitação de saída ou até mesmo
interceptar todas as mensagens de resposta recebidas se você assim escolher.
Mas no aplicativo Angular,
vamos implementar o interceptor de solicitação,
que vou ilustrar no exercício mais tarde.
No interceptor de solicitação HTTP,
quando a mensagem de solicitação é interceptada,
cada mensagem de solicitação de saída será interceptada e, em seguida, o token da Web JSON
será inserido no cabeçalho de autorização da mensagem de solicitação.
Em seguida, a mensagem de solicitação seria passada para o lado do servidor.
Assim, cada solicitação de saída depois que o usuário é autenticado no lado do servidor,
cada solicitação de saída do lado do cliente carregará
o token da Web JSON no cabeçalho de autorização da solicitação de saída.
Agora, uma vez que o cliente logout,
o token da Web JSON será destruído no lado do cliente.
Então, depois disso, as solicitações de saída não conterão mais o token da Web JSON,
porque o token da Web JSON não existe no lado do cliente.
Então, assim, o usuário perde a autenticação.
Então, é assim que vamos lidar com o processo de login e logout no lado do cliente,
comunicando-se com o servidor
e, em seguida, obter o token da web JSON,
e, em seguida, incluindo o token da web JSON em cada solicitação de saída.
Agora, com essa compreensão de como o cliente e o servidor irão interagir,
vamos agora prosseguir para os próximos dois exercícios.
Primeiro, atualizaremos o lado do servidor com algumas adições,
para que ele possa se integrar bem com nosso site cliente.
Depois disso, vamos atualizar o lado do cliente ou melhor, eu vou dar-lhe
um aplicativo cliente de pleno direito que eu
tirei do curso Angular anterior e, em seguida, eu vou atualizá-lo, o
que também nos fornece a capacidade de usar interceptores HTTP
em ambos os pedidos de saída e no mensagens de resposta recebidas.
Então, vamos lidar com ambos nos próximos dois exercícios,
e no final, você vai entender como
integrar seu cliente e o lado do servidor.