带有 Expo 的 React Native Mobile 应用程序中的 Cookie 问题答案

【问题标题】：Cookies issues in React Native Mobile app with Expo带有 Expo 的 React Native Mobile 应用程序中的 Cookie 问题
【发布时间】：2022-01-11 14:12:29
【问题描述】：

我正在创建这个 Native Mobile 应用程序，它基本上是在 Webviews 中托管一个 Web 应用程序，我的任务是在 Native 中构建登录页面，因为客户想要使用生物识别登录。问题是我能够创建登录页面设置路由并向登录端点发出请求。问题是登录请求将身份验证作为 cookie 返回。

async function login(event) {
const response = await fetch(`https://xxxxx.xxxx.xx.xxx/api/v1/login.json`, {
  method: 'POST',
  headers: {
      'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    username: userName,
    password: password,
    remember_device: true,
    workgroup_code: 'XXXX',
    accessor_id: null,
    origin: 'xxx'
  })
});
if (response.ok) {
  const data = await response.json();
  // console.log(JSON.stringify(data));
  authObj = data;
  if (authObj.restrictions.find(x => x === 'verify_device')) {
    navigation.navigate('Device');
  }
} else {
  alert(`Bad username or password.
  Need help logging in?
  Call X-XXX-XXX-XXXX`);
}

}

如您所见，有时我需要将成功登录发送到在 webview 中加载 Web App 的验证屏幕：

<WebView 
  javaScriptEnabled={true}
  style={styles.container}
  source={{ uri: 'https://xxxx-staging.xxx.com/#/login/restriction/verify_device' }}
  sharedCookiesEnabled={true}
  injectedJavaScriptBeforeContentLoaded={runFirst}
  injectedJavaScript={runLast}
  onMessage={(event) => {
    console.log('event: ', event);
  }}
/>

runFirst 在本地存储中设置一些可以正常工作的值：

const runFirst = `
window.localStorage.setItem('workgroup_code', ${authObj.workgroup_code});
window.localStorage.setItem('accessor_id', ${authObj.mpv_device_id});
true; // note: this is required, or you'll sometimes get silent failures

而runLast 只是我测试的一些示例代码：

const runLast = `
alert('Me');
alert(window.document.cookies);
true;

问题是要让 Webview 中的这个页面正常工作，它需要有一组像这样的 cookie：

上面login请求中的_xxx_web_session_staging，如何将请求cookie传递到Webview页面？？

所以你知道我尝试过 CookieManager，但我找不到让它在我的 Expo 应用程序中工作的方法，也不知道如何将值传递给 WebView。

你也可以看到我正在使用sharedCookiesEnabled={true} 我不知道我是否遗漏了什么。

我非常感谢您对此提供任何帮助或建议。

【问题讨论】：

标签： javascript react-native expo

【解决方案1】：

我通过解析获取请求的响应解决了这个问题：

    loginCookie = JSON.stringify(response.headers.map['set-cookie']);
and then setting the cookie value manually:

const runFirst = `
    window.document.cookie = ${loginCookie};
    true; // note: this is required, or you'll sometimes get silent failures
  `;

【讨论】：