React Native — использует файлы cookie для аутентификации в WebView

#android #ios #react-native #cookies #webview

#Android #iOS #react-native #файлы cookie #webview

Вопрос:

Итак, мне предоставили пару API для приложения React Native. Одна конечная точка предназначена для аутентификации и возвращает файл cookie, который разрешает доступ к другим API.

Файл 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|451706342c67a37dfe5dede0b5d22469;
ph03RPNCiscoASA=application.api.urlweb.com;
ph04RPNCiscoASA=application.client.urlweb.com;
 

Некоторые из WebView них находятся внутри приложения React Native, которые получают доступ к некоторым ограниченным частям веб-сайта, который использует некоторые из изначально предоставленных 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|c6dc6d70vfvbf0891004364665f24b77; RTBk=300|451706342c67a37dfe5dede0b5d22469;
    ph03RPNCiscoASA=application.api.urlweb.com;
    ph04RPNCiscoASA=application.client.urlweb.com;'
 

Ответ №1:

вы можете передать строку Cookie файлов cookie внутрь header , как в этом документе

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

Комментарии:

1. Могу ли я каким-либо образом включить домен для каждого файла cookie? Если я попытаюсь cookie1=asdf; ;domain=.domain.com;path=/; , это будет интерпретироваться как 3 файла cookie.

2. @Shury извините, я вас не понял.

3. Если я хочу включить домен для каждого файла cookie, cookie1=asdf; domain=.domain.com; path=/; cookie2=asdasff; domain=.domain.com; path=/; cookie3=asfadf; domain=.domain.com; path=/; такие файлы будут интерпретироваться как 9 разных файлов cookie вместо 3 (cookie домен путь).

4. @Shury вы объединили файлы cookie некоторого домена. вы можете создать функцию синтаксического анализа для получения файлов cookie для определенного домена. функция синтаксического анализа изменит этот HTTP-файл cookie на формат JSON, после чего вам нужно будет отфильтровать файл cookie для определенного домена

5. Я назначу награду вам @Muhammad Numan через 5 часов, когда будет возможно дать ее, поскольку она отвечает на мой первоначальный вопрос. Мне нужно будет посмотреть, как передать эти дополнительные атрибуты.