Sobre Account Kit

O Que é Autenticação Sem Senha?

Autenticação sem senha, como diz, não usa senha para registro ou login. Ao invés disso, a autenticação é confirmada via código de verificação via SMS ou link via email, ambos de uso único.

Por Que Autenticação Sem Senha?

• Processos de login e registro sem problemas para usuários.
  
• Segura acesso ao app, já que usuários não precisam reusar senhas ou senhas de fácil descoberta (como "password").
• Evita forçar usuários a criar e lembrar senhas únicas.

Nesse tutorial, mostraremos como usar o Account Kit do Facebook para autenticação sem senha em apps de Android. Os usuários registrarão e acessarão seja por número de telefone ou email. Eles não precisam ter conta no Facebook para autenticar.

Não só isso, mas o Account Kit é fácil de implementar e nos salva da tediosa criação de sistemas de login.

Como o Account Kit Funciona?

O diagrama abaixo deve deixar claro como Account Kit funciona.

A autenticação acontece numa série de trocas entre o usuário e o app. Primeiro o usuário inicia o login, talvez carregando ao app no celular. Então, um código de verificação único é enviado para o usuário via SMS ou um link via email. Após isso, o usuário digita o código ou clica no link, e ele será autenticado para o app.

Outro recurso legal do Account Kit é quando o usuário digita o telefone no app, Account Kit tentará casar com o número conectado ao perfil do Facebook do usuário. Se estiver conectado ao app do Facebook no Android e os números casarem, Account Kit pulará o envio da SMS e o usuário será logado automaticamente, sem problemas.

Usando Account Kit

1. Pré-requisito

Para começar a usar o Account Kit, precisaremos:

• uma conta de Desenvolvedor do Facebook
• um app para integrar ao Account Kit

2. Habilitar o Account Kit

Vamos ao painel do app, cliquemos no botão Add Product e selecionemos Account Kit. Então cliquemos no botão Get Started para adicioná-lo. O que veremos é a configuração do Account Kit.

3. Declarando Dependências

Adicionemos a dependência com a última versão da SDK do Account Kit no arquivo build.gradle e sincronizemos o projeto.

repositories {
  jcenter()
}

dependencies {
  compile 'com.facebook.android:account-kit-sdk:4.+'
}

4. Atualizando AndroidManifest.xml

Adicionemos o ID do app do Facebook, token de cliente do Account Kit (disponível no painel de configuração) e a permissão INTERNET ao AndroidManifest.xml.

<uses-permission android:name="android.permission.INTERNET" />

<meta-data android:name="com.facebook.accountkit.ApplicationName"
           android:value="@string/app_name" />
<meta-data android:name="com.facebook.sdk.ApplicationId"
           android:value="@string/FACEBOOK_APP_ID" />
<meta-data android:name="com.facebook.accountkit.ClientToken"
           android:value="@string/ACCOUNT_KIT_CLIENT_TOKEN" />

<activity
  android:name="com.facebook.accountkit.ui.AccountKitActivity"
  android:theme="@style/AppLoginTheme"
  tools:replace="android:theme"/>

5. Atualizando Arquivos de Recursos

Incluamos o id do app e o token de cliente do Account Kit no arquivo strings.xml.

<string name="FACEBOOK_APP_ID">YourAPPId</string>
<string name="ACCOUNT_KIT_CLIENT_TOKEN">YourAccountKitClientToken</string>

Também incluamos o tema do Account Kit no styles.xml.

<style name="AppLoginTheme" parent="Theme.AccountKit" />

6. Inicializando a SDK

Na classe Application, inicializemos a SDK (lembrando de incluir o android:name no AndroidManifest.xml) 

public class MyApplication extends Application {

    @Override
    public void onCreate() {
        super.onCreate();
        AccountKit.initialize(getApplicationContext());
    }
}

7. Iniciando o Fluxo de Login

Temos de escrever um manipulador separado para os fluxos de autenticação via SMS e email.

Para SMS, na linha 5, especificamos o tipo de login LoginType.PHONE.

public void onSMSLoginFlow(View view) {
    final Intent intent = new Intent(this, AccountKitActivity.class);
    AccountKitConfiguration.AccountKitConfigurationBuilder configurationBuilder =
            new AccountKitConfiguration.AccountKitConfigurationBuilder(
                    LoginType.PHONE,
                    AccountKitActivity.ResponseType.CODE); // or .ResponseType.TOKEN
    // ... perform additional configuration ...
    intent.putExtra(
            AccountKitActivity.ACCOUNT_KIT_ACTIVITY_CONFIGURATION,
            configurationBuilder.build());
    startActivityForResult(intent, 101);
}

Para email, na linha 5, especificamos o tipo de login LoginType.EMAIL.

public void onEmailLoginFlow(View view) {
    final Intent intent = new Intent(this, AccountKitActivity.class);
    AccountKitConfiguration.AccountKitConfigurationBuilder configurationBuilder =
            new AccountKitConfiguration.AccountKitConfigurationBuilder(
                    LoginType.EMAIL,
                    AccountKitActivity.ResponseType.CODE); // or .ResponseType.TOKEN
    // ... perform additional configuration ...
    intent.putExtra(
            AccountKitActivity.ACCOUNT_KIT_ACTIVITY_CONFIGURATION,
            configurationBuilder.build());
    startActivityForResult(intent, 101);
}

8. Estruturando a Tela de Login

Eis um layout simples para uma tela que mostra botões para acessar via SMS ou email.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="https://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/activity_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:orientation="vertical"
        tools:context="com.chikeandroid.tutsplus_facebook_accountkit.MainActivity">

    <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Login By SMS"
            android:onClick="onSMSLoginFlow"/>

    <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Login By Email"
            android:onClick="onEmailLoginFlow"/>
</LinearLayout>

9. Lidando com Resposta do Fluxo de Login

Agora, quando o usuário tentar o login, receberemos uma resposta no método onActivityResult(). Nele, podemos manipular autenticações, bem sucedidas, canceladas ou falhas.

@Override
protected void onActivityResult(final int requestCode, final int resultCode, final Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
    
    if (requestCode == 101) { // confirm that this response matches your request
        AccountKitLoginResult loginResult = data.getParcelableExtra(AccountKitLoginResult.RESULT_KEY);
        String toastMessage;
        if (loginResult.getError() != null) {
            toastMessage = loginResult.getError().getErrorType().getMessage();
            showErrorActivity(loginResult.getError());
        } else if (loginResult.wasCancelled()) {
            toastMessage = "Login Cancelled";
        } else {
            if (loginResult.getAccessToken() != null) {
                toastMessage = "Success:" + loginResult.getAccessToken().getAccountId();
            } else {
                toastMessage = String.format(
                        "Success:%s...",
                        loginResult.getAuthorizationCode().substring(0, 10));
            }

            // If you have an authorization code, retrieve it from
            // loginResult.getAuthorizationCode()
            // and pass it to your server and exchange it for an access token.

            // Success! Start your next activity...
            goToMyLoggedInActivity();
        }

        // Surface the result to your user in an appropriate way.
        Toast.makeText(this, toastMessage, Toast.LENGTH_LONG).show();
    }
}

O App Completo

Agora podemos executar nosso app para testar ambos os fluxos!

Notemos que a SDK JavaScript do Account Kit não suporta login via WebView, então os usuários não conseguem acessar via Account Kit numa WebView. Teremos de Criar nossa interface de login com código nativo.

Conclusão

Nesse tutorial, aprendemos sobre autenticação sem senha usando o Account Kit do Facebook: o que é, porque deveríamos considerar e como implementar num app para Android.

Um aviso, porém: alguns veem autenticação sem senha como menos segura. A maioria não usaria quando segurança é prioridade, como num app para bancos. Então, usemos com cautela e escolhamos a hora certa de usá-lo ou um esquema tradicional de autenticação.

Para aprender mais sobre o Account Kit do Facebook, leiamos a documentação oficial. Aprendamos mais sobre desenvolvimento para Android nessas outras publicações na Envato Tuts+.

• Comunicação Dentro de um App Android com EventoBus

  EventBus da Greenrobot é uma popular biblioteca de código aberto que usar o modelo publicação/inscrição para comunicação entre componentes no sistema Android. Em...

• Firebase para Android: Armazenamento de Arquivo

  Durante a Google I/O 2016, Firebase foi reparesentado à comunidade de desenvolvedores como uma grande ferramenta, provendo suporte de backend...

• Como Criar um App de Chat para Android Usando Firebase

  Com Firebase, criar aplicações sociais de tempo real é fácil. E o melhor é que não precisamos escrever uma linha de...

• Codificando Apps Android Funcionais em kotlin: Lambdas, Segurança de Nulos & Mais

  A linguagem Kotlin para apps Androi permite-nos codificar algo que seria bem verboso em Java ou sequer seria possível. Aprendamos como...