>
>
>
>
>
>
>
>
>
Autenticación de Microsoft en Flutter con Azure
La autenticación de Microsoft proporciona una solución segura y confiable para integrar el inicio de sesión en tus aplicaciones móviles y web.
En este tutorial, te guiaré paso a paso a través del proceso de configuración del inicio de sesión de Microsoft usando Azure y Flutter.
Prerrequisitos
Antes de comenzar, asegúrate de tener lo siguiente:
- Una cuenta de Microsoft Azure.
- Conocimientos básicos de Flutter y Dart.
- Un entorno de desarrollo configurado para Flutter.
Paso 1: Crear un Proyecto en Flutter
Primero, crea un nuevo proyecto en Flutter. Abre tu terminal y ejecuta:
flutter create my_auth_app
Navega al directorio del proyecto:
cd my_auth_app
Paso 2: Configurar el Proyecto en Azure
- Crear una cuenta de Azure: Si no tienes una cuenta de Azure, regístrate en el Portal de Azure.
- Registrar la aplicación:
– Inicia sesión en el Portal de Azure.
– Navega a Azure Active Directory > App registrations.
– Haz clic en New registration. - Configurar el registro de la aplicación:
– Name: Escribe un nombre significativo para tu aplicación, como «My Auth App».
– Supported account types: Selecciona el tipo de cuenta adecuado. Para este tutorial, selecciona Accounts in any organizational directory.
– Redirect URI: Para aplicaciones móviles, usa el esquema específico de tu aplicación. Por ejemplo, msauth://YOUR_PACKAGE_NAME. - Obtener clientId y tenantId:
– Después de registrar la aplicación, copia el Application (client) ID y Directory (tenant) ID desde la página de descripción general de la aplicación.
Paso 3: Configurar aad_oauth en Flutter
- Abre el archivo pubspec.yaml y agrega las siguientes dependencias:
dependencies:
flutter:
sdk: flutter
aad_oauth: ^1.3.0
firebase_auth: ^3.3.19
cloud_firestore: ^3.1.10
get: ^4.6.1
Importante: Ejecuta “flutter pub get” para instalar las dependencias.
- Configura la autenticación de Microsoft:
import ‘package:aad_oauth/aad_oauth.dart’;
import ‘package:aad_oauth/model/config.dart’;
final Config config = Config(
tenant: «your-tenant-id»,
clientId: «your-client-id»,
scope: «openid profile offline_access»,
redirectUri: «msauth://YOUR_PACKAGE_NAME»,
);
final AadOAuth oauth = AadOAuth(config);
Paso 4: Implementar la Lógica de Inicio de Sesión
- Crea un controlador para manejar la lógica de autenticación. Aquí tienes un ejemplo de auth_controller.dart:
import ‘package:get/get.dart’;
import ‘package:aad_oauth/aad_oauth.dart’;
import ‘package:aad_oauth/model/config.dart’;
import ‘package:firebase_auth/firebase_auth.dart’ as firebase_auth;
class AuthController extends GetxController {
final firebase_auth.FirebaseAuth _auth =
firebase_auth.FirebaseAuth.instance;
final Config config = Config(
tenant: «your-tenant-id»,
clientId: «your-client-id»,
scope: «openid profile offline_access», redirectUri: «msauth://YOUR_PACKAGE_NAME», );
final AadOAuth oauth = AadOAuth(config);
var isLoggedIn = false.obs;
var isLoading = false.obs;
Future<void> loginWithMicrosoft() async {
try {
isLoading(true);
await oauth.login();
final accessToken = await oauth.getAccessToken();
final firebase_auth.AuthCredential credential =
firebase_auth.OAuthProvider(‘microsoft.com’).credential(
accessToken: accessToken,
);
firebase_auth.UserCredential userCredential =
await _auth.signInWithCredential(credential); firebase_auth.User? firebaseUser = userCredential.user;
if (firebaseUser != null) {
String? idToken = await firebaseUser.getIdToken();
// Aquí puedes manejar el usuario autenticado isLoggedIn(true);
Get.offNamed(‘/home’);
}
} catch (e) {
Get.snackbar(‘Error’, e.toString(), snackPosition: SnackPosition.BOTTOM,
backgroundColor: Colors.red,
colorText: Colors.white);
} finally {
isLoading(false);
}
} void logout() async {
await _auth.signOut();
isLoggedIn(false);
Get.offAllNamed(‘/auth’);
}
}
Paso 5: Implementar la Interfaz de Usuario
- Crea una página de autenticación (auth_page.dart):
import ‘package:flutter/material.dart’;
import ‘package:get/get.dart’;
import ‘auth_controller.dart’;
class AuthPage extends StatelessWidget {
final AuthController authController = Get.put(AuthController());
@override Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(‘Inicio de Sesión’)),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () => authController.loginWithMicrosoft(),
child: Text(‘Iniciar sesión con Microsoft’),
),
Obx(() => authController.isLoading.value
? CircularProgressIndicator()
: Container()),
],
),
),
);
}
}
- Configura las rutas en main.dart:
import ‘package:flutter/material.dart’;
import ‘package:get/get.dart’;
import ‘auth_page.dart’;
import ‘home_page.dart’; // Asegúrate de tener una página de inicio
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GetMaterialApp(
title: ‘My Auth App’,
initialRoute: ‘/auth’,
getPages: [
GetPage(name: ‘/auth’, page: () => AuthPage()),
GetPage(name: ‘/home’, page: () => HomePage()),
],
);
}
}
Paso 6: Obtener Detalles del Usuario
Para recuperar los datos de usuario de Microsoft Azure, realiza una llamada a la API REST usando el token de acceso obtenido durante el proceso de inicio de sesión:
import ‘dart:convert’;
import ‘package:http/http.dart’ as http;
Future<Map<String, dynamic>> fetchAzureUserDetails(String accessToken) async {
final response = await http.get(
Uri.parse(«https://graph.microsoft.com/v1.0/me»),
headers: {«Authorization»: «Bearer $accessToken»},
);
return json.decode(response.body);
}
Conclusión
¡Felicidades! Ahora has integrado correctamente el inicio de sesión de Microsoft en tu aplicación Flutter con Azure.
Los usuarios pueden autenticarse con sus cuentas de Microsoft y puedes acceder a sus datos a través de la API de Microsoft Graph.
Recuerda manejar los errores y los elementos de la interfaz de usuario, como los botones de cierre de sesión y las pantallas de perfil, de acuerdo con los requisitos de tu aplicación.
Si sigues estos pasos, mejorarás la experiencia del usuario en tu aplicación Flutter y proporcionarás una autenticación segura mediante cuentas de Microsoft.
En GRUPO EBIM desarrollamos soluciones TI a la medida de las necesidades de tu empresa. Somos expertos en consultoría SAP, Outsourcing de personal TI, y contamos con un equipo de profesionales dispuestos a brindar soluciones digitales escalables para tu negocio. ¡Llena nuestro formulario de contacto y obtén más información sobre los servicios que ofrecemos!
