Demystifying CallbackUrlScheme in Flutter: A Comprehensive Guide

Demystifying CallbackUrlScheme in Flutter

Integrating external services such as authentication providers or payment gateways into mobile app development requires the use of callback methods to communicate between the app and the external service. The callbackUrlScheme in Flutter is critical in managing these callbacks. This article will look into the callbackUrlScheme in Flutter, its significance, and how to use it effectively in your Flutter applications.

What is a CallbackUrlScheme?

A callbackUrlScheme is a unique identifier assigned to your application to handle callbacks from external services. When an external service needs to communicate back to your app, it typically redirects the user to a custom URL scheme defined by your app. This URL scheme triggers the app to handle the callback and process the necessary actions.

Setting up a CallbackUrlScheme

To set up a callbackUrlScheme in your Flutter app, follow these steps:

a. Modify the iOS configuration

• Open your project’s Info.plist file.
• Add a new key called “CFBundleURLTypes” of type Array.
• Add a new item under “CFBundleURLTypes” and set the URL Scheme (CFBundleURLSchemes) to your desired scheme, e.g., “myapp”.
• Save the changes.

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>myapp</string> <!-- Replace "myapp" with your desired scheme -->
    </array>
  </dict>
</array>

b. Configure the Android manifest (AndroidManifest.xml)

• Open the AndroidManifest.xml file located in the android/app/src/main directory.
• Add an intent filter within the <activity> tag.
• Set the android:scheme attribute to your desired scheme, e.g., "myapp".
• Save the changes.

<activity>
  ...
  <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data
        android:scheme="myapp" /> <!-- Replace "myapp" with your desired scheme -->
  </intent-filter>
</activity>

Handling Callbacks in Flutter

Once the callbackUrlScheme is set up, your Flutter app needs to handle the callbacks appropriately. The following steps outline the process:

Detecting callback URLs

• Implement a mechanism to listen for callback URLs in your Flutter app.
• In Flutter, you can utilize packages like uni_links or flutter_appauth to handle deep links and OAuth flows respectively. We’ll use uni_links

dependencies:
  flutter:
    sdk: flutter
  uni_links: ^0.5.1

• Here’s an example code snippet demonstrating how to use uni_links to detect and extract data from callback URLs:

Future<void> initUniLinks() async {
  try {
    final initialLink = await getInitialLink();
    handleLink(
        initialLink!); // Handle the initial link if the app was opened from the callback URL

    // Listen for incoming links while the app is running
    linkStream.listen((link) {
      //Extracting data from callback URLs
    });
  } on PlatformException {
    // Handle exception if UniLinks is not supported on the platform
  }
}

Extracting data from callback URLs

• Parse the callback URL to extract any relevant data or parameters.
• The extracted data can be used to perform specific actions or update the app’s state accordingly.

String _callbackData = '';

void handleLink(String link) {
  if (link != null) {
    // Extract relevant data from the link
    // Example: Assuming the callback URL is "myapp://callback?data=some_data"
    final uri = Uri.parse(link);
    final callbackData = uri.queryParameters['data'];

    setState(() {
      _callbackData = callbackData!;
    });

    // Perform necessary actions or update the app's state based on the extracted data
   // Example: Trigger a function or update UI elements
  }
}

Updating the UI or triggering actions

• Based on the extracted data, update the UI or trigger relevant actions in your Flutter app.
• For example, if the callback is related to authentication, you might log in the user or update their session information.

void processCallbackData(String data) {
  // TODO: Implement your logic here based on the callback data
  // Example: Update UI or perform actions based on the received data
}

Use Cases for CallbackUrlScheme

Social Media Integration

When integrating social media SDKs (e.g., Facebook, Twitter), the callbackUrlScheme enables your app to handle authentication callbacks, post sharing, or deep-linking features.

Payment Gateway Integration

• Payment gateways often rely on callback mechanisms to notify your app about successful or failed transactions.
• The callbackUrlScheme helps your app respond accordingly and update the payment status.

OAuth-based Authentication

• Many apps use OAuth-based authentication systems (e.g., Google Sign-In, Auth0).
• The callbackUrlScheme ensures your app can receive authorization codes or access tokens securely.

Security Considerations

Validate callback URLs

• Ensure that the received callback URLs originate from trusted sources.
• Validate the URL and perform necessary checks to prevent security vulnerabilities like spoofing or tampering.

if (uri != null && uri.toString().startsWith("myapp")) {
}

Securely handle sensitive data

• If the callback URL includes sensitive data, ensure it is handled securely.
• Utilize encryption and appropriate storage mechanisms to protect user information.

Conclusion

The callbackUrlScheme in Flutter is a vital component for integrating external services and handling callbacks in your app. By setting up the callbackUrlScheme correctly and implementing the necessary logic, you can seamlessly handle external callbacks, enhance user experiences, and integrate various services into your Flutter applications. Remember to consider security measures when dealing with callback URLs and sensitive data to ensure the integrity and safety of your app and its users.

🔥 Github repository: Using CallbackUrlScheme in Flutter

👏🏽 Give this story a CLAP

👉🏽 Subscribe for upcoming articles

💰 Access Free Mobile Development tutorials

🔔 Follow for more

See you on next article 👋