具有基本身份验证的 Flutter WebView [英] Flutter WebView with Basic Authentication

问题描述

我正在加载一个网页，我想使用基本身份验证登录，我有使用 Swift 的经验并且能够执行如下基本身份验证，但我无法为我的应用程序的 Flutter 版本实现基本身份验证.

I am loading a web page and I want to login with Basic Authentication, I have experience with Swift and able to do Basic Auth like below but I couldn't implement Basic Auth for Flutter version of my app.

---- Swift 代码 ---

---- Swift Code ---

func configureView() {
        let username = "user"
        let password = "pass"
        let userPasswordString = "\(user):\(pass)"
        let userPasswordData = userPasswordString.data(using: String.Encoding.utf8)
        let base64EncodedCredential = userPasswordData!.base64EncodedString(options:[])
        let authString = "Basic \(base64EncodedCredential)"
        let url = URL(string: "http://myurl")
        var request = URLRequest(url: url!)
        request.setValue(authString, forHTTPHeaderField: "Authorization")
        webView.scalesPageToFit = true
        webView.loadRequest(request)
    }

--- Flutter WebView ---> 使用 URL 加载 webview

--- Flutter WebView ---> load webview with URL

import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

class AddShipment extends StatefulWidget {

  final String url;

  AddShipment(this.url);

  @override 
  State<StatefulWidget> createState() {
    return new _AddShipment();
  }
}

class _AddShipment extends State<AddShipment> {
  final flutterWebviewPlugin = new FlutterWebviewPlugin();

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

    flutterWebviewPlugin.close();
  }

  @override
  void dispose() {

    flutterWebviewPlugin.dispose();

    super.dispose();
  }


  @override
  Widget build(BuildContext context) {
    return new WebviewScaffold(
      appBar: new AppBar(
          title: new Text("WebView"),
          centerTitle: true,
          backgroundColor: Colors.blue[900],
          elevation: 0.0,
      ),
      url: widget.url,
      withJavascript: true,
    );
  }
}

创建 urlRequest 的正确方法是什么?我试过了:

What is the correct way to create an urlRequest? I tried:

static Future<Response> getURL(
      final String username, final String password) {
    final String url = 'http://myurl';
    final String auth =
        'Basic ' + base64Encode(utf8.encode('$username:$password'));
    return http.get(url, headers: {'Authorization': auth});
}

推荐答案

将额外的标题添加到 WebviewScaffold 构造函数.

Add your additional headers to the WebviewScaffold constructor.

    url: widget.url,
    withJavascript: true,
    headers: {'Authorization': 'Basic ' + base64Encode(utf8.encode('$widget.username:$widget.password'))},

将用户名和密码传递到小部件中，与传递 url 的方式相同.

Pass username and password into the widget, in the same way that you are passing the url.

这篇关于具有基本身份验证的 Flutter WebView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！