Registro social no SPA (Angular 2) com API REST do ASP.NET Core

9

Eu implementei o aplicativo simples Angular 2, que usa o ASP.NET Core WebApi como backend. Para autenticação, adicionei a rota '/ login' que gera tokens de acesso e atualização do JWT que, por sua vez, são armazenados pelo SPA no localStorage e usados em solicitações HTTP.

Agora quero integrar a função de registro social para que os usuários possam fazer o login usando o botão do Facebook. Do ponto de vista dos usuários, quero realizá-lo em três etapas:

  1. Clique no botão Registrar pelo Facebook e redirecionado para o site do Facebook (para fazer login e confirmar minha solicitação de aplicativo).
  2. Clicado confirmar e redirecionado para o meu SPA onde / página de inscrição, onde seu nome já foi preenchido no perfil do Facebook
  3. Preenche os campos restantes (como seu brinquedo favorito) e clica em "Concluir registro"

Após esse cadastro, se o usuário clicar novamente no facebook, ele será redirecionado para o facebook (se ele já estiver logado) ele automaticamente redirecionado para a rota do servidor que verifica se esse usuário já foi registrado e se ele é redirecionado para Página do SPA

Como integrar corretamente esse fluxo de trabalho ao meu aplicativo? Nota: Eu quero realizar autenticação e registro dentro do meu aplicativo Angular2, não em diferentes servidores de autenticação.

    
por Rem 01.10.2016 в 21:53
fonte

2 respostas

5
  

Eu quero realizar autenticação e registro dentro do meu aplicativo Angular2.

O que você está procurando é o Auxílio Implícito , com o Facebook como servidor de autorização e como o servidor de recursos. A concessão implícita suporta autorização para aplicativos de página única (como seu aplicativo Angular2) e a API de gráficos do Facebook suporta solicitações de informações do usuário.

  

Como integrar corretamente esse fluxo de trabalho no meu aplicativo?

Como o Facebook não suporta o OpenID Connect , você precisará usar a pseudo-autenticação do OAuth2 (que tem armadilhas para evitar). Isso envolverá um processo de quatro etapas:

  1. redirecionar o usuário para o Facebook para login,
  2. valide o redirecionamento de volta da página de login do Facebook e armazene o token de acesso,
  3. ligue para a Graph API do Facebook para solicitar informações do usuário para o token de acesso associado e
  4. use essas informações do usuário para preencher os campos no seu aplicativo.

A chamada da API na etapa três pode ser algo assim:

FB.api('/me', (user) => { 
    console.log(user.id); // 101540562372987329832845483
    console.log(user.email); // example@example.com
    console.log(user.first_name); // Bob
});

/me é um endpoint especial da Graph API que " traduz o user_id da pessoa cujo O token de acesso está sendo usado para fazer as chamadas da API. "O endpoint retorna informações relacionadas ao usuário.

Seu aplicativo pode usar essas informações do usuário do Facebook para preencher seus campos do lado do cliente e / ou seu banco de dados do lado do servidor. O id é exclusivo do seu aplicativo e NÃO é equivalente ao Facebook user_id ; o id é uma maneira razoável de identificar de forma exclusiva os usuários do seu aplicativo.

Quatro opções para integrar corretamente esse fluxo ao seu aplicativo.

Além disso: O que você quer dizer com a pseudo-autenticação do OAuth2?

OAuth2 é um esquema de pseudo-autenticação, porque OAuth2 NÃO é um protocolo de autenticação. Ou seja, depois que o usuário fizer login , seu aplicativo cliente recebe um token de acesso, que ele usa para fazer uma solicitação de uma API protegida. Para evitar as armadilhas, é bom estar ciente delas:

  1. Os tokens de acesso NÃO são prova de autenticação.
  2. O acesso a uma API protegida NÃO é uma prova de autenticação.
  3. Os atacantes podem injetar tokens de acesso.
  4. Os tokens de acesso NÃO têm uma restrição de público.
  5. Os invasores podem inserir informações inválidas do usuário.
  6. Cada provedor de identidade pode ter seu próprio protocolo de identidade.
por Shaun Luttin 10.10.2016 / 17:28
fonte
-3

Eu simplesmente sugeriria este tut em auth0 + A2.

    
por Jon 09.10.2016 / 01:07
fonte