Question

我有一个需要用户登录的应用程序。我有用于登录页面的网站以及所有内容。

因此，我一直在使用“ flutter_webview_plugin”，“ openid_client”，“ flutter_appauth”软件包。目前，我有一个打开登录页面的Web视图。因此，主页只是一个按钮，该按钮路由到名为“ LoginScreen（）”的类，该类随后将显示网页。这就是您在代码中看到的。我对整个颤动和编程还是比较陌生，所以请解释一下，好像我不知道自己在做什么。

另一个注意事项是，我不确定在哪里将逻辑应用于身份验证和令牌检索。即在网页视图所在的主页或登录页面中

import 'dart:async';
import 'package:flutter_appauth/flutter_appauth.dart';
import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import 'package:flutter/services.dart';

class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {

  final flutterWebviewPlugin = new FlutterWebviewPlugin();

  StreamSubscription _onDestroy;
  StreamSubscription<String> _onUrlChanged;
  StreamSubscription<WebViewStateChanged> _onStateChanged;

  String token;

  @override
  void dispose() {
    // Every listener should be canceled, the same should be done with this stream.
    _onDestroy.cancel();
    _onUrlChanged.cancel();
    _onStateChanged.cancel();
    flutterWebviewPlugin.dispose();
    super.dispose();
  }

  @override
  void initState() {
    super.initState();

    //flutterWebviewPlugin.close();

    // Add a listener to on destroy WebView, so you can make came actions.
    _onDestroy = flutterWebviewPlugin.onDestroy.listen((_) {
      print("destroy");
    });

    _onStateChanged =
        flutterWebviewPlugin.onStateChanged.listen((WebViewStateChanged state) {
          print("onStateChanged: ${state.type} ${state.url}");
        });

    // Add a listener to on url changed
    _onUrlChanged = flutterWebviewPlugin.onUrlChanged.listen((String url) {
      if (mounted) {
        setState(() {
          print("URL changed: $url");
        //flutterWebviewPlugin.close();

        });
      }
    });
  }


  @override
  Widget build(BuildContext context) {
    String url = "http://login/page";
    return WebviewScaffold(
      appBar: AppBar(
        title: Text("Login"),
      ),
      url: url,
      withZoom: false,

    );
  }
}

网络视图有效，但我不知道如何实现逻辑

Answer 1

您将以完全错误的方式进行操作。 Flutter旨在提供更轻松的本地体验。您使用的技术要比本机编程更先进，并且使之依赖于较少的技术，该技术将Webview封装在本机应用程序中。我建议以下。如果可以实现它们。

公开公开用于登录的API，以便您可以直接从移动应用访问它。
在Flutter上构建您自己的登录屏幕，不要使用Flutter打包网站。
公开您的API后，将您的令牌作为普通的json对象返回，并根据需要在应用程序中使用它。

如果您不能更改api并真的想包装您的应用程序（我不建议这样做），请不要使用Flutter。 Flutter's webview非常有限（它仍在开发人员预览中，因为它依赖于将本机视图添加到元素树中，这是一个即将推出的功能）。使用适合包装网站的技术，并提供内置支持。如果您不熟悉编程，那么这将非常令人困惑，因此请使用适合您想要做的事情。

我建议您查看以下技术：

Cordova（很快就过时了）
Ionic，尽管它完全基于网络，但在本机混合动力车中更受欢迎，并且还在不断增长。

我知道这不是您可能正在寻找的答案，但是根据您的问题，解决该问题将遇到更多困难。请尝试遵循我提出的第一点，您的开发经验会更好，并且您的解决方案也会从简单性方面受益。

登录页面检索令牌

1 个答案: