React-native/AWS API Gateway android issue

Question

aws api gatewayとreact-nativeを使用しようとしています。同じコード（純粋なJS）はiosでうまくいきますが、アンドロイドでは403エラーで失敗します。 iOSの上で

var signedRequest={ 
    "headers": { 
    "Content-Type": "application/json", 
    "Accept": "application/json", 
    "x-amz-date": "20170918T134411Z", 
    "Authorization": "AWS4-HMAC-SHA256 Credential=ASIAIBC7RQ7MFUIRO7QQ/20170918/ap-northeast-1/execute-api/aws4_request, SignedHeaders=accept;content-type;host;x-amz-date, Signature=9fb6d4d4820024097f25aaa70648fxxx7a54a2db1a67d173189693dc073d0a0bac8", 
    "x-amz-security-token": "AgoGb3JpZ2luEKn////////xxxG1iKJBHjjvZH0DxcSqE889Wb3Mv+8PwMqrRe/O5dFFmP+9bQj+fSwVIUvmBplKkQB62x/xTelGHoCEOPXpBWLjT2OAUaBXOti7UZyfyMNgg56/Z58yxk4o2/37xPLbhXfODaL8kydFV8IaPJjdbJIX+a0kXycPLBnVIBdukUp9cMVD27mWN41u3w0VP5J8YiMPzrDnwKtb0U37naoIaknMBqNBDkMGQyHal/TBJ3wjJvJWVntrJvex0QKD8rDLHjaoiIYjBd+a04m2pKsBQJ9WQl02TTCPgRp0bb1oARF2hz0Xpi45Ba6a6E9SAL07UcRShTwX6rmxi0dZ38mkSbBMjI45Xg8r/VaRZx6/OyCq3u+nq4bgLCOMKqb/80F" 
    }, 
    "data": "{\"data\":{\"func\":\"checkIfFacebookSignupComplete\",\"data\":{}}}", 
    "method": "POST", 
    "url": "https://xxx.execute-api.ap-northeast-1.amazonaws.com/dev/user/user" 
} 

var apiResponse=await fetch(signedRequest.url, { 

    method: signedRequest.method, 
    body: signedRequest.data, 
    headers: signedRequest.headers, 

}) 
console.log("Got api response : ", apiResponse) 

それがで失敗アンドロイド上で、しかし、HTTPレスポンス200を受信します。

我々は計算された「リクエストの署名はあなたが提供する署名と一致していない、あなたのAWS秘密アクセスキーと署名を確認してください。方法。詳細については、サービスマニュアルを参照してください。

The Canonical String for this request should have been 
'POST 
/dev/user/user 

accept:application/json 
content-type:application/json; charset=utf-8 
host:uihw7hnkn7.execute-api.ap-northeast-1.amazonaws.com 
x-amz-date:20170918T134411Z 

accept;content-type;host;x-amz-date 
6b83b80f2875c2425c28b258886ad98603fd802095e35303a3c2a72528374fb5' 

The String-to-Sign should have been 
'AWS4-HMAC-SHA256 
20170918T134411Z 
20170918/ap-northeast-1/execute-api/aws4_request 
008853cdfba53255257d9169e1a9c05500d01299da9efd4695ac8c66cb31e5e7' 
" 

私もaxiosを試してみました。そして、同じ結果している。（IOSは、Androidが失敗し、正常に動作します）私が反応し、ネイティブ0.42.3を使用しています。

誰かが問題の原因を知りましたか？

Answer 1

多くの掘削の後、問題はここに記載されているように関連しているようです：https://github.com/facebook/react-native/issues/14445。 android okHttpライブラリ（反応的にネイティブで使用されています）charset = utf = 8をリクエストに追加しました。だから、解決策は次のようにヘッダーとSIG4値を計算することである。

var signedRequest={ 
    "headers": { 
    "Content-Type": "pplication/json; charset=utf-8", 
    "Accept": "application/json", 
    "x-amz-date": "20170918T134411Z", 
    "Authorization": "Calculated sig4 auth", 
    "x-amz-security-token": "AgoGb3JpZ2luEKn////////xxxG1iKJBHjjvZH0DxcSqE889Wb3Mv+8PwMqrRe/O5dFFmP+9bQj+fSwVIUvmBplKkQB62x/xTelGHoCEOPXpBWLjT2OAUaBXOti7UZyfyMNgg56/Z58yxk4o2/37xPLbhXfODaL8kydFV8IaPJjdbJIX+a0kXycPLBnVIBdukUp9cMVD27mWN41u3w0VP5J8YiMPzrDnwKtb0U37naoIaknMBqNBDkMGQyHal/TBJ3wjJvJWVntrJvex0QKD8rDLHjaoiIYjBd+a04m2pKsBQJ9WQl02TTCPgRp0bb1oARF2hz0Xpi45Ba6a6E9SAL07UcRShTwX6rmxi0dZ38mkSbBMjI45Xg8r/VaRZx6/OyCq3u+nq4bgLCOMKqb/80F" 
    }, 
    "data": "{\"data\":{\"func\":\"checkIfFacebookSignupComplete\",\"data\":{}}}", 
    "method": "POST", 
    "url": "https://xxx.execute-api.ap-northeast-1.amazonaws.com/dev/user/user" 
} 

Answer 2

公式AWSレポに新しいAWS Amplifyソフトウェアライブラリ（https://github.com/aws/aws-amplifyが）APIゲートウェイへの自動署名をサポートしています。このAPIモジュールの一部です：あなたが最初のインクルードは、ネイティブNPMモジュールに反応インストールしますhttps://github.com/aws/aws-amplify/blob/master/media/api_guide.md

：あなたはAPIを構成することができた後https://github.com/aws/aws-amplify/blob/master/media/quick_start.md#react-native-development

：

npm install aws-amplify-react-native 

は、次にプロジェクトをリンク

import Amplify, { API } from 'aws-amplify'; 
Amplify.configure(
    Auth: { 
     identityPoolId: 'XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab',  //REQUIRED - Amazon Cognito Identity Pool ID 
     region: 'XX-XXXX-X', // REQUIRED - Amazon Cognito Region 
     userPoolId: 'XX-XXXX-X_abcd1234', //OPTIONAL - Amazon Cognito User Pool ID 
     userPoolWebClientId: 'XX-XXXX-X_abcd1234', //OPTIONAL - Amazon Cognito Web Client ID 
    }, 
    API: { 
     endpoints: [ 
      { 
       name: "ApiName1", 
       endpoint: "https://1234567890-abcdefgh.amazonaws.com" 
      }, 
      { 
       name: "ApiName2", 
       endpoint: "https://1234567890-abcdefghijkl.amazonaws.com" 
      } 
     ] 
    } 
}); 

次に、ユーザーの資格情報を使用してAPIゲートウェイ要求が署名されています。

let apiName = 'MyApiName'; 
let path = '/path'; 
let myInit = { // OPTIONAL 
    headers: {} // OPTIONAL 
} 
API.get(apiName, path, myInit).then(response => { 
    // Add your code here 
});