3DS2 BrowserInfo 数据与 React Native 和 Expo
3DS2 BrowserInfo data with React Native and Expo
为了 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 检索这些信息?
我发现唯一可行的方法是多步骤过程。
Public网页
创建并托管 public 网页,执行以下操作:
- 获取浏览器信息到一个对象上
- 使用信息
重定向到给定的重定向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
实例到上一个 public 页面
示例:
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>
);
};
使用此代码,您只需按下按钮即可获取浏览器信息。
这个方案不太理想,因为用户打开浏览器可以实现,但目前恐怕没有其他办法。
为了 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 检索这些信息?
我发现唯一可行的方法是多步骤过程。
Public网页
创建并托管 public 网页,执行以下操作:
- 获取浏览器信息到一个对象上
- 使用信息 重定向到给定的重定向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
实例到上一个 public 页面
示例:
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>
);
};
使用此代码,您只需按下按钮即可获取浏览器信息。
这个方案不太理想,因为用户打开浏览器可以实现,但目前恐怕没有其他办法。