Skip to content

¿Cómo implementar el login con Facebook?

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 

<usespermission android:name=«android.permission.INTERNET»/>

<metadata android:name=«com.facebook.sdk.ApplicationId» android:value=«@string/facebook_app_id»/>
<metadata 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.