【问题标题】：3DS2 BrowserInfo data with React Native and Expo带有 React Native 和 Expo 的 3DS2 BrowserInfo 数据
【发布时间】：2021-09-22 18:19:15
【问题描述】：

为了integrate the 3DS2 protocol 我的支付提供商（MangoPay），我必须提供BrowserInfo 数据。

这是一个例子：

{
"BrowserInfo": {
        "AcceptHeader" : "application/json,text/javascript,*/*;q=0.01<", 
        "JavaEnabled": true,
        "Language":"fr",
        "ColorDepth": 32,
        "ScreenHeight": 667,
        "ScreenWidth": 375, 
        "TimeZoneOffset": "-120" 
        "UserAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 13_6_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148" 
        "JavascriptEnabled": true
}

目前，我可以使用打开浏览器实例 WebBrowser.openBrowserAsync.

如何使用 React Native + Expo 检索这些信息？

【问题讨论】：

标签： reactjs react-native expo mangopay

【解决方案1】：

我发现唯一可行的方法是多步骤过程。

公共网页

创建并托管一个公共网页，执行以下操作：

将浏览器信息提取到对象上
使用信息重定向到给定的重定向 URL

简而言之：

<!DOCTYPE html>
<html lang="en">
  <body>
    <script type="text/javascript">
      const browserInfo = {
        // Currently unable to fetch the default value automatically.
        // @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Content_negotiation/List_of_default_Accept_values
        acceptHeader: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8',
        javaEnabled: window.navigator.javaEnabled(),
        language: window.navigator.language,
        colorDepth: window.screen.colorDepth,
        screenHeight: window.screen.availHeight,
        screenWidth: window.screen.availWidth,
        timeZoneOffset: window.navigator.timeZoneOffset,
        userAgent: window.navigator.userAgent,
        javascriptEnabled: true,
      }
      console.log('browserInfo', browserInfo);

      const urlParams = new URLSearchParams(window.location.search);

      if (urlParams.has('redirectUrl')) {
        const redirectUrl = new URL(urlParams.get('redirectUrl'));
        Object.entries(browserInfo).forEach(([key, value]) => {
          redirectUrl.searchParams.append(key, value);
        });
        document.location = redirectUrl.toString();
      }
    </script>
  </body>
</html>

Expo 应用重定向抓取

在世博会上，你有两件事要做：

启动事件侦听器以获取重定向
打开一个WebBrowser实例到上一个公共页面

例子：

import React, { FC, useCallback } from 'react';
import * as Linking from 'expo-linking';
import * as WebBrowser from 'expo-web-browser';
import * as queryString from 'query-string';
import {
  Button,
} from '@kidways/apps-components';
import {
  ButtonProps,
  View,
} from 'react-native';
import { useFocusEffect } from '@react-navigation/native';

const App: FC = () => {
  const urlEventHandler = (event) => {
    const parsedUrl = queryString.parseUrl(event.url);
    const path = parsedUrl.url.split('/--/')[1];

    if (
      path === 'browser-info'
    ) {
      // At this point, you have all the needed information.
      console.log('browser-info', parsedUrl.query);
    }
  };

  useFocusEffect(
    useCallback(() => {
      Linking.addEventListener('url', urlEventHandler);

      return () => Linking.removeEventListener('url', urlEventHandler);
    }, []),
  );

  const handleBrowserInfoTest: ButtonProps['onPress'] = () => {
    WebBrowser.openBrowserAsync(
      'https://your.domain/browser.html?redirectUrl='
      + Linking.createURL('browser-info')
    );
  }

  return (
    <View>
      <Button
        title="Browser Info"
        onPress={handleBrowserInfoTest}
      />
    </View>
  );
};

使用此代码，您只需按下按钮即可获取浏览器信息。

这个方案并不理想，因为要打开用户浏览器来实现，但恐怕目前没有其他办法。

【讨论】：