in ASP.NET

OAuth com ASP.NET MVC 4 [Facebook, Twitter e Google]

Integrar a autenticação de nossas aplicações com os diversos providers (Facebook, Twitter, Google, Microsoft, etc) nos traz diversos benefícios, como o aumento nos cadastros, o aumento do engajamento de nossos usuários e a melhoria na experiência do usuário, entre outros.

O novo template (Internet aplication) do ASP.NET MVC4 traz configurado todo um mecanismo de OAuth/OpenId (DotNetOpenAuth) integrado com o Membership, o que nos facilita a integração da autenticação de nossas aplicações com os diversos providers de OAuth.

Começando

Para começar vamos criar um projeto ASP.NET MVC4 Web Application

Após esse passo, nós selecionaremos o template Internet Application

Com o projeto criado, é possível ver dentro do metodo Application_Start  no Global.asax.cs a chamada para a classe responsável por registrar as configurações de autenticação ( AuthConfig.RegisterAuth() ):

public class MvcApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        AreaRegistration.RegisterAllAreas();

        WebApiConfig.Register(GlobalConfiguration.Configuration);
        FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
        RouteConfig.RegisterRoutes(RouteTable.Routes);
        BundleConfig.RegisterBundles(BundleTable.Bundles);
        AuthConfig.RegisterAuth();
    }
}

Essa classe fica dentro de uma pasta no projeto chamada App_Start

Nesta classe (AuthConfig) é possível ver os métodos prontos e comentados para registrar cada provider:

public static class AuthConfig
{
    public static void RegisterAuth()
    {
        // To let users of this site log in using their accounts from other sites such as Microsoft, Facebook, and Twitter,
        // you must update this site. For more information visit http://go.microsoft.com/fwlink/?LinkID=252166

        //OAuthWebSecurity.RegisterMicrosoftClient(
        //    clientId: "",
        //    clientSecret: "");

        //OAuthWebSecurity.RegisterTwitterClient(
        //    consumerKey: "",
        //    consumerSecret: "");

        //OAuthWebSecurity.RegisterFacebookClient(
        //    appId: "",
        //    appSecret: "");

        //OAuthWebSecurity.RegisterGoogleClient();
    }
}

Para utilizar, é só retirar o comentário, e, se necessário, configurar com as chaves de cada aplicativo no serviço de autenticação que usaremos.

Facebook

O primeiro aplicativo que criaremos é o do Facebook, para isso, vamos até a o https://developers.facebook.com/ e vamos criar um aplicativo:

Após termos criado o aplicativo, precisamos configurar o domínio e o endereço do website que utilizaremos para fazer o login.

Alem disso, para configurar em nosso projeto ASP.NET MVC será necessário o App ID e o App Secret:

 

Com posse dessas informações, vamos configura-la no AuthConfig:

public static class AuthConfig
{
    public static void RegisterAuth()
    {
        // To let users of this site log in using their accounts from other sites such as Microsoft, Facebook, and Twitter,
        // you must update this site. For more information visit http://go.microsoft.com/fwlink/?LinkID=252166

        //OAuthWebSecurity.RegisterMicrosoftClient(
        //    clientId: "",
        //    clientSecret: "");

        //OAuthWebSecurity.RegisterTwitterClient(
        //    consumerKey: "",
        //    consumerSecret: "");

        OAuthWebSecurity.RegisterFacebookClient(
            appId: "472262916158151",
            appSecret: "fc38e066d2cfc123356cbf6792170809");

        //OAuthWebSecurity.RegisterGoogleClient();
    }
}

Após isso, ao executar nossa aplicação já é possível ver a opção para logar utilizando o serviço do Facebook

Quado o usuário seleciona esta opção, o aplicativo redireciona o usuário para uma pagina de autorização no Facebook:

Na qual ele permite o acesso aos dados da conta do Facebook e redireciona para nossa aplicação, que registra aquele usuário com o token de autenticação do Facebook.

Após isso, é possível ver o usuário autenticado em nossa aplicação, na proxima vez, ele será autenticado diretamente após clicar na opção logar com o Facebook.

Espero que este post seja útil,

estou a disposição para dúvidas, criticas e sugestões.

Muito obrigado

Rodolfo

  • Jackson

    outro teste

  • João Lourenço

    Com o facebook e o twitter é bem simples. Mas, com o google não é.
    Tens como mostrar um passo-a-passo do Google?
    Abraço

  • Lucas Teixeira

    Como pegar permissoes de scope para o facebook com MVC 4 e pegar o token do cliente para armazenar em userprofile.