Update to oauth2 package README for Flutter Web info

dart-lang · Jan 10, 2025 · aeb416a · aeb416a
1 parent 54b8998
commit aeb416a
Showing 1 changed file with 71 additions and 2 deletions.
diff --git a/pkgs/oauth2/README.md b/pkgs/oauth2/README.md
@@ -128,15 +128,16 @@ because different options exist for each platform.
 For Flutter apps, there's two popular approaches:
 
 1.  Launch a browser using [url_launcher][] and listen for a redirect using
-    [uni_links][].
+    [app_links][].
 
     ```dart
       if (await canLaunch(authorizationUrl.toString())) {
         await launch(authorizationUrl.toString()); }
 
       // ------- 8< -------
 
-      final linksStream = getLinksStream().listen((Uri uri) async {
+      final appLinks = AppLinks();
+      final linksStream = appLinks.uriLinkStream.listen((Uri uri) async {
        if (uri.toString().startsWith(redirectUrl)) {
          responseUrl = uri;
        }
@@ -161,6 +162,74 @@ For Flutter apps, there's two popular approaches:
       );
     ```
 
+
+1.  To handle redirect on Flutter Web you would need to add a html file to the web folder with some 
+additional JS code to handle the redirect back to the app (in this case the redirect URI should 
+point to the html file, for example host/callback.html)
+
+    ```html
+       <html>
+       <body>
+       </body>
+       <script>
+           function findAndGetQueryParameter(parameterName) {
+               var result = null,
+               tmp = [];
+               location.search
+                   .substr(1)
+                   .split("&")
+                   .forEach(function (item) {
+                       tmp = item.split("=");
+                       if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
+                    });
+               return result;
+            }
+           let code = findAndGetQueryParameter('code');
+       
+           // Get Hostname
+           var url = window.location.href
+           var arr = url.split("/");
+           var currentUrl = arr[0] + "//" + arr[2]
+       
+           // Build new URL
+           let newUrl = currentUrl + "/#/callback?code=" + code;
+       
+           // Send to new URL
+           window.location.href = newUrl;
+       </script>
+       </html>
+    ```
+
+    After redirect to the application the code can be extracted and processed inside the root MaterialApp 
+    onGenerateRoute.
+
+    ```dart
+       MaterialApp(
+         // This onGenerateRoute simply checks if "callback" is in the URL and
+         // extracts the 'code' substring.
+         onGenerateRoute: (RouteSettings routeSettings) {
+           String code = "";
+       
+           // Example check: if the route name contains "callback",
+           // parse out the code. This is a quick hack to show how
+           // you might detect the presence of a code in the URL.
+           if (routeSettings.name != null && routeSettings.name!.contains("callback")) {
+             final fullUri = Uri.base.toString();
+             final indexOfCode = fullUri.indexOf('code=');
+             if (indexOfCode != -1) {
+               // Extract everything after 'code='
+               code = fullUri.substring(indexOfCode + 5);
+               // If there's an ampersand after the code, remove everything after it.
+               final ampIndex = code.indexOf('&');
+               if (ampIndex != -1) {
+                 code = code.substring(0, ampIndex);
+               }
+             }
+           }
+           //Pass the code param to a service class for processing
+       );
+    ```
+
 For Dart apps, the best approach depends on the available options for accessing
 a browser. In general, you'll need to launch the authorization URL through the
 client's browser and listen for the redirect URL.