Jetpack Compose通过AndroidView封装WebView并注入Cookie-开发者社区-阿里云

kotlin安卓开发JetPack Compose 如何使用webview 打开网页时给webview注入cookie

2024-06-14 2335

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 在Jetpack Compose中使用WebView需借助AndroidView。要注入Cookie，首先在`build.gradle`添加WebView依赖，如`androidx.webkit:webkit:1.4.0`。接着创建自定义`ComposableWebView`，通过`CookieManager`设置接受第三方Cookie并注入Cookie字符串。最后在Compose界面使用这个自定义组件加载URL。注意Android 9及以上版本可能需要在网络安全配置中允许第三方Cookie。

在Android应用程序中经常会加载一个webView页，如果需要客户端向WebView传递信息，比如Cookie，也是可以的。

需要应用程序先将Cookie注入进去，打开该网页时，WebView会将加载的url通过http请求传输到服务器。同时，在这次请求中，会将Cookie信息通过http header传递过去。

流程如下：

1、客户端通过以下代码设置cookie

fun setCookie(context: Context, url: String, map: MutableMap<String, String>) {
    map.onEach { entry ->
        Log.i("xudong debug", "set cookie: key: ${entry.key},  value: ${entry.value}")
        CookieSyncManager.createInstance(context)
        val cookieManager = CookieManager.getInstance()
        cookieManager.setCookie(url, "${entry.key}=${entry.value}")
        CookieSyncManager.getInstance().sync()
    }
}

在Jetpack Compose中，由于没有直接的WebView组件，你需要使用AndroidView来包裹传统的WebView控件。要在打开网页时给WebView注入Cookie，可以通过如下步骤实现：

步骤 1: 引入WebView依赖

确保你的build.gradle文件中添加了WebView的依赖项：

dependencies {
    implementation 'androidx.webkit:webkit:1.4.0'
}

步骤 2: 创建自定义WebView组件

创建一个自定义的WebView组件，该组件会注入Cookie后再加载URL。

import android.webkit.CookieManager
import android.webkit.WebView
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.viewinterop.AndroidView





@Composable
fun ComposableWebView(url: String, modifier: Modifier = Modifier) {
    val context = LocalContext.current

    AndroidView(factory = {
        WebView(context).apply {
            // 设置WebView的属性，如是否支持JavaScript等
            settings.javaScriptEnabled = true

            // 注入Cookie逻辑
            CookieManager.getInstance().apply {
                setAcceptThirdPartyCookies(this@apply, true)
                CookieManager.getInstance().setCookie(url, "YOUR_COOKIE_STRING")
                // 注意：YOUR_COOKIE_STRING应该是格式正确的Cookie字符串，例如 "key=value; domain=.example.com; path=/"
                reload() // 重新加载网页以应用Cookie
            }

            // 加载URL
            loadUrl(url)
        }
    }, modifier = modifier.fillMaxSize())
}

步骤 3: 使用自定义WebView组件

在你的Compose界面中使用这个ComposableWebView组件：

import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.layout.Column
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.platform.setContent
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.tooling.preview.PreviewParameterProvider

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApp()
        }
    }
}

@Composable
fun MyApp() {
    Column {
        Text("点击按钮打开WebView")
        Button(onClick = {
            // 在这里可以使用实际的URL和Cookie
            ComposableWebView("https://www.example.com")
        }) {
            Text("打开WebView")
        }
    }
}

// 为了预览，我们通常不直接预览Web内容，因此这里不做预览参数提供
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MyApp()
}

请注意，注入Cookie的操作需要在加载URL之前完成，并且确保你有权限访问和修改Cookie。此外，由于安全原因，从Android 9（API 级别 28）开始，需要在应用的网络安全配置中明确允许第三方Cookie。如果你的应用面向的是Android 9及以上版本，还需检查AndroidManifest.xml中是否正确配置了网络安全配置。