Merge pull request #117 from appwrite/feat-flutter-oauth-web

lohanidamodar · web-flow · commit 7033e734aea3 · 2021-12-17T12:18:01.000+05:45
diff --git a/app/views/docs/getting-started-for-flutter.phtml b/app/views/docs/getting-started-for-flutter.phtml
@@ -79,6 +79,24 @@ $version = (isset($versions['flutter'])) ? $versions['flutter'] : '';
 
 <p>Appwrite 0.7, and the Appwrite Flutter SDK 0.3.0 have added support for Flutter Web. To build web apps that integrate with Appwrite successfully, all you have to do is add a web platform on your Appwrite project's dashboard and list the domain your website will use to allow communication to the Appwrite API.</p>
 
+<p>For web in order to capture the OAuth2 callback URL and send it to the application using JavaScript <code>postMessage()</code>, you need to create an html file inside <code>./web</code> folder of your Flutter project. For example <code>auth.html</code> with the following content.</p>
+
+<div class="ide" data-lang="html" data-lang-label="html">
+    <pre class="line-numbers"><code class="prism language-html" data-prism><?php echo $this->escape('<!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>'); ?>
+</code></pre>
+</div>
+
+<p>Redirection URL passed to the authentication service must be the same as the URL on which the application is running (schema, host, port if necessary) and the path must point to created HTML file, /auth.html in this case. The callbackUrlScheme parameter of the authenticate() method does not take into account, so it is possible to use a schema for native platforms in the code.</p>
+
 <div class="notice">
   <h2>Flutter Web Cross-Domain Communication & Cookies</h2>
   <p>While running Flutter Web, make sure your Appwrite server and your Flutter client are using the same top-level domain and the same protocol (HTTP or HTTPS) to communicate. When trying to communicate between different domains or protocols, you may receive HTTP status error 401 because some modern browsers block cross-site or insecure cookies for enhanced privacy. In production, Appwrite allows you set multiple <a href="/docs/custom-domains">custom-domains</a> for each project.</p>
