React-native/AWS API 게이트웨이 안드로이드 문제

Question

aws api gateway와 함께 react-native를 사용하려고합니다. 동일한 코드 (순수한 JS)는 ios에서 훌륭하게 작동하지만 안드로이드에서는 403 오류로 실패합니다.

그것이 실패 안드로이드에, 그러나, HTTP 응답 (200)을 수신 아이폰 OS에

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) 

:.

"우리가 계산 요청 서명을 제공 한 서명과 일치하지 않습니다 확인하여 AWS 비밀 액세스 키와 서명 방법. 나뿐만 아니라 Axios의를 시도

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' 
" 

. 자세한 내용은 서비스 설명서를 참조하십시오.와 같은 결과. (IOS는 잘 작동, 안드로이드 실패) 내가 반응 네이티브 사용하고 0.42.3.

누구든지 문제가 무엇인지 알 수 있습니까?

Answer 1

많은 부분을 파고 나면 문제는 여기에 설명 된 것과 관련되어 나타납니다 : https://github.com/facebook/react-native/issues/14445. 안드로이드 okHttp 라이브러리 (inernally 반응 네이티브에 의해 사용) 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 증폭 라이브러리 (https://github.com/aws/aws-amplify가) API 게이트웨이에 자동 서명을 지원한다.

: 당신은 API를 구성 할 수 있습니다 그 후 https://github.com/aws/aws-amplify/blob/master/media/quick_start.md#react-native-development

:

npm install aws-amplify-react-native 

그런 다음 프로젝트를 링크 : https://github.com/aws/aws-amplify/blob/master/media/api_guide.md

당신은 먼저이 기본 NPM 모듈 반응 설치합니다 :이 API 모듈의 일부입니다

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