Portuguese (Português) translation by Erick Patrick (you can also view the original English article)
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+.
.png)
.png)
