Login Social com Facebook

Diversas vezes nos deparamos com a necessidade de adicionar um login social em nossos aplicativos móveis. Pensando nisso, o Microsoft Azure disponibiliza através do recurso de Mobile Services uma forma simples e rápida de integrar o seu aplicativo com as redes sociais Facebook, Twitter e Google nas plataformas Windows Phone, Android e iOS.

Nesse tutorial vamos mostrar como criar um app com login no Facebook.

Vamos aos passos:

  1. Acessar o site do Microsoft Azure pelo link https://manage.windowsazure.com
  2. No menu do lado esquerdo, acessar o recurso SERVIÇOS MÓVEIS (MOBILE SERVICES).
  3. Acessar o link CRIAR UM NOVO SERVIÇO MÓVEL.

    Criar novo serviço móvel
    Criar novo serviço móvel
  4. Na primeira parte vamos especificar as configurações básicas do serviço móvel.
  5. No campo URL, adicionar um nome que identifique o seu serviço móvel.
  6. No campo BANCO DE DADOS, escolher o Banco de Dados que irá utilizar. Podemos usar o Banco de Dados gratuito de 20 MB ou usar um já existente (só podemos ter um Banco de Dados gratuito por assinatura do Azure).
  7. No campo REGIÃO, especificar a Região onde o serviço será alocado. Dar preferência para uma região mais próxima da maioria dos clientes que irão acessar o serviço.
  8. Por fim no campo BACK-END, selecionar a linguagem que será utilizada, podendo ser .NET ou JavaScript. Para esse exemplo vamos selecionar .NET e avançar para a próxima tela.

    Criando novo serviço móvel
  9.  Na segunda parte de criação do serviço móvel é necessário fazer a configuração do banco de dados.
  10. No campo NOME, já é previamente preenchido com uma sugestão de nome de banco de dados, esse nome pode ser alterado se necessário.
  11. No campo SERVIDOR, selecione um banco de dados já existente ou crie um novo banco.
  12. No campo NOME DO LOGON DO SERVIDOR, digite um nome para o usuário do banco de dados e defina uma senha para o mesmo.
  13. A região do banco de dados segue o mesmo conceito do serviço móvel, dar preferência para uma região mais próxima da maioria dos clientes que irão acessar o serviço.

    Criando novo servidor de banco de dados
  14. Após a criação do serviço móvel acesse a aba “PAINEL” para visualizar as informações necessárias para conexão com Facebook (URL DO SERVIÇO MÓVEL)

    Serviços Móveis - Painel
    Serviços Móveis – Painel
  15. Próximo passo é criar aplicativo no Facebook para habilitar autenticação. Para isso devemos acessar https://developers.facebook.com/ e fazer o login usando a conta do Facebook referente ao aplicativo.
  16. Depois acessamos o menu “My Apps” > “Add a New App”

    Facebook - Add a New App
    Facebook – Add a New App
  17. Selecione a opção “Site”

    Facebook - Add a New App
    Facebook – Add a New App
  18. Escolha um nome para o seu aplicativo e acione o botão “Create New Facebook App ID”.

    Criando um Facebook App
    Criando um Facebook App
  19. Seleciona uma categoria e crie o seu App ID pelo botão “Create App ID”.

    Selecionar categoria
    Selecionar categoria
  20. Após a criação do App ID acesse novamente o menu “My Apps” e selecione o aplicativo criado.
  21. No menu do lado esquerdo, acesse a opção “Settings”.
  22. Em “App Domains”, especificar o domínio que está na aba “PAINEL” no campo “URL DO SERVIÇO MÓVEL” que vimos no item 14 desse tutorial.
  23. No campo “Contact Email”, especificar um e-mail.

    Configurando aplicativo no Facebook
  24. Clicar em “+ Add Plataform” e selecionar WebSite

    Adicionando Plataforma
    Adicionando Plataforma
  25. Nos novos campos, especificar o “Site URL” com a mesma URL usada no “App Domain”. Lembrando que esta URL pode ser obtida na aba “PAINEL” conforme descrito no item 14 desse tutorial. Salve as mudanças.

    Adicionando Website
    Adicionando Website
  26.  Depois, acesse a aba “Advanced”.
  27. No campo “OAuth Settings”, habilite a opção “Embedded browser OAuth Login” e no campo “Valid OAuth redirect URIs” concatene a sua URL DO SERVIÇO MÓVEL com “signin-facebook”, por exemplo, “https://talkitbrsample.azure-mobile.net/signin-facebook“. Salve as mudanças.

    Configurando OAuth Settings
    Configurando OAuth Settings
  28. Pronto. Agora falta habilitar nossa aplicação no Facebook. Para isso, acesse o item “Status & Review” no lado esquerdo e então habilite a opção para tornar público.

    Aplicativo Público
    Aplicativo Público
  29. Por fim acesse o item “Settings” e, na aba “Basic”, clicar no botão “Show” para obter a chave secreta. Copiar o “App ID” e “App Secret”.

    Exibir App Secret
    Exibir App Secret
  30. De volta ao Azure, vamos acessar a aba “IDENTIDADE” do serviço móvel criado anteriormente.
  31. Vamos colar o “App ID” e “App Secret” do Facebook nos campos “ID DE APLICATIVO/CHAVE DE API” e “SEGREDO DE APLICATIVO”, respectivamente, na seção “configurações do facebook” no Azure. Salve as alterações.

    Configurando Facebook
    Configurando Facebook
  32. Pronto, nosso serviço móvel já está configurado. O que falta agora é desenvolvermos os aplicativos que usarão esse serviço. O Azure já disponibiliza um código padrão nas plataformas Windows Phone, Android, iOS, HTML/JavaScript e Xamarin já configurados para acessar o nosso serviço móvel usando o Azure SDK.

    Selecionar Plataforma
  33. Após criar um novo aplicativo e baixar o código fonte, é só seguir os procedimentos descritos nos links a seguir:
    Windows Phone
    Android
    iOS

Continue acompanhando o #talkitbr para novos tutoriais e novidades!
Tutorial elaborado por Diego Castro e João Cunha.

Anúncios

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s