將用戶名和密碼傳遞給 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}
    />
  );
}