React Native - 在 WebView 中使用 cookie 进行身份验证

Posted 2023-05-07

【中文标题】React Native - 在 WebView 中使用 cookie 进行身份验证

【英文标题】：React Native - Use cookies to authenticate in WebView

【发布时间】：2021-03-27 09:26:43

【问题描述】：

所以我已经为 React Native 应用程序提供了几个 API。 一个端点用于身份验证，它返回一个允许访问其他 API 的 cookie。

cookie 的结构如下：

"auth":"ok","instance":"private","cookies":"SSOsess":"300|c6dc6d70vfvbf0891004364665f24b77","RTBk":"300|451706342c67a37dfe5dede0b5d22469","ph03RPNCiscoASA":"application.api.urlweb.com","ph04RPNCiscoASA":"application.client.urlweb.com"

经过一些格式化后，cookie 就可以发送了，如下所示：

SSOsess=300%7Cc6dc6d70vfvbf0891004364665f24b77; RTBk=300%7C451706342c67a37dfe5dede0b5d22469;
ph03RPNCiscoASA=application.api.urlweb.com;
ph04RPNCiscoASA=application.client.urlweb.com;

React Native 应用程序中的一些 WebView 访问使用最初提供的一些 API 的网站的一些受限部分。

如何将 cookie 发送到WebView？我知道 React Native 有一些属性可用于将 cookie 注入 WebView，例如 injectedjavascript 或 injectedJavaScriptBeforeContentLoaded，但这些属性究竟应该包含什么？

我试过用下面的方式发送，但还是不行：

<WebView source= uri: 'http://urlweb.com' 
               style=width: 600, height: 400
               injectedJavaScriptBeforeContentLoaded=jsInjectedCode
/>

在哪里

jsInjectedCode = 'document.cookie = '+'SSOsess=300%7Cc6dc6d70vfvbf0891004364665f24b77; RTBk=300%7C451706342c67a37dfe5dede0b5d22469;
    ph03RPNCiscoASA=application.api.urlweb.com;
    ph04RPNCiscoASA=application.client.urlweb.com;'

【参考方案1】：

您可以将 cookie 字符串传递给 Cookie 内的 header 像这样 DOCS

import React, Component from 'react';
import StyleSheet, View from 'react-native';
import WebView from 'react-native-webview';

export default class App extends Component 
  render() 
    const cookiesString="cookie1=asdf; cookie2=dfasdfdas";   //here you can put your cookies
    return (
      <View style=styles.container>
        <WebView
          source=
            uri: `$domain`,
            headers: 
              Cookie: cookiesString,
            ,
          
          style=styles.WebViewStyle
        />
      </View>
    );
  


const styles = StyleSheet.create(
  container: 
    flex: 1,
    backgroundColor: '#FFF',
  ,
  WebViewStyle: 
    flex: 1,
    resizeMode: 'cover',
  ,
);

【讨论】：

有什么方法可以为每个 cookie 包含一个域吗？如果我尝试cookie1=asdf; ;domain=.domain.com;path=/;，这将被解释为 3 个 cookie。

@Shury 对不起，我没听懂你的意思。

如果我想为每个 cookie 包含一个域，例如 cookie1=asdf; domain=.domain.com; path=/; cookie2=asdasff; domain=.domain.com; path=/; cookie3=asfadf; domain=.domain.com; path=/; ，这些将被解释为 9 个不同的 cookie，而不是 3 个（cookie + 域 + 路径）。

@Shury 你已经合并了某个域的 cookie。您可以创建一个解析器函数来获取特定域的 cookie。解析器函数会将此 HTTP cookie 更改为 JSON 格式，然后您必须为特定域过滤 cookie

我会在 5 小时内将赏金奖励给你@Muhammad Numan，因为它回答了我最初的问题。我得看看如何传递这些额外的属性。