Identidad federada y acceso mediante redes sociales

La autenticación mediante redes sociales es un flujo de autenticación de varios pasos que te permite hacer que un usuario acceda a una cuenta o vincularlo con una existente.

Las plataformas nativas y los sitios web admiten la creación de una credencial que se puede pasar a los métodos signInWithCredential o linkWithCredential. Como alternativa, en las plataformas web, puedes activar el proceso de autenticación mediante una ventana emergente o un redireccionamiento.

Google

La mayor parte de la configuración ya se establece cuando se usa el Acceso con Google en Firebase. Sin embargo, debes asegurarte de que la clave SHA1 de tu máquina esté configurada para usarla con Android. Puedes ver cómo generar la clave en la documentación de autenticación.

Asegúrate de que el proveedor de acceso de “Google” esté habilitado en Firebase console.

Si tu usuario accede con Google, después de haber registrado manualmente una cuenta, su proveedor de autenticación cambiará automáticamente a Google, debido al concepto de Firebase Authentication de proveedores de confianza. Puedes obtener más información al respecto aquí.

iOS+ y Android

En las plataformas nativas, se requiere una biblioteca de terceros para activar el flujo de autenticación.

Instala el complemento oficial google_sign_in.

Una vez instalado, activa el flujo de acceso y crea una nueva credencial:

import 'package:google_sign_in/google_sign_in.dart';

Future<UserCredential> signInWithGoogle() async {
  // Trigger the authentication flow
  final GoogleSignInAccount? googleUser = await GoogleSignIn().signIn();

  // Obtain the auth details from the request
  final GoogleSignInAuthentication? googleAuth = await googleUser?.authentication;

  // Create a new credential
  final credential = GoogleAuthProvider.credential(
    accessToken: googleAuth?.accessToken,
    idToken: googleAuth?.idToken,
  );

  // Once signed in, return the UserCredential
  return await FirebaseAuth.instance.signInWithCredential(credential);
}

Web

En la Web, el SDK de Firebase proporciona asistencia para manejar automáticamente el flujo de autenticación con tu proyecto de Firebase. Por ejemplo:

Crea un proveedor de autenticación de Google y proporciona cualquier alcance de permiso adicional que desees obtener del usuario:

GoogleAuthProvider googleProvider = GoogleAuthProvider();

googleProvider.addScope('https://www.googleapis.com/auth/contacts.readonly');
googleProvider.setCustomParameters({
  'login_hint': '[e-mail]'
});

Proporciona la credencial al método signInWithPopup. Esto hará que aparezca una ventana nueva en la que se le solicite al usuario que acceda a tu proyecto. Como alternativa, puedes usar signInWithRedirect para mantener el proceso de autenticación en la misma ventana.

Future<UserCredential> signInWithGoogle() async {
  // Create a new provider
  GoogleAuthProvider googleProvider = GoogleAuthProvider();

  googleProvider.addScope('https://www.googleapis.com/auth/contacts.readonly');
  googleProvider.setCustomParameters({
    'login_hint': '[e-mail]'
  });

  // Once signed in, return the UserCredential
  return await FirebaseAuth.instance.signInWithPopup(googleProvider);

  // Or use signInWithRedirect
  // return await FirebaseAuth.instance.signInWithRedirect(googleProvider);
}

Google Play Juegos

Puedes autenticar usuarios en tu juego de Android con el acceso de Play Juegos.

Android

Sigue las instrucciones de configuración de Google en Android y configura los Servicios de juego de Play con la información de tu app de Firebase.

La siguiente secuencia activará el flujo de acceso, creará una credencial nueva y hará que el usuario acceda:

final googleUser = await GoogleSignIn(
  signInOption: SignInOption.games,
).signIn();

final googleAuth = await googleUser?.authentication;

if (googleAuth != null) {
  // Create a new credential
  final credential = GoogleAuthProvider.credential(
    accessToken: googleAuth.accessToken,
    idToken: googleAuth.idToken,
  );

  // Once signed in, return the UserCredential
  await _auth.signInWithCredential(credential);
}

Facebook

Antes de comenzar, configura tu app para desarrolladores de Facebook y sigue el proceso de configuración a fin de habilitar el acceso con Facebook.

Asegúrate de que el proveedor de acceso de “Facebook” esté habilitado en Firebase console con el ID y el secreto de la app de Facebook.

iOS+ y Android

En las plataformas nativas, se requiere una biblioteca de terceros para instalar el SDK de Facebook y activar el flujo de autenticación.

Instala el complemento flutter_facebook_auth.

Deberás seguir los pasos que se indican en la documentación del complemento a fin de asegurarte de que los SDK de Facebook para iOS y Android se hayan inicializado de forma correcta. Cuando se complete, activa el flujo de acceso, crea una credencial de Facebook y haz que el usuario acceda:

import 'package:flutter_facebook_auth/flutter_facebook_auth.dart';

Future<UserCredential> signInWithFacebook() async {
  // Trigger the sign-in flow
  final LoginResult loginResult = await FacebookAuth.instance.login();

  // Create a credential from the access token
  final OAuthCredential facebookAuthCredential = FacebookAuthProvider.credential(loginResult.accessToken.token);

  // Once signed in, return the UserCredential
  return FirebaseAuth.instance.signInWithCredential(facebookAuthCredential);
}

Web

En la Web, el SDK de Firebase proporciona compatibilidad para controlar automáticamente el flujo de autenticación mediante los detalles de la aplicación de Facebook que se proporcionan en Firebase console. Por ejemplo:

Crea un proveedor de Facebook y proporciona cualquier alcance de permiso adicional que desees obtener del usuario.

Asegúrate de que el URI de redireccionamiento de OAuth de Firebase console se agregue como un URI de redireccionamiento de OAuth válido en tu app de Facebook.

FacebookAuthProvider facebookProvider = FacebookAuthProvider();

facebookProvider.addScope('email');
facebookProvider.setCustomParameters({
  'display': 'popup',
});

Proporciona la credencial al método signInWithPopup. Esta acción hará que aparezca una ventana nueva para que el usuario acceda a tu aplicación de Facebook:

Future<UserCredential> signInWithFacebook() async {
  // Create a new provider
  FacebookAuthProvider facebookProvider = FacebookAuthProvider();

  facebookProvider.addScope('email');
  facebookProvider.setCustomParameters({
    'display': 'popup',
  });

  // Once signed in, return the UserCredential
  return await FirebaseAuth.instance.signInWithPopup(facebookProvider);

  // Or use signInWithRedirect
  // return await FirebaseAuth.instance.signInWithRedirect(facebookProvider);
}

Nota: Firebase no establecerá la propiedad User.isEmailVerified en true si el usuario accede con Facebook. Si el usuario accede mediante un proveedor que verifica el correo electrónico (p. ej., Acceso con Google), se establecerá la opción como verdadera. Para obtener más información, consulta este problema.

Apple

iOS+

Antes de comenzar, configura el acceso con Apple y habilita Apple como un proveedor de acceso.

Luego, asegúrate de que tus apps de Runner tengan la función “Acceder con Apple”.

Android

Antes de comenzar, configura el acceso con Apple y habilita Apple como un proveedor de acceso.

Web

Antes de comenzar, configura el acceso con Apple y habilita Apple como un proveedor de acceso.

import 'package:firebase_auth/firebase_auth.dart';

Future<UserCredential> signInWithApple() async {
  final appleProvider = AppleAuthProvider();
  if (kIsWeb) {
    await FirebaseAuth.instance.signInWithPopup(appleProvider);
  } else {
    await FirebaseAuth.instance.signInWithProvider(appleProvider);
  }
}

Microsoft

iOS+

Antes de comenzar, configura el Acceso de Microsoft para iOS y agrega los esquemas de URL personalizados al ejecutor (paso 1).

Android

Antes de comenzar, configura el acceso de Microsoft para Android.

No olvides agregar la huella digital SHA-1 de tu app.

Web

Antes de comenzar, configura el acceso de Microsoft para la Web.

import 'package:firebase_auth/firebase_auth.dart';

Future<UserCredential> signInWithMicrosoft() async {
  final microsoftProvider = MicrosoftAuthProvider();
  if (kIsWeb) {
    await FirebaseAuth.instance.signInWithPopup(microsoftProvider);
  } else {
    await FirebaseAuth.instance.signInWithProvider(microsoftProvider);
  }
}

Twitter

Asegúrate de que el proveedor de acceso de “Twitter” esté habilitado en Firebase console con una clave de API y un conjunto de secretos de la API. Asegúrate de que tu URI de redireccionamiento de OAuth de Firebase (p. ej., my-app-12345.firebaseapp.com/__/auth/handler) esté configurado como URL de devolución de llamada de autorización en la página de configuración de la app, en la configuración de tu app de Twitter.

Es posible que también debas solicitar un acceso a la API elevado según tu app.

iOS+

Debes configurar tu esquema de URL personalizada como se describe en el paso 1 de la guía de iOS.

Android

Si aún no especificas la huella digital SHA-1 de tu app, hazlo desde la página de configuración de Firebase console. Consulta cómo autenticar tu cliente para obtener detalles sobre la obtención de la huella digital SHA-1 de tu app.

Web

Funciona de inmediato.

import 'package:firebase_auth/firebase_auth.dart';

Future<void> _signInWithTwitter() async {
  TwitterAuthProvider twitterProvider = TwitterAuthProvider();

  if (kIsWeb) {
    await FirebaseAuth.instance.signInWithPopup(twitterProvider);
  } else {
    await FirebaseAuth.instance.signInWithProvider(twitterProvider);
  }
}

GitHub

Asegúrate de haber configurado una app de OAuth desde la Configuración para desarrolladores de GitHub y de que el proveedor de acceso de “GitHub” esté habilitado en Firebase console con el ID y Secret de cliente configurados y con la URL de devolución de llamada establecida en la app de GitHub.

iOS+ y Android

En las plataformas nativas, debes agregar google-services.json y GoogleService-Info.plist.

En iOS, agrega el esquema de URL personalizado como se describe en la guía de iOS en el paso 1.

Future<UserCredential> signInWithGitHub() async {
  // Create a new provider
  GithubAuthProvider githubProvider = GithubAuthProvider();

  return await FirebaseAuth.instance.signInWithProvider(githubProvider);
}

Web

En la Web, el SDK de GitHub proporciona compatibilidad para controlar automáticamente el flujo de autenticación mediante los detalles de la aplicación de GitHub que se proporcionan en Firebase console. Asegúrate de que la URL de devolución de llamada de Firebase console se agregue como URL de devolución de llamada a tu aplicación de GitHub en su consola para desarrolladores.

Por ejemplo:

Crea un proveedor de GitHub y proporciona la credencial en el método signInWithPopup. Esta acción hará que aparezca una ventana nueva para que el usuario acceda a tu aplicación de GitHub:

Future<UserCredential> signInWithGitHub() async {
  // Create a new provider
  GithubAuthProvider githubProvider = GithubAuthProvider();

  // Once signed in, return the UserCredential
  return await FirebaseAuth.instance.signInWithPopup(githubProvider);

  // Or use signInWithRedirect
  // return await FirebaseAuth.instance.signInWithRedirect(githubProvider);
}

Yahoo

Asegúrate de que el proveedor de acceso de “Yahoo” esté habilitado en Firebase console con una clave de API y un conjunto de secretos de la API. Además, asegúrate de que el URI de redireccionamiento de Firebase OAuth (p. ej., my-app-12345.firebaseapp.com/__/auth/handler) esté configurado como URI de redireccionamiento en la configuración de Yahoo Developer Network de tu app.

iOS+

Antes de comenzar, configura el Acceso de Yahoo para iOS y agrega los esquemas de URL personalizada al ejecutor (paso 1).

Android

Antes de comenzar, configura el acceso de Yahoo para Android.

No olvides agregar la huella digital SHA-1 de tu app.

Web

Funciona de inmediato.

import 'package:firebase_auth/firebase_auth.dart';

Future<UserCredential> signInWithYahoo() async {
  final yahooProvider = YahooAuthProvider();
  if (kIsWeb) {
    await _auth.signInWithPopup(yahooProvider);
  } else {
    await _auth.signInWithProvider(yahooProvider);
  }
}

Usa el token de acceso de OAuth

Si usas un AuthProvider, puedes recuperar el token de acceso asociado con el proveedor mediante la siguiente solicitud.

final appleProvider = AppleAuthProvider();

final user = await FirebaseAuth.instance.signInWithProvider(appleProvider);
final accessToken = user.credential?.accessToken;

// You can send requests with the `accessToken`

Vincula un proveedor de autenticación

Si deseas vincular un proveedor con un usuario actual, puedes usar el siguiente método: ```dart await FirebaseAuth.instance.signInAnonymously();

final appleProvider = AppleAuthProvider();

if (kIsWeb) { await FirebaseAuth.instance.currentUser?.linkWithPopup(appleProvider);

// También puedes usar linkWithRedirect } else { await FirebaseAuth.instance.currentUser?.linkWithProvider(appleProvider); }

// Tu usuario anónimo ahora se actualizó y se puede conectar con el Acceso con Apple ```

Vuelve a autenticar con el proveedor

Se puede utilizar el mismo patrón con reauthenticateWithProvider, que se puede usar a fin de recuperar credenciales nuevas para operaciones sensibles que requieren un acceso reciente.

final appleProvider = AppleAuthProvider();

if (kIsWeb) {
  await FirebaseAuth.instance.currentUser?.reauthenticateWithPopup(appleProvider);
  
  // Or you can reauthenticate with a redirection
  // await FirebaseAuth.instance.currentUser?.reauthenticateWithRedirect(appleProvider);
} else {
  await FirebaseAuth.instance.currentUser?.reauthenticateWithProvider(appleProvider);
}

// You can now perform sensitive operations