google 在 flutter 中通过 webview 登录 canva 时出现问题

Question

我想从我的 flutter 应用程序通过 canva 上传图片，这就是我第一次使用 flutter-webview-plugin 的原因，因此我无法解决这个问题。

同样的代码是：-

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);
                  },
                ),
              ),
            )
          ],
        ),
      ),
    );

  }
}

请帮我解决这个问题。

Answer 1

Google 不允许原生 Flutter Web-Views 启动 OAuth。
有关详细信息，请阅读 Google Blog

对于您的情况，我可以建议 3 种可能的解决方案。

尝试使用 Email/Password 而不是 Google 登录。
使用 url_launcher 将用户重定向到浏览器。
如果您不希望用户离开您的应用
那么你可以使用 flutter_custom_tabs
此插件使用 Chrome Custom Tabs 在 Flutter 应用程序中创建原生体验。

Answer 2

您可以添加这个 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',
    ...

Answer 3

使用这个包，它很有魅力 https://github.com/LinusU/flutter_web_auth

在后台，此插件在 iOS 12+ 和 macOS 10.15+ 上使用 ASWebAuthenticationSession，在 iOS 11 上使用 SFAuthenticationSession，在 Android 并在 Web 上打开一个新的 window。

您的身份验证流程必须落入您在 callbackUrlScheme 属性中提供的方案中。然后只需解析回调 url 并围绕 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']

Answer 4

使用 webview_flutter 包，您可以通过在 Web 视图构造函数中添加 userAgent: 'random' 来解决问题。所以，它看起来像这样：

WebView(
   userAgent: 'random',
)

google 在 flutter 中通过 webview 登录 canva 时出现问题

Problem in google login in canva through webview in flutter

flutter

flutter-dependencies

google-signin

flutterwebviewplugin