Are you considering using the Flutter plugin to simplify web service integration and user authentication? Well! It is time to read this blog because it gives in-depth information about the Flutter plugin for authenticating a user with the web service.
Hire flutter developer from BOSC Tech labs without hesitation if you need professional help to perform the integration. Engaging with the Flutter developer is always a good idea to get the desired solution without spending much effort and time.
Web Auth for Flutter
OAuth2 is the popular flutter plugin for authenticating a user with web service integration. It is a commonly used plugin even if the third party runs the web service. However, it can access any web-flow, which can redirect to the custom scheme.
It utilizes ASWebAuthenticationSession on iOS 12+ and macOS 10.15+, Chrome custom tabs on Android, and SFAuthenticationSession. In addition, it opens a new window on the Web. Although you can build this plugin with iOS 8+, it is supported only by iOS 11 or higher.
Usage of the Web Auth
Here is how to authenticate against your own custom website!
import ‘package:flutter_web_auth/flutter_web_auth.dart’;
// Present the dialogue to the user
final result = await FlutterWebAuth.authenticate(URL: “https://my-custom-app.com/connect”, callbackUrlScheme: “my-custom-app”);
// Extract token from resulting URL
final token = Uri.parse(result).queryParameters[‘token’]
Look at the below to know how to authenticate the user with the help of Google’s OAuth2:
import ‘package:flutter_web_auth/flutter_web_auth.dart’;
import’ dart: convert’ show jsonDecode;
import ‘package:http/http.dart’ as http;
finalgoogleClientId = ‘XXXXXXXXXXXXxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com’;
finalcallbackUrlScheme = ‘com.googleusercontent.apps.XXXXXXXXXXXX-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx’;
final url = Uri.https(‘accounts.google.com’, ‘/o/oauth2/v2/auth’, {
‘response_type’: ‘code’,
‘client_id’: googleClientId,
‘redirect_uri’: ‘$callbackUrlScheme:/’,
‘scope’: ’email’,
});
final result = await FlutterWebAuth.authenticate(url: url.toString(), callbackUrlScheme: callbackUrlScheme);
final code = Uri.parse(result).queryParameters[‘code’];
final response = await http.post(‘https://www.googleapis.com/oauth2/v4/token’, body: {
‘client_id’: googleClientId,
‘redirect_uri’: ‘$callbackUrlScheme:/’,
‘grant_type’: ‘authorization_code’,
‘code’: code,
});
finalaccessToken = jsonDecode(response.body)[‘access_token’] as String;
How to set up the flutter plugin
Usually, the setup works for all the Flutter plugins except the Android and Web. Here is the outline of the setup for these aspects.
Android
The following activity requires to be added to AndroidManifest.xml to capture the callback URL. Make sure you replace YOUR_CALLBACK_URL_SCHEME_HERE with the actual callback URL scheme.
<manifest>
<application>
<activity android:name=”com.linusu.flutter_web_auth.CallbackActivity” >
<intent-filter android:label=”flutter_web_auth”>
<action android:name= “android.intent.action.VIEW”/>
<category android:name= “android.intent.category.DEFAULT”/>
<category android:name= “android.intent.category.BROWSABLE”/>
<data android:scheme=”YOUR_CALLBACK_URL_SCHEME_HERE” />
</intent-filter>
</activity>
</application>
</manifest>
Web
On the Web platform, creating the endpoint is necessary. It helps capture the callback URL and then sends it to the application with the help of the JavaScript postMessage() method. Create the HTML file with the name auth.html in the ./web folder of the project.
<!DOCTYPE html>
<title>Authentication complete</title>
<p>Authentication is complete. If this does not happen automatically, please
close the window.
<script>
window.opener.postMessage({
‘flutter-web-auth’: window.location.href
}, window.location.origin);
window.close();
</script>
Remember that the redirection URL passed to the authentication service should be similar to the URL on which the application runs. Additionally, the path should point to the created HTML file. The callbackUrlScheme parameter of authenticate () method does not consider. Thus, it is possible to utilize the schema for the native platforms in the code.
How to troubleshoot issues
If you access this package for the first time, you may confront certain issues. Here are the common solutions for the major issues. It gives you peace of mind and helps you do your tasks easily.
- Troubleshooting Flutter app
You must tell the FlutterWebAuth.authenticate function what your callbackUrlScheme is. For instance, if the callbackUrlScheme is valid-callback-scheme, the dart code must look like this:
import ‘package:flutter_web_auth/flutter_web_auth.dart’;
final result = await FlutterWebAuth.authenticate(URL: “https://my-custom-app.com/connect”, callbackUrlScheme: “valid-callback-scheme”);
You should make any mistake with this aspect. Or else, you will not simplify the user authentication and web service integration with the Flutter plugin.
- Troubleshooting call backUrlScheme
callbackUrlScheme should be a valid string. Or else it will not work properly. Examples of valid callbackUrlScheme are callback-scheme and example scheme. It should not contain any underscore, space or uppercase. Likewise, you should not start with the number.
- Troubleshooting OAuth redirects
Your OAuth provider should redirect to the valid callbackUrlScheme+ ://. It means when your callbackUrlScheme is the valid scheme, the OAuth provider should redirect to the valid scheme://. Here is an example of PHP.
<?php
header(“Location: validscheme://?data1=value1&data2=value2”);
Major benefits of using Flutter
As everyone knows, Flutter is an open-source mobile application. Google has developed and launched this application. It gives freedom for the developers to build natively compiled applications for desktop, Web, and mobile from a single codebase. An experienced developer will perform many things with this platform.
The major advantage of accessing Flutter for web app development is its faster process. Developers will make changes to the code and witness the results in real-time without manually rebuilding the app. Speeding up the development cycle, it becomes web app development much easier to iterate and fix bugs quickly. Know about building a chat application with Flutter using ChatGPT.
With the advanced APIs, Flutter lets third-party integration for specific features and higher functionalities. Additionally, it offers a rich set of testing features to test the apps at the integration level. The tech giant has developed Flutter, and thus, you can obtain large community support.
Whenever you need assistance with web service integration and user authentication, you can seek assistance from community professionals. Flutter’s web support offers the same experience on the Web as on mobile. The Flutter frameworks’ flexibility now helps build Android and iOS apps easily.
Bottom line
Flutter is Google’s cross-platform UT toolkit. It is created to assist developers in building beautiful and expressive mobile applications. This article will teach you how to use the Flutter plugin for user authentication and web service integration.
Try to follow the things mentioned in the above section to use the Flutter platform properly to gain many benefits. Additionally, it helps enjoy seamless user authentication and simplifies user service authentication with OAuth().
The article also includes the troubleshooting steps to avoid problems in your path of user authentication and web service integration. If you are unable to handle these things alone, you can even hire flutter developer. The experienced developer will provide the necessary assistance and meet your needs.
