Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)
Acerca de Account Kit
¿Qué es Autenticación Sin Contraseña?
La autenticación sin contraseña omite el uso de una contraseña para registro o inicio de sesión. En su lugar, la autenticación de usuario es confirmada ya sea con un código de verificación SMS una sóla vez enviado al teléfono del usuario o un enlace de una sola vez a su dirección de email.
¿Por Qué Usar Autenticación Sin Contraseña?
- Proceso de inicio de sesión y registro sin contratiempos para tus usuarios.
- Mantiene asegurado el acceso a tu app, porque el usuario no reutilizará contraseñas o recurrirá a contraseñas fáciles de adivinar (tales como "password").
- Evita agotar a tus usuarios con la necesidad de crear y recordar contraseñas únicas
En este tutorial de consejo rápido, te mostraré como usar Account Kit de Facebook para autenticación sin contraseña en tu aplicación Android. Tus usuarios se registrarán e iniciarán sesión ya sea con su teléfono o dirección de email. Los usuarios incluso no necesitan tener una cuenta de Facebook para ser autenticados.
No solo eso, además Account Kit es fácil de implementar y te ahorra tener que construir de manera tediosa un sistema de inicio de sesión.
¿Cómo Funciona Account Kit?
El siguiente diagrama debería aclarar cómo funciona Account Kit.
La autenticación se lleva a cabo en una serie de intercambios entre el usuario y la aplicación. Primero el usuario comienza el inicio de sesión, tal vez cargando la aplicación en su teléfono. Después, un código de verificación es enviado al SMS del usuario, o un enlace de una sola vez es enviado por correo electrónico. Después de eso, si el usuario ingresa el código de validación o da clic al enlace, estará autenticado para la app.
Otra característica interesante de Facebook Account Kit es que cuando tu usuario ingresa su número de teléfono a la app, Account Kit tratará de emparejarlo con el número de teléfono conectado al perfil de Facebook del usuario. Si el usuario ha iniciado sesión en la aplicación de Facebook para Android, y los números de teléfono coinciden, Account Kit omitirá enviar el código de verificación SMS y el usuario iniciará sesión de manera más fácil.
Usando Account Kit
1. Prerrequisitos
Para comenzar a usar Account Kit, necesitarás:
- una cuenta de Desarrollador Facebook
- una app para integrar con Account Kit
2. Habilita Account Kit
Ve al tablero de tu app, da clic al botón Agregar Producto, y selecciona Account Kit. Después da clic al botón Comenzar para agregar Account Kit. Lo que verás son los ajustes de configuración para Account Kit.
3. Declara Dependencias
Agrega la dependencia con la última versión de Account Kit SDK en tu archivo build.gradle y sincroniza tu proyecto.
repositories {
jcenter()
}
dependencies {
compile 'com.facebook.android:account-kit-sdk:4.+'
}
4. Actualiza AndroidManifest.xml
Agrega tu ID de aplicación Facebook, token de cliente Account Kit (este está disponible en el tablero de ajustes de Account Kit), y el permiso INTERNET al 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. Actualiza los Archivos de Recursos
Incluye el id de tu app y token de cliente Account Kit en tu archivo strings.xml.
<string name="FACEBOOK_APP_ID">YourAPPId</string> <string name="ACCOUNT_KIT_CLIENT_TOKEN">YourAccountKitClientToken</string>
También incluye el tema de Account Kit en tu styles.xml.
<style name="AppLoginTheme" parent="Theme.AccountKit" />
6. Inicializa el SDK
En tu clase Application, inicializa el SDK (recuerda incluir el android:name en tu AndroidManifest.xml).
public class MyApplication extends Application {
@Override
public void onCreate() {
super.onCreate();
AccountKit.initialize(getApplicationContext());
}
}
7. Inicializa el Flujo de Inicio de Sesión
Tenemos que escribir un manejador separado para los flujos de autenticación del SMS y correo electrónico.
Para SMS, en la línea 5, especificamos el tipo de inicio de sesión 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, en la línea 5, especificamos el tipo de inicio de sesión 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. Diseña la Pantalla de Inicio de Sesión
Aquí está un diseño simple para una pantalla que muestra botones para iniciar sesión con SMS o 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. Maneja Respuestas del Flujo de Inicio de Sesión
Ahora cuando el usuario intenta iniciar sesión, obtendremos una respuesta en el método onActivityResult(). En este método, podemos manejar autenticaciones exitosas, canceladas y fallidas.
@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();
}
}
La App Completada
¡Ahora podemos ejecutar nuestra app para probar los flujos de inicio de sesión SMS y de email!
Nota que el SDK JavaScript de Account Kit no soporta inicio de sesión WebView, así que no puedes ingresar personas desde un WebView con Account Kit. Tendrás que escribir tu interface de inicio de sesión de Account Kit con código nativo.
Conclusión
En este tutorial de consejo rápido, aprendiste sobre autenticación sin contraseña usando Facebook Account Kit: qué es, por qué quisieras considerar usarlo, y cómo implementarlo en tu aplicación Android.
Una palabra de advertencia: algunos ven la autenticación sin contraseña como menos segura. La mayoría de la gente no lo usaría cuando la seguridad es una prioridad, por ejemplo, con una aplicación de banco. Así que ten un poco de discreción sobre cuando usarla y cuando ir con un esquema de autenticación más tradicional.
Para aprender más acerca de Facebook Account Kit, refiérete a la documentación oficial. Y para aprender más acerca de desarrollo Android, revisa algunas de nuestras otras publicaciones aquí en Envato Tuts+!.
.png)
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post
