I want Microsoft Authentication in Flutter Application

Question

I want to provide Microsoft auth in my flutter app along with Google and Facebook. I found documentation for Google and Facebook, but could not find any resource or document for Microsoft auth. Any help will be appreciable.

Answer 1

Sorry if this answer is late, it may help others who are facing the same issue. I followed a simple technique to overcome Microsoft authentication, at the end you will receive the user mail ID, and other details as per permissions set while declaring the app.

There is a flutter package https://pub.dev/packages/flutter_web_auth

Before proceeding you need to register an application with the Azure Active Directory https://portal.azure.com/#view/Microsoft_AAD_RegisteredApps/CreateApplicationBlade/isMSAApp~/false

configure the flutter login method

final url = Uri.https('login.microsoftonline.com', '/your-tenant ID/oauth2/v2.0/authorize', {
  'response_type': 'token',
  'client_id': 'your Client ID',
  'redirect_uri': redirectUrl,
  'scope': 'https://graph.microsoft.com/openid',
});

// This method will return the authorization code which needs to exchanged for user details

final result = await FlutterWebAuth.authenticate(url: url.toString(), callbackUrlScheme: redirectUrl);
// Extract code from resulting url

you can get either access code or token based on security level. More explanation can be found at: https://learn.microsoft.com/en-us/azure/active-directory/develop/app-sign-in-flow

for my approach, I took tokens from the Azure AD and exchange with this API to get user details

final details = await http.get(Uri.parse("https://graph.microsoft.com/oidc/userinfo"),
  headers: {
    "Authorization" : "Bearer "+accessCode,
  });

You can use these details to authenticate the user and enable functions. In Azure AD you can define who can use the login mechanism such as organization or general.

Hope this helps.

Answer 2

Old, but for future searchers, here is another approach.

Steps:

1. In the Azure portal, go into "App Registration"

2. You need the "Application (client) ID" from the Overview page

3. Then go to "Authentication", from here click "Add a platform" and select "Mobile and desktop applications", select the "msal{YOUR-CLIENT-ID-HERE}://auth" redirect URL

4. Add the "aad_oauth" package

   Add this package to your Flutter project:

   aad_oauth package

   Using this command:

   flutter pub add aad_oauth
   

5. Implement the UI

   Here is an example of a login screen where the user can login with Microsoft:

   import 'package:aad_oauth/aad_oauth.dart';
   import 'package:aad_oauth/model/config.dart';
   import 'package:aad_oauth/model/failure.dart';
   import 'package:aad_oauth/model/token.dart';
   import 'package:flutter/cupertino.dart';
   import 'package:flutter/material.dart';
   
   class LoginScreen extends StatefulWidget {
     const LoginScreen({Key? key}) : super(key: key);
   
     @override
     _LoginScreenState createState() => _LoginScreenState();
   }
   
   class _LoginScreenState extends State<LoginScreen> {
     final _microsoftSignIn = AadOAuth(Config(
       // If you dont have a special tenant id, use "common"
       tenant: "common",
       clientId: "your-client-id",
       // Replace this with your client id ("Application (client) ID" in the Azure Portal)
       responseType: "code",
       scope: "User.Read",
       redirectUri: "msal{YOUR-CLIENT-ID-HERE}://auth",
       loader: const Center(child: CircularProgressIndicator()),
       navigatorKey: navigatorKey,
     ));
   
     _loginWithMicrosoft() async {
       var result = await _microsoftSignIn.login();
   
       result.fold(
         (Failure failure) {
           // Auth failed, show error
         },
         (Token token) async {
           if (token.accessToken == null) {
             // Handle missing access token, show error or whatever
             return;
           }
   
           // Handle successful login
           print('Logged in successfully, your access token: ${token.accessToken!}');
   
           // Perform necessary actions with the access token, such as API calls or storing it securely.
   
           await _microsoftSignIn.logout();
         },
       );
     }
   
     @override
     Widget build(BuildContext context) {
       return Center(
         child: ElevatedButton(
           onPressed: () => _loginWithMicrosoft(),
           child: Text('Log in with Microsoft'),
         ),
       );
     }
   }