El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Autenticación de Redes Sociales

Siguiente ►
►

La autenticación de redes sociales en Firebase permite a los usuarios iniciar sesión en tu aplicación utilizando sus cuentas de redes sociales como Google, Facebook, Twitter, entre otras. Esto no solo mejora la experiencia del usuario al simplificar el proceso de inicio de sesión, sino que también puede aumentar la tasa de registro en tu aplicación.

Conceptos Clave

  1. Proveedores de Autenticación: Firebase soporta varios proveedores de autenticación, incluyendo Google, Facebook, Twitter, y GitHub.
  2. OAuth: Es el protocolo utilizado para permitir que los usuarios autoricen a tu aplicación a acceder a sus datos en las redes sociales.
  3. Tokens de Acceso: Son utilizados para autenticar y autorizar solicitudes a las APIs de los proveedores de redes sociales.

Configuración de Proveedores de Autenticación

Paso 1: Habilitar Proveedores en la Consola de Firebase

  1. Ve a la Consola de Firebase.
  2. Selecciona tu proyecto.
  3. En el menú de la izquierda, selecciona Authentication y luego Sign-in method.
  4. Habilita los proveedores de autenticación que deseas utilizar (Google, Facebook, Twitter, etc.).

Paso 2: Configurar Credenciales del Proveedor

Google

  1. Habilita Google como proveedor en la consola de Firebase.
  2. No se requiere configuración adicional en la consola de Google.

Facebook

  1. Habilita Facebook como proveedor en la consola de Firebase.
  2. Ve a Facebook for Developers y crea una nueva aplicación.
  3. Obtén el App ID y App Secret de Facebook y configúralos en la consola de Firebase.

Twitter

  1. Habilita Twitter como proveedor en la consola de Firebase.
  2. Ve a Twitter Developer y crea una nueva aplicación.
  3. Obtén las API Key y API Secret Key de Twitter y configúralos en la consola de Firebase.

Implementación en el Código

Ejemplo: Autenticación con Google

Paso 1: Agregar Dependencias

Asegúrate de tener las dependencias necesarias en tu archivo build.gradle (para Android) o Podfile (para iOS).

// build.gradle (app)
dependencies {
    implementation 'com.google.firebase:firebase-auth:21.0.1'
    implementation 'com.google.android.gms:play-services-auth:19.2.0'
}

Paso 2: Configurar Google Sign-In

// MainActivity.java
import com.google.firebase.auth.FirebaseAuth;
import com.google.firebase.auth.FirebaseUser;
import com.google.firebase.auth.GoogleAuthProvider;
import com.google.android.gms.auth.api.signin.GoogleSignIn;
import com.google.android.gms.auth.api.signin.GoogleSignInAccount;
import com.google.android.gms.auth.api.signin.GoogleSignInClient;
import com.google.android.gms.auth.api.signin.GoogleSignInOptions;
import com.google.android.gms.tasks.Task;

public class MainActivity extends AppCompatActivity {
    private FirebaseAuth mAuth;
    private GoogleSignInClient mGoogleSignInClient;
    private static final int RC_SIGN_IN = 9001;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Initialize Firebase Auth
        mAuth = FirebaseAuth.getInstance();

        // Configure Google Sign In
        GoogleSignInOptions gso = new GoogleSignInOptions.Builder(GoogleSignInOptions.DEFAULT_SIGN_IN)
                .requestIdToken(getString(R.string.default_web_client_id))
                .requestEmail()
                .build();

        mGoogleSignInClient = GoogleSignIn.getClient(this, gso);

        findViewById(R.id.sign_in_button).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                signIn();
            }
        });
    }

    private void signIn() {
        Intent signInIntent = mGoogleSignInClient.getSignInIntent();
        startActivityForResult(signInIntent, RC_SIGN_IN);
    }

    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);

        // Result returned from launching the Intent from GoogleSignInClient.getSignInIntent(...);
        if (requestCode == RC_SIGN_IN) {
            Task<GoogleSignInAccount> task = GoogleSignIn.getSignedInAccountFromIntent(data);
            handleSignInResult(task);
        }
    }

    private void handleSignInResult(Task<GoogleSignInAccount> completedTask) {
        try {
            GoogleSignInAccount account = completedTask.getResult(ApiException.class);
            firebaseAuthWithGoogle(account);
        } catch (ApiException e) {
            // Google Sign In failed, update UI appropriately
            Log.w(TAG, "Google sign in failed", e);
        }
    }

    private void firebaseAuthWithGoogle(GoogleSignInAccount acct) {
        AuthCredential credential = GoogleAuthProvider.getCredential(acct.getIdToken(), null);
        mAuth.signInWithCredential(credential)
                .addOnCompleteListener(this, new OnCompleteListener<AuthResult>() {
                    @Override
                    public void onComplete(@NonNull Task<AuthResult> task) {
                        if (task.isSuccessful()) {
                            // Sign in success, update UI with the signed-in user's information
                            FirebaseUser user = mAuth.getCurrentUser();
                            updateUI(user);
                        } else {
                            // If sign in fails, display a message to the user.
                            Log.w(TAG, "signInWithCredential:failure", task.getException());
                            updateUI(null);
                        }
                    }
                });
    }

    private void updateUI(FirebaseUser user) {
        // Update your UI here
    }
}

Ejemplo: Autenticación con Facebook

Paso 1: Agregar Dependencias

// build.gradle (app)
dependencies {
    implementation 'com.google.firebase:firebase-auth:21.0.1'
    implementation 'com.facebook.android:facebook-android-sdk:[5,6)'
}

Paso 2: Configurar Facebook Login

// MainActivity.java
import com.facebook.AccessToken;
import com.facebook.CallbackManager;
import com.facebook.FacebookCallback;
import com.facebook.FacebookException;
import com.facebook.login.LoginManager;
import com.facebook.login.LoginResult;
import com.google.firebase.auth.AuthCredential;
import com.google.firebase.auth.FacebookAuthProvider;
import com.google.firebase.auth.FirebaseAuth;
import com.google.firebase.auth.FirebaseUser;

public class MainActivity extends AppCompatActivity {
    private FirebaseAuth mAuth;
    private CallbackManager mCallbackManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Initialize Firebase Auth
        mAuth = FirebaseAuth.getInstance();

        // Initialize Facebook Login button
        mCallbackManager = CallbackManager.Factory.create();
        LoginManager.getInstance().registerCallback(mCallbackManager, new FacebookCallback<LoginResult>() {
            @Override
            public void onSuccess(LoginResult loginResult) {
                handleFacebookAccessToken(loginResult.getAccessToken());
            }

            @Override
            public void onCancel() {
                // Handle cancel
            }

            @Override
            public void onError(FacebookException error) {
                // Handle error
            }
        });

        findViewById(R.id.login_button).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                LoginManager.getInstance().logInWithReadPermissions(MainActivity.this, Arrays.asList("email", "public_profile"));
            }
        });
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        mCallbackManager.onActivityResult(requestCode, resultCode, data);
    }

    private void handleFacebookAccessToken(AccessToken token) {
        AuthCredential credential = FacebookAuthProvider.getCredential(token.getToken());
        mAuth.signInWithCredential(credential)
                .addOnCompleteListener(this, new OnCompleteListener<AuthResult>() {
                    @Override
                    public void onComplete(@NonNull Task<AuthResult> task) {
                        if (task.isSuccessful()) {
                            FirebaseUser user = mAuth.getCurrentUser();
                            updateUI(user);
                        } else {
                            updateUI(null);
                        }
                    }
                });
    }

    private void updateUI(FirebaseUser user) {
        // Update your UI here
    }
}

Ejercicios Prácticos

Ejercicio 1: Implementar Autenticación con Google

  1. Configura un proyecto de Firebase y habilita Google como proveedor de autenticación.
  2. Implementa la autenticación con Google en una aplicación Android siguiendo los pasos descritos anteriormente.
  3. Verifica que los usuarios puedan iniciar sesión con sus cuentas de Google.

Ejercicio 2: Implementar Autenticación con Facebook

  1. Configura un proyecto de Firebase y habilita Facebook como proveedor de autenticación.
  2. Implementa la autenticación con Facebook en una aplicación Android siguiendo los pasos descritos anteriormente.
  3. Verifica que los usuarios puedan iniciar sesión con sus cuentas de Facebook.

Soluciones

Solución al Ejercicio 1

Sigue los pasos detallados en la sección "Ejemplo: Autenticación con Google" para implementar la autenticación con Google en tu aplicación.

Solución al Ejercicio 2

Sigue los pasos detallados en la sección "Ejemplo: Autenticación con Facebook" para implementar la autenticación con Facebook en tu aplicación.

Errores Comunes y Consejos

  1. Error: "DEVELOPER_ERROR" al iniciar sesión con Google:

    • Asegúrate de que el google-services.json esté correctamente configurado y ubicado en el directorio app/ de tu proyecto.
    • Verifica que el SHA-1 de tu aplicación esté correctamente configurado en la consola de Firebase.

  2. Error: "INVALID_KEY_HASH" al iniciar sesión con Facebook:

    • Asegúrate de que el hash de clave de tu aplicación esté correctamente configurado en el panel de desarrolladores de Facebook.

  3. Consejo: Siempre maneja los errores de autenticación de manera adecuada para proporcionar una buena experiencia de usuario. Muestra mensajes claros y útiles cuando ocurra un error.

Conclusión

En esta sección, hemos aprendido cómo implementar la autenticación de redes sociales utilizando Firebase. Hemos cubierto la configuración de proveedores de autenticación en la consola de Firebase, así como la implementación de la autenticación con Google y Facebook en una aplicación Android. Con estos conocimientos, puedes mejorar la experiencia de usuario en tu aplicación al permitirles iniciar sesión con sus cuentas de redes sociales favoritas. En el próximo módulo, exploraremos cómo gestionar usuarios en Firebase.

◄ Anterior
◄
Siguiente ►
►

Curso de Firebase

Módulo 1: Introducción a Firebase

Módulo 2: Autenticación de Firebase

Módulo 3: Base de datos en tiempo real de Firebase

Módulo 4: Cloud Firestore

Módulo 5: Almacenamiento de Firebase

Módulo 6: Mensajería en la nube de Firebase

Módulo 7: Análisis de Firebase

Módulo 8: Funciones de Firebase

Módulo 9: Monitoreo de rendimiento de Firebase

Módulo 10: Laboratorio de pruebas de Firebase

Módulo 11: Temas avanzados de Firebase

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados