Problem in google login in canva through webview in flutter

user_10592369 0
Viewed 3004

GIF

I wanted to upload pics through canva from my flutter app that is why I am using the flutter-webview-plugin for the first time and therefore I am not able to solve this issue.

Code for the same is:-

import 'package:flutter/material.dart';
import 'package:kf_drawer/kf_drawer.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'dart:async';


class SettingsPage extends KFDrawerContent {
  @override
  _SettingsPageState createState() => _SettingsPageState();
}

class _SettingsPageState extends State<SettingsPage> {

  final Completer<WebViewController> _controller =
  Completer<WebViewController>();

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Center(
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                ....
              ],
            ),
            Expanded(
              child: Container(
                height: 500,
                child: WebView(
                  initialUrl: "https://shree-hari.github.io/laxmi_canva/index.html",
                  javascriptMode: JavascriptMode.unrestricted,
                  onWebViewCreated: (WebViewController webViewController){
                    _controller.complete(webViewController);
                  },
                ),
              ),
            )
          ],
        ),
      ),
    );

  }
}

Please Help me to address this issue .

flutterwebviewplugin google-signin flutter-dependencies flutter
4 Answers

Google not allow native Flutter Web-Views to initiate OAuth.
For more info read Google Blog

In your case, I can suggest 3 Possible Solutions.

  1. Try to Sign in with Email/Password instead of Google Sign In.
  2. Use url_launcher to redirect the user to the browser.
  3. If you don't want the user to leave your app
    then you can use flutter_custom_tabs
    this plugin use Chrome Custom Tabs to create a native experience inside the Flutter App.
user_134503980

You can add this userAgent :

WebView(
    initialUrl: url,
    userAgent: Platform.isIOS ? 'Mozilla/5.0 (iPhone; CPU iPhone OS 13_1_2 like Mac OS X) AppleWebKit/605.1.15' +
        ' (KHTML, like Gecko) Version/13.0.1 Mobile/15E148 Safari/604.1' :
      'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) ' + 
        'AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Mobile Safari/537.36',
    ...
user_151263990

Use this package, it works like a charm https://github.com/LinusU/flutter_web_auth

In the background, this plugin uses ASWebAuthenticationSession on iOS 12+ and macOS 10.15+, SFAuthenticationSession on iOS 11, Chrome Custom Tabs on Android and opens a new window on Web.

Your auth flow must land in the scheme you provide in callbackUrlScheme property. Then just parse the callback url and implement you own business logic around signin/signup

import 'package:flutter_web_auth/flutter_web_auth.dart';

// Present the dialog 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']
user_5864290
user_187232430
Related