将用户名和密码传递给 WebView

Question

我有一个应用程序，我必须使用用户名和密码登录。 使用相同的用户名和密码，我有一个按钮，它指向一个 web 页面，我有一个登录表单。 如何将登录我的应用程序的用户名和密码传递给 web 页面上的表单？

我的代码如下所示：

import { StackScreenProps } from '@react-navigation/stack';
import React from 'react'
import { WebView } from 'react-native-webview';
import { useAuth } from '../hooks/useAuth';
import { RootStackParamList } from '../types';

export default function WebViewScreen({ navigation }: StackScreenProps<RootStackParamList, 'WebViewScreen'>) {
  const { email, password } = useAuth();

  const jsCode =
    `const formData = new FormData();
    formData.append('username', email);
    formData.append('password', password);
    fetch('https://mylogin.page', {
      body: formData,
      method: 'POST'
    }).then(function (response) {
      console.log(response)
    }).catch((error) => {
      console.error(error)
    });`;

  return (
    <WebView
      source={{ uri: 'https://mylogin.page' }}
      injectedJavaScript={jsCode}
    />
  );
}

当我尝试它时，我的 web 页面上的登录表单中没有任何内容，那么我该如何归档呢？ 我听说过有关基于 cookies 的身份验证的信息。

Answer 1

你可以试试这段代码：

import { StackScreenProps } from '@react-navigation/stack';
import React from 'react'
import { WebView } from 'react-native-webview';
import { useAuth } from '../hooks/useAuth';
import { RootStackParamList } from '../types';

export default function WebViewScreen({ navigation }: StackScreenProps<RootStackParamList, 'WebViewScreen'>) {
  const { email, password } = useAuth();

  const jsCode =
    `const formData = new FormData();
    formData.append('username', ${email});
    formData.append('password', ${password});
    fetch('https://mylogin.page', {
      body: formData,
      method: 'POST'
    }).then(function (response) {
      alert("Hello! I am on success !!");
      console.log(response)
    }).catch((error) => {
     alert("Hello! I am on error !!");
      console.error(error)
    });`;

  return (
    <WebView
      source={{ uri: 'https://mylogin.page' }}
      injectedJavaScript={jsCode}
      javaScriptEnabled={true}
    />
  );
}