Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to navigate to a web page from within a flutter app? (OAuth)

Tags:

flutter

dart

I am trying to build a Flutter app that uses OAuth to connect to a user's account on another website. This requires navigating to the site's OAuth page where the user can enter their credentials, and then parsing the code that's sent back to the app when the user returns.

So my questions are:

  1. How can I navigate to the OAuth web page?

I have figured out that I can navigate to an internal route like this:

Navigator.of(context).pushNamed('/some_page');

But what if I want to go to an external page like https://coolsite.com/oauth/authorize?

How can I do this (a) by opening the URL in the local web browser, and (b) with an in-app web view?

  1. What URL should I redirect the user to after authenticating so that they go back to the app, and how do I parse the response?

It seems there are 2 ways:

(a) Let the user be redirected to a blank page with the authorization code in the URL and title of the page. If this method - how do I parse the page or URL?

(b) Redirect the user to some kind of scheme, like my-dart-app://coolsite-oauth?code=xyz. If this method - how do I register the scheme, and would cool site-OAuth map to a route that I specify when calling new MaterialApp, or somewhere else? And how would I parse the query param?

like image 484
cilphex Avatar asked Nov 12 '15 23:11

cilphex


People also ask

How do I navigate to a website in flutter?

Here, we have two pages, FIRST_PAGE (Example: localhost:3000/#/first_page) and SECOND_PAGE (Example: localhost:3000/#/second_page). Now, we will create a reusable onGenerateRoute class in our second routes file. Using the route settings, we will get the Routes name and then navigate to the corresponding Page.

How do I open URL in WebView flutter?

Opening URL in WebView In Android, the URLs will be opened in a browser by default. You change that behavior to open the URLs in a WebView instead by setting forceWebView parameter to true . However, JavaScript is not enabled by default unless you set enableJavaScript to true .

How do I display a web page on Flutter app?

With the WebView Flutter plugin you can add a WebView widget to your Android or iOS Flutter app. On iOS the WebView widget is backed by a WKWebView, while on Android the WebView widget is backed by a WebView. The plugin can render Flutter widgets over the web view.


1 Answers

You can trigger a navigation using the activity service:

import 'package:flutter/services.dart';

void launchUrl(String url) {
  Intent intent = new Intent()
    ..action = 'android.intent.action.VIEW'
    ..url = url;
  activity.startActivity(intent);
}

There isn't currently a way to receive a navigation in Flutter, but that's something we'd like to add. I've created this issue to track this feature request: https://github.com/flutter/flutter/issues/357

like image 166
abarth-chromium Avatar answered Oct 22 '22 14:10

abarth-chromium