Question

我正在将我的iOS应用程序从Cordova迁移到React-Native。我有一个App Engine后端，并在应用程序中使用Google身份验证。使用cordova，用户只需使用webview登录他们的Google帐户，这将删除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插件。 auth的工作原理如下：

用户点击带有谷歌链接的身份验证
Safari打开
用户身份验证
返回我的应用

并且在调用以下函数时

const user = GoogleSignin.currentUser();

提供用户对象。

但是，似乎没有存储身份验证cookie，因此当使用以下RN网络请求时，对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后端的身份？

Answer 1

正如有人在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())
}

这将返回一个使用令牌对象解析的promise。例如：

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

然后，您可以使用它来提出所需的请求。

Answer 2

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

中发布了这个内容

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

Google身份验证未携带身份验证Cookie后，React-Native网络请求

2 个答案: