Google 身份验证后的 React-Native 网络请求未携带身份验证 cookie答案

【问题标题】：React-Native network requests after Google authentication not carrying authentication cookieGoogle 身份验证后的 React-Native 网络请求未携带身份验证 cookie
【发布时间】：2016-08-15 21:57:18
【问题描述】：

我正在将我的 iOS 应用从 Cordova 迁移到 React-Native。我有一个 App Engine 后端并在应用程序中使用 Google 身份验证。使用cordova，用户只需使用webview登录他们的谷歌账户，这将删除一个cookie，然后他们可以访问他们的数据，如下所示：

function getSomeResource(callback_method)
{
     $.ajax({ 
    type: "GET",
    url: 'https://myapp.appspot.com' + '/endpoint',
    dataType: "jsonp",
    cache: true,
    xhrFields: {
      withCredentials: true
    },
    success: function(result) 
        {
            callback_method(result);
        },
    error: function(fail)
      {
         console.log(fail)
      }
    });
}

对于 React-Native，我使用的是 https://github.com/apptailor/react-native-google-signin 插件。身份验证的工作原理如下：

用户使用 google 链接点击身份验证
Safari 打开
用户验证
返回我的应用程序

当调用以下函数时

const user = GoogleSignin.currentUser();

提供了一个用户对象。

但是，当使用以下 RN 网络请求时，似乎没有存储任何身份验证 cookie，因此对 App Engine 后端的后续请求无法识别用户已登录

fetch('https://myapp.appspot.com' + '/endpoint', {
  method: 'GET',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    'Access-Control-Allow-Credentials' : 'true'
  }
})
.then((response) => response.text())
.then((responseText) => {
  var responseObject = JSON.parse(responseText);
  console.log(responseObject);
});

问题是我是否有任何方法可以获取 cookie（就像我们使用 Cordova 所做的那样），以便我可以使用它来针对 GAE 后端对用户进行身份验证？

【问题讨论】：

标签： ios google-app-engine react-native google-oauth google-authentication

【解决方案1】：

抱歉，我无法发表评论。（我把这个贴在Facebook RN group）

想感谢Dan的回答，帮了大忙！如果有效，我也会发布更新。

【讨论】：

【解决方案2】：

正如Facebook RN group 中有人所说，您可以使用react-native-cookie 库来处理这个问题。但是，我真的认为您应该重新考虑使用基于 cookie 的身份验证，并改用基于令牌的身份验证。

基于 Cookie 的身份验证实际上只适用于 Web 应用程序。这对于 Cordova 应用程序来说很好，因为整个应用程序都在 WebView 中，但是，在使用 React Native 时，您需要改变对应用程序的看法。您应该将 RN 应用视为有效的原生应用，用 JS 编写。

GoogleSignin.currentUser() 返回的对象包含一个 serverAuthCode 参数，假设您正确配置它 (see the note here)。您可以使用它来获取用户的访问令牌。这是一些未经测试的代码：

function getTokenForUser(user) {
  var formData = new FormData();
  formData.set("grant_type", "authorization_code");
  formData.set("client_id", "{clientId}");
  formData.set("client_secret", "{clientSecret}");
  formData.set("redirect_uri","");
  formData.set("code", user.serverAuthCode);

  return fetch('https://www.googleapis.com/oauth2/v4/token', {
    method: 'POST',
    body: formData,
  }).then((response) => response.json())
}

这将返回一个用令牌对象解析的承诺。示例：

{
  "expires_in": 3600,
  "token_type": "Bearer",
  "refresh_token": "...",
  "id_token": "...",
  "access_token": "..."
}

然后您可以使用它来发出您需要的请求。

【讨论】：