Logins sociais com Angular 2 e WebAPI - .net, angular, oauth, asp.net-core

Estou tentando pesquisar como obter logins sociais de forma eficiente para trabalhar junto com o Angular 2 com uma solução .NET Core WebAPI.

No momento, estou interessado apenas no googlefaça o login e, pelo que entendi, ele usa o OAuth. Pelo que vejo depois de pesquisar on-line, preciso usar o pacote "angular2-jwt" para manipular o JSON Token. Precisarei usar o IdentityServer para lidar com os logins sociais no back-end?

Eu também estou em uma perda de como eu redirecionar o usuário para o google após o login e, em seguida, coletar os dados do Google retorna.

Eu encontrei alguns recursos mistos em logins sociais com angular 2, mas não consigo encontrar nada conciso que responda às minhas perguntas relacionadas ao .NET Core.

Como nota, no futuro eu provavelmente sereiintegrando mais logins sociais e uma página de registro regular para pessoas que não querem usar logins sociais, então eu quero encontrar uma solução que seja facilmente escalável para acomodar isso.

Respostas:

1 para resposta № 1

Existe um plugin simples e ótimo para o angular2-social-login https://www.npmjs.com/package/angular2-social-login com as opções de login do Google, Facebook e Linkedin.

Exemplo completo pode ser encontrado aqui https://github.com/heresy/angular2-social-login-example

Após a instalação, você só precisa fornecer API_KEYS para o seu domínio (no modo de desenvolvimento, provavelmente http://localhost:4200) Se você não fornecer a chave para uma rede social específica, precisará excluir o item apropriado na matriz de provedores. Caso contrário, você receberá um erro no console.

let providers = {
"google": {
"clientId": "GOOGLE_CLIENT_ID"
},
"linkedin": {
"clientId": "LINKEDIN_CLIENT_ID"
},
"facebook": {
"clientId": "FACEBOOK_CLIENT_ID",
"apiVersion": "<version>" //like v2.4
}
};

Conecte o botão do Google, Facebook ou Linkedin à função de assinatura.

<button (click)="signIn("google")">google</button>

Se as suas chaves de API forem válidas, uma nova janela seráaberto com o formulário de inscrição. Você não precisa se preocupar com o redirecionamento, o plugin lida com ele. Depois de entrar nome de usuário e senha válidos, o objeto de dados do usuário será retornado para a função signIn. Este objeto será contém campos como "nome", "email", "token", etc. No código abaixo, é apenas escrito no console.

    signIn(provider){
this.sub = this._auth.login(provider).subscribe(
(data) => {
console.log(data);
}
)
}

Agora, quando você tiver esses dados, poderá enviá-los ao seu back-end para registrar ou fazer login no usuário.

Você deseja usar o JWT com o ASP NET Web Api. Aqui você pode encontrar uma ótima solução para isso: https://github.com/cuongle/WebApi.Jwt

E para o aplicativo Angular, a melhor solução que usei até agora é: https://github.com/auth0/angular2-jwt

Então o processo seria:

1. Tente entrar com o Google, Facebook ou Linkedin
2. Se o login for bem sucedido, os dados do usuário serão recuperados
3. Enviar dados para sua API com a implementação do JWT, executar verificações e em seguida, envie o JWT de volta para o aplicativo Angular
4. Para todas as solicitações futuras, o plugin angular2-jwt usará esse token, enquanto é válido e não expirou.

---