Autenticando seu aplicativo Xamarin com o Facebook: Parte 1

Aposto que a maioria dos aplicativos que você tem instalado no seu celular pediram para você criar uma conta de usuário antes de você começar a usá-lo, certo? Afinal, as empresas querem ter um controle sobre quem está usando o seu aplicativo e também querem oferecer um ambiente seguro ao usuário ao garantir que ninguém terá acesso a suas informações.

Dessa forma, vemos que a autenticação é um fator importante para ter um aplicativo de sucesso, independentemente da plataforma escolhida. Com a popularidade das redes sociais, torna-se muito mais atrativo para o usuário utilizar uma conta já existente para fazer login em um novo aplicativo do que preocupar-se em ter mais uma conta para gerenciar.

Nesse post mostrarei os passos necessários para utilizar o Facebook como um provedor de autenticação de um aplicativo Xamarin.Forms previamente vinculado com o recurso Aplicativos Móveis do Serviço de Aplicativo do Azure. Caso você ainda não tenha um aplicativo neste cenário, siga as instruções da documentação do Azure e crie o aplicativo de exemplo do tutorial. Depois de conclui-lo, você terá um projeto Xamarin.Forms que funciona como uma lista de tarefas para várias plataformas. Esse passo é importante para que você consiga implementar a autenticação do Facebook no seu código no próximo artigo.

Vamos começar?

Criando o aplicativo de Login do Facebook

Primeiro, é necessário registrar seu aplicativo na plataforma de desenvolvimento do Facebook. Só assim será possível utilizar os seus recursos de login. Em seguida, você definirá as credenciais geradas pelo Facebook no back-end do seu Aplicativos Móveis do Serviço de Aplicativo do Azure.

1. Abra o Portal de Desenvolvedores do Facebook e clique em “Entrar” no canto superior.

2. Faça o login com o Facebook. Você precisará de uma conta de desenvolvedor do Facebook. Se você não tiver uma, será necessário atualizar a sua conta pessoal para também ser uma conta de desenvolvedor do Facebook aceitando os termos da plataforma.

3. Uma vez feito o login, você será redirecionado para a página inicial. Clique em “Meus Aplicativos” no canto superior direito ao lado do ícone da sua foto de perfil.

4. Clique na opção “Adicionar um novo aplicativo”. Você será o administrador desse novo aplicativo.

5. Uma janela será exibida na mesma página. Digite o nome de exibição do novo aplicativo e o e-mail de contato. Em seguida, clique em “Crie um número de identificação do aplicativo”.

6. Digite o texto da verificação de segurança e clique em “Enviar”.

7. Você será redirecionado para a página inicial de gerenciamento do seu novo aplicativo. Passe o mouse sobre a opção “Login do Facebook” e clique no botão “Configurar” para habilitar e configurar o recurso.

8. Você será redirecionado para a página “Início Rápido”, contudo esse procedimento não será necessário no momento. Clique na opção “Configurações” na seção do Login do Facebook no menu lateral esquerdo.

9. A página de configuração do Login do Facebook será exibida. Por padrão, as opções “Login no OAuth do cliente” e “Login do OAuth na Web” já estão habilitadas e você as deixará assim. A única alteração a ser feita será acrescentar a URI de Redirecionamento (*) do seu aplicativo no campo “URIs de redirecionamento do OAuth válidos”. Isso permitirá que o usuário acesse os dados do seu Mobile App uma vez que esteja autenticado com o Facebook. Em seguida, clique em “Salvar alterações”.

(*) Observação: a URI de redirecionamento é a URL do seu aplicativo adicionada ao caminho /.auth/login/facebook/callback. Certifique-se de que você está usando o esquema HTTPS.

10. O campo “URIs de redirecionamento do OAuth válidos” ficará como na imagem abaixo. Em seguida, clique na opção “Painel” no menu lateral esquerdo.

11. Essa página é o painel de controle do seu aplicativo do Facebook (*). Este painel contêm as informações principais do aplicativo, tais como: Versão da API, ID do Aplicativo e Chave Secreta. Clique em “Mostrar” para ver a Chave Secreta do Aplicativo.

(*) Observação: seu aplicativo ainda está em modo de desenvolvimento, isto é, ainda não está disponível publicamente. Portanto somente usuários vinculados ao seu aplicativo podem fazer login nele (adicione usuários na aba “Funções” do menu lateral)

15. Há uma verificação de segurança anteriormente. Digite sua senha e clique em “Enviar”.

16. Agora a Chave Secreta de seu aplicativo será exibida. Esse valor é gerado automaticamente pelo próprio Facebook. O ID do Aplicativo e a Chave Secreta serão usados para configurar a autenticação do usuário com os dados do aplicativo móvel no Azure.

Configurando a autenticação do Mobile App no Azure

  1. Acesse o Portal Azure e vá até o Serviço de Aplicativo previamente criado.
  2. No menu lateral, dentro da seção “Configurações“, acesse o item “Autenticação / Autorização”.
  3. Ative a opção “Autenticação do serviço de aplicativo”.
  4. Na seção “Ação a ser tomada quando a solicitação não for autenticada”, selecione a opção “Logon com Facebook”.
  5. Em “Provedores de Autenticação”, clique em “Facebook”. Uma nova aba será exibida. Nela você deve especificar os valores “ID do Aplicativo” e “Segredo do Aplicativo” copiados anteriormente no Portal de Desenvolvedores do Facebook.
  6. Na seção “Escopo“, selecione as opções “public_profile” e “email” (são as informações básicas de um usuário, caso precise de mais informações, selecione dentre as opções disponíveis). Clique em “OK” e essa aba será fechada.
  7. De volta na seção “Autenticação / Autorização”, clique em “Salvar” na parte superior da tela.

Próximos passos

A autenticação do seu aplicativo já está configurada no Azure! Contudo, ainda é necessário fazer a integração desse serviço de autenticação no código do seu aplicativo Xamarin.Forms, isto é, tanto no projeto compartilhado quanto nos projetos Android e iOS.

Faremos isso na próxima parte desse artigo. Fique de olho e até a próxima!

 

Anúncios

Deixe um comentário

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 )

Foto do Google+

Você está comentando utilizando sua conta Google+. 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 )

Conectando a %s