facebook-autenticacao

Cadastro de usuários – Autenticação com Redes Sociais

Heeeeey Dev’s :)

Todos Bem?

Que tal aprendermos um pouco de Xamarin.Forms e de quebra aprender a buscar os dados dos nossos usuários para adiantar no cadastro de algo? 😀

Vamos em passos então. Hoje vamos primeiramente aprender a configurar nossa aplicação para que ela possa fazer login no Facebook.

Como isso será possível? Iremos utilizar Autenticação oauth2, que é a forma como as API dessas duas redes, e muitas outras, funciona.

Dificuldade: Média Baixa (2/5)

O que vamos precisar nessa primeira etapa:

IDE, Smartphone Android (para testar a aplicação), acesso a internet e, claro, o Xamarin 😀

Usarei o Visual Studio, mas o Xamarin Studio tem todas as funcionalidades necessárias.

Criando os App’s nas Redes Sociais para Cadastro

Facebook:

1) Acesse https://developers.facebook.com/

2)Add New App

3) Clique em Android

4) Coloque um nome (chamarei de appAutenticacaoXamarin) e Clique em Criar.

5) Na pop up deixe marcada “Não” para a pergunta sobre a App ser teste de uma outra já existente e escolha uma categoria qualquer. Clique em “Create App ID”.

6) Vá ao fim da página, precisamos do nome do pacote e da Activy principal, coloque: “com.android.oauthXamarin” no PackageName e “com.android.oauthXamarin.MainActivity” em Defaul Activity Class Name. Clique em avançar.

7) Precisamos gerar nossa hash de desenvolvimento, acesse esse link: https://components.xamarin.com/gettingstarted/facebookandroid

8) Adicione as chaves geradas.

9) Clique em My Apps no menu, e clique no app que criamos.

10) Vá em Settings, Advanced e em “Valid OAuth redirect URIs” adicione “http://www.facebook.com/connect/login_success.html”

Criando a aplicação Xamarin

1) Abra o Visual Studio, vá em File => new => Project => Mobile Apps => Blank App (Xamarin.Forms Portable)

2) Dê o nome de “IntegracaoOauth”

3) Selecione o Local onde ira salvar, caso queira salvar em um local diferente do padrão do Visual Studio

4) Caso tenha um Host do Ios, conecte nele na pop up que apareceu, caso contrário clique em cancele

Configurando o App Android

1) Clique com o botão direito no projeto “IntegracaoOauth.Droid” e marque ele como o Start Up Project.

2) No projeto integracaoOatuh (Portable) existe a classe App.cs (provavelmente já está aberta na IDE). Deixe todos os métodos – inclusive o construtor – vazios.

App de Cadastro

3) No projeto Portable (passaremos a chamar de PCL), crie uma classe chamada ProfilePage, coloque ela como pública, faça ela herdar de BaseContentPage – a mesma não existe, crie ela.

4) Coloque a BaseContentPage como pública e faça ela herdar de ContentPage e escreva o método:

base.OnAppearing();

if (!App.IsLogged)
    {
Navigation.PushModalAsync(new LoginPage()); /*A LoginPage não existe, crie a classe, coloque ela como publica e mande herdar de ContentPage */

    }
}

5) No construtor da Profile Page coloque:

Content = new Label () {
Text = “Pagina de Profile”,
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.CenterAndExpand
};

 Teremos alguns erros, mas eles serão corrigidos nos passos a seguir

6) Na classe APP, faça o seguinte:

I) Adicione uma variável estática do tipo NavigationPage – colocarei o nome _NavPrincipal;

II) Crie o método GetMainPage estático do tipo Page

III) Crie o método estático to tipo bool chamado IsLogged

IV) Crie a propriedade estática do tipo string chamada _Token

V) Crie um método estático do tipo Action chamado LoginEfetuado

Teremos então as seguintes classes implementadas da seguinte forma:

App de CadastroProfilePage de CadastroBaseContentPage de CadastroLoginPage de Cadastro

7) No projeto IntegracaoOauth.Droid crie a classe LoginPageRenderer herdando de PageRenderer, vamos precisar adicionar os seguintes usings:

using Xamarin.Forms.Platform.Android;
using Xamarin.Forms;

8) Adicione o componente Xamarin.Auth no projeto (Botão direito em componentes e procure por xamarin.auth, adicione ele ao projeto)

9) Na mesma classe criada, acima do nameSpace adicione o seguinte código:

[assembly: ExportRenderer(typeof(LoginPage), typeof(LoginPageRenderer))] e as devidas referencias. Após isso crie um override do método OnElementChanged e implemente ele com o seguinte:

PageRenderer para comunicar com a redeSocial - Cadastro

10) Clique com o botão direito no projeto android e vá em propriedades, vá na opção Android Manifest da tela que abriu e preencha o campo “Package Name” com o nome que utilizou na app do facebook (no meu caso com.android.oauthXamarin) e nas Required permissions marque INTERNET, GET_ACCOUNT e USE_CREDENTIALS

11) Por fim, na Classe App.cs do projeto PCL, no método construtor adicione a linha:

MainPage = GetMainPage();

Execute o projeto, já podemos fazer Login no FaceBook com nossa aplicação.

No próximo post iremos aprender a utilizar a Facebook SDK :)

 

Cadastro de usuários – Autenticação com Redes Sociais 5.00/5 (100.00%) 3 votos

Rafael Moura

Desenvolvedor .NET, mais de 5 anos de experiência, apaixonado por tecnologia, Xamarin Student Partner Regional Lead Central/South America, Xamarin Comunity Speaker, Xamarin Certified Mobile Developer e Windows Phone Developer.

26 comentários em “Cadastro de usuários – Autenticação com Redes Sociais

  1. Olá Rafael, parabéns pelos artigos, está me ajudando muito.
    No posto de como fazer o login no facebook com xamarin, não tem o link no item 7:

    7) Precisamos gerar nossa hash de desenvolvimento, acesse esse meu post para saber como:

    Você pode me passar o link de como gerar o hash.

    Muito obrigado,

    André

      1. Na pasta C:\Users\andre\AppData\Local\Xamarin\Mono for Android existe o arquivo debug.keystore, porém quando executo o comando keytool -exportcert…. diz que o keytool não foi encontrado, já coloquei no path, reiniciei meu pc e nada. Vou ver o que pode ser. Muito obrigado pela ajuda amigo.

  2. Bom dia!
    Consegui gerar a chave, estou com um problema:
    Severity Code Description Project File Line
    Error The file “bin\Debug\MeuProjeto.Droid.dll.mdb” does not exist. CarroDeOfertas.Droid

    Quando vou rodar, acorre esse erro.
    Sabe o que ode ser amigo?

        1. bom dia, o problema era na forma de usar o keytool, estava tentando chamar o comando diretamente do prompt, depois que vi que tinha que usar o openssl e dentro dele usar o comando keytool. Gerei a chave e o resto funcionou tudo.

  3. Eu estou precisando criar um formulário que autentique no facebook, no gmail e uma opção para autenticar no meu prorprio banco de dados. O usuário pode escolher uma das 3 opções. Você tem algum material para me indicar? Muito obrigado.

  4. Bom dia Rafael,
    Você sabe me dizer como eu faço para debugar meu aplicativo?
    Eu coloco o breakpoint, a aplicação executa normalmente, mas não para no breakpoint.
    Já tentei limpar os arquivos temporarios na pasta do framework, etc…
    Estou tentando colocar o breakpoint em um método que consome um WCF e preciso ver o retorno de uma lista.
    Estou tentando debugar o que está dentro dessa chamada:
    Device.BeginInvokeOnMainThread(async () =>
    Quel é isso:
    if (e.Result.descricaoOfertas != “”) — Aqui que está meu BreakPoint

    Muito obrigado,
    André

    1. Opa André. Já deletou o app? Deleta toda das pastas Bin e OBJ do Projeto também. O breakpoint deveria parar. Uma coisa que você deve verificar é se ta habilitado o debug USB dentro do modo desenvolvedor do celular :)

      1. Olá Rafel, primeiramente muito obrigado pelo retorno, agradeço imensamente.
        Bom, eu deletei minha aplicação do device, apaguei as pastas Bin e Obj do Droid e Portable, e quando fui rodar, ocorreu o erro:
        Severity Code Description Project File Line
        Error The file “bin\Debug\ConsumidorInteligente.Droid.dll.mdb” does not exist. ConsumidorInteligente.Droid

        A opção de debug USB no celular, o que achei foi, Depuração USB que está habilitada, é essa?

        Estou tentando resolver esse erro que deu agora depois que apaguei as pastas, está complicado.

        Muito obrigado meu amigo.

  5. Boa tarde Rafael, o problema era na licença do Xamarin, comprei uma Indie e agora funcionou. Deu tudo certo. Um pergunta, no método OnElementChanged que verifica se está autenticado (if (eventargs.IsAuthenticated)), como faço para pegar as informações de quem fez o login, tipo, nome, email, etc?

    Forte abraço,
    André

  6. Fala Rafael, está acontecendo uma coisa muito estranha, esse projeto de autenticação pelo facebook por exemplo, ainda não consegui debugar amigo. Agora se eu crio um projeto do zero, ele cria a ContentPage com a mensagem default do Xamarin “Welcome to Xamarin Forms!” e eu consigo debugar tranquilamente. Porém, nesse projeto não existe chamada assíncrona, e no projeto do facebook tem. Eu consigo mesmo assim debugar com chamadas assíncronas meu amigo? Pergunto pq já não sei mais o que fazer. E desenvolver sem usar os breakpoints demora demais. Forte abraço e obrigado por todas as respostas.

  7. Acabei de fazer um teste: Retirando o método que possui Device.BeginInvokeOnMainThread(async () =>, o projeto é debugado normalmente. Eu fiz um mix, do projeto de autenticação do facebook, com o projeto de consumir WCF que você mostrou.

  8. Estou recebendo esse erro no facebook.

    There was a problem verifying the package name com.android.oauthXamarin on Google Play. Please check the package name and try again.
    If your app isn’t listed publicly on Google Play yet you can ignore this message.

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

%d blogueiros gostam disto: