programing

AWS Cognito UI는 콜백 페이지를 호출할 때 해시를 사용하여 파라미터를 포함합니다.

randomtip 2022. 9. 13. 21:55
반응형

AWS Cognito UI는 콜백 페이지를 호출할 때 해시를 사용하여 파라미터를 포함합니다.

AWS Cognito 제공 UI에 문제가 있습니다.

제공된 UI를 사용하려고 할 때 입력된 URL을 사용하여 엔드포인트를 호출합니다.

https://mydomain.auth.ap-northeast-1.amazoncognito.com/login?response_type=token&client_id=123456789&redirect_uri=http://localhost:3000/콜백/

여기서 문제는 인증 후 Cognito가 #을 사용하여 필요한 파라미터를 반송한다는 것입니다.결과는 다음과 같습니다.

http://localhost:3000/callback/#id_token=eyJragIsm2PqVpw&access_token=eyJraWQiOiJ&expires_in=3600&token_type=EyJ&expires

콜백 페이지(vue 앱)에서 id_token과 access_token을 읽을 수 없습니다.

일반적인 물음표(?)를 사용하여 쿼리 문자열을 전달하도록 Cognito를 설정하려면 어떻게 해야 합니까?또는 How can I read passed parameters after hash (#)?

이에 대한 조언에 감사드립니다.

Vue.js 라우터를 사용하고 있는 경우는, 실제로 해시 부분을 처리하는 것은 매우 간단합니다.컴포넌트 어딘가에 이 스니펫을 삽입해 주세요.레퍼런스: https://router.vuejs.org/api/ #the-route-object

let cognitoData = {}
if (this.$route.hash !== "") {
    let elementsString = decodeURIComponent(
        this.$route.hash.substr(1, this.$route.hash.length)
    );
    let params = elementsString.split("&");
    for (let param of params) {
        let values = param.split("=");
        cognitoData[values[0]] = values[1];
    }
}

// do your business with cognitoData

언급URL : https://stackoverflow.com/questions/51879164/aws-cognito-ui-uses-a-hash-to-include-parameters-when-it-calls-the-callback-page

반응형