Implementar una herramienta que nos permita realizar login con Facebook puede ser muy sencillo o muy complicado por la cantidad de pasos que se deben seguir antes de que este proceso sea exitoso. Realmente la configuración no es difícil, solo hay cosas que debemos saber para no tardar tanto en la implementación del mismo.
Librerías :
-
Librería para implementar: existen dos librerías que son muy bien nombradas (flutter_facebook_login y flutter_facebook_auth). Sin embargo, la primera flutter_facebook_login tiene problemas de compatibilidad con algunos paquetes de Android, por lo que se recomienda implementar flutter_facebook_auth, agregando el paquete al pubspec.yaml y ejecutando el comando Pub get.
Implementación :
Antes que nada es necesario tener el proyecto en marcha. Lo primero para iniciar la configuración es ir y crear el proyecto de nuestra aplicación en la plataforma de Facebook https://developers.facebook.com/apps
Posterior a esto, lo segundo es crear un archivo que se debe llamar strings.xml en la siguiente ruta del proyecto:
{proyecto_flutter}/android/app/src/main/res/values/strings.xlm donde agregamos lo siguiente
<resources>
<string name=«facebook_app_id»>{facebook_app_id}</string>
<string name=«fb_login_protocol_scheme»>{fb_login_protocol_scheme}</string>
<string name=«facebook_client_token»>{facebook_client_token}</string>
</resources>
Facebook_app_id:
fb_login_protocol_scheme:
Solo se tendría que agregar fb al inicio del facebook_app_id = «fb492526595691364”
Facebook_client_token:
El tercer paso seria editar nuestro /android/app/src/main/AndroidManifest.xml
<uses–permission android:name=«android.permission.INTERNET»/>
<meta–data android:name=«com.facebook.sdk.ApplicationId» android:value=«@string/facebook_app_id»/>
<meta–data android:name=«com.facebook.sdk.ClientToken» android:value=«@string/facebook_client_token»/>
Básicamente el archivo va a quedar de la siguiente forma:
<manifest xmlns:android=»http://schemas.android.com/apk/res/android»
package=»app.meedu.flutter_facebook_auth_example»>
<uses-permission android:name=»android.permission.INTERNET» />
<application
android:name=»${applicationName}»
android:icon=»@mipmap/ic_launcher»
android:label=»facebook auth»>
<meta-data
android:name=»com.facebook.sdk.ApplicationId»
android:value=»@string/facebook_app_id» />
<meta-data
android:name=»com.facebook.sdk.ClientToken»
android:value=»@string/facebook_client_token»/>
<activity
android:name=».MainActivity»
android:configChanges=»orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode»
android:hardwareAccelerated=»true»
android:launchMode=»singleTop»
android:theme=»@style/LaunchTheme»
android:exported=»true»
android:windowSoftInputMode=»adjustResize»>
<meta-data
android:name=»io.flutter.embedding.android.NormalTheme»
android:resource=»@style/NormalTheme» />
<meta-data
android:name=»io.flutter.embedding.android.SplashScreenDrawable»
android:resource=»@drawable/launch_background» />
<intent-filter>
<action android:name=»android.intent.action.MAIN» />
<category android:name=»android.intent.category.LAUNCHER» />
</intent-filter>
</activity>
<meta-data
android:name=»flutterEmbedding»
android:value=»2″ />
</application>
</manifest>
El cuarto paso es crear las credenciales para Android desde la plataforma, yendo a la plataforma y dando clic en el botón de configuraciones/información básica/añadir plataforma y agregando Android. Algo que cuesta tiempo conseguir y que es parte fundamental del proceso es agregar el key hash adecuado por lo que aquí te diremos como puedes obtenerla sin mucho problema.
Para obtener el Hashes de clave tendremos que abrir el archivo Android desde Android Studio, y dirigirnos a android/app/src/main/kotlin/{com.example.proyecto}/MainActivity y agregamos el siguiente código
package com.flutterLab.bonappo_user_app
import android.content.pm.PackageInfo
import android.content.pm.PackageManager
import android.os.Bundle
import android.util.Base64
import android.util.Log
import io.flutter.embedding.android.FlutterActivity
import java.security.MessageDigest
import java.security.NoSuchAlgorithmException
class MainActivity: FlutterActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
try {
val info: PackageInfo = packageManager.getPackageInfo(
«com.flutterLab.bonappo_user_app», //Insert your own package name.
PackageManager.GET_SIGNATURES)
for (signature in info.signatures) {
val md: MessageDigest = MessageDigest.getInstance(«SHA»)
md.update(signature.toByteArray())
Log.d(«KeyHash:», Base64.encodeToString(md.digest(), Base64.DEFAULT))
}
} catch (e: PackageManager.NameNotFoundException) {
} catch (e: NoSuchAlgorithmException) {
}
}
}
El paso a seguir es ejecutar el proyecto desde Android studio y donde dice logcat agregar los siguientes filtros
y el KeyHash: seria el código para agregar a Hashes de clave
De esta manera el proceso ha quedado finalizado y ya podremos hacer uso de esta api en desarrollo.