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

1. Crear una cuenta de Azure: Si no tienes una cuenta de Azure, regístrate en el Portal de Azure.
2. Registrar la aplicación:
   – Inicia sesión en el Portal de Azure.
   – Navega a Azure Active Directory > App registrations.
   – Haz clic en New registration.
3. 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.
4. 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

1. 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.

2. 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

1. 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

1. 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()),

],

),

),

);

}

}

 

2. 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 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!