Google認証後に認証クッキーが返されないネイティブネットワークリクエスト

Question

iOSアプリをCordovaからReact-Nativeに移行しています。私はApp Engineのバックエンドを持っており、アプリでGoogleの認証を利用しています。コルドバでは、ユーザは単にWebViewのを使って自分のGoogleアカウントにログインします、これはクッキーをドロップするでしょうし、次のように彼らは、自分のデータにアクセスすることができます：

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) 
     } 
    }); 
} 

リアクトネイティブで、私はhttps://github.com/apptailor/react-native-google-signinプラグインを使用しています。次のように認証が動作します。

1. ユーザーは
2. ユーザーが自分のアプリケーション

とするときは、次の機能が

と呼ばれるに

戻り値を認証開き、Googleのリンク

サファリで認証をクリック

const user = GoogleSignin.currentUser(); 

ユーザーオブジェクトはprovです片面。

しかし、質問がかどうかあり、以下のRNのネットワーク要求

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); 
}); 

を使用した場合、ログインしたとして何の認証クッキーがユーザーを認識しないのApp Engineバックエンドのため、後続の要求を格納していないようです（私たちがCordovaを使用したように）私がクッキーを取得する方法は何ですか？これを使用してGAEバックエンドに対してユーザーを認証できますか？

Answer 1

誰かがFacebook RN groupで言ったように、react-native-cookieライブラリを使用してこれを処理できます。しかし、私は本当にあなたがクッキーベースの認証を使用して考え直すべきだと思って、代わりにトークンベースの認証を使用してください。

Cookieベースの認証は、実際にはWebアプリケーションにのみ適しています。これは、アプリ全体がWebViewにあるので、Cordovaアプリでは問題ありませんが、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": "..." 
} 

これを使用して、必要なリクエストを行うことができます。

Answer 2

申し訳ありませんが、私はコメントできません。 （私はこれをFacebook RN groupに掲載しました）

彼の答えはDanに感謝したくなりました。 私はそれがうまくいけば、アップデートを投稿します。