@gucho-n (ぐちょーん谷口)posted at 2022-12-14

[[PromiseResult]]の結果を取得したい

Q&A

現在AUTH２．０の実装を行なっています。
やりたいこととしては

let CODE_CHALLENGE = generateCodeChallengeFromVerifier(CODE_VERIFIER)
console.log(CODE_CHALLENGE)

↓こちらのPromiseResultのハッシュ値を

以下のソースコードの通りcode_challenge : CODE_CHALLENGE,//ここのcode_challengeに作成したハッシュ値を格納したいです。

export const getRsiAuthorizeParams = () => {
        CODE_CHALLENGE.then((e)=>{    
        return {
            client_id : CLIENT_ID,
            scope : 'offline_access aut:me:read aut:tenant:read',
            redirect_uri : REDIRECT_URL,
            response_type : 'code',
            code_challenge : CODE_CHALLENGE,//ここのcode_challengeに作成したハッシュ値を格納したい
            code_challenge_method : 'S256',
            response_mode : 'fragment'
        }
        }) 
}

試したこと

1.then以降のコールバック内のvalueをCODE_CHALLENGEに返却してみる

let CODE_CHALLENGE = generateCodeChallengeFromVerifier(CODE_VERIFIER).then(function(value){
    console.log(value)
    return value
})

console.log(CODE_CHALLENGE)

こうすると、console内では正しい結果が返せるが
返却されるのがPromise本体そのものである、、

2.いっそのこと、getRsiAuthorizeParams内に.thenを加えてみる

export const getRsiAuthorizeParams = () => {
    generateCodeChallengeFromVerifier(CODE_VERIFIER).then((value)=>{    
        return {
            client_id : CLIENT_ID,
            scope : 'offline_access aut:me:read aut:tenant:read',
            redirect_uri : REDIRECT_URL,
            response_type : 'code',
            code_challenge : value,
            code_challenge_method : 'S256',
            response_mode : 'fragment'
        }
    }) 
}

こうすれば、then.内のスコープであればいけるかなと思ったのですが
ここのreturnが、promiseを返却していたのでダメ、、

あとはasync,awaitを使ったりしてみましたが、やはりだめでした、、、

ご助言いただけるとありがたいです。よろしくお願いいたします。

3Answer

@ktz_alias posted at 2022-12-14

あとはasync,awaitを使ったりしてみましたが、やはりだめでした、、、

どんなコード書いたのか記載されてないので分からないけど

let CODE_CHALLENGE = await generateCodeChallengeFromVerifier(CODE_VERIFIER)
console.log(CODE_CHALLENGE)

とすれば、CODE_CHALLENGE変数に結果が代入されると思うよ。

試しに

function generateCodeChallengeFromVerifier(x) { 
    return Promise.resolve("qwerty") 
}

なモック関数用意して

let CODE_CHALLENGE = await generateCodeChallengeFromVerifier("abc")
console.log(CODE_CHALLENGE)

と呼んだら、期待通りの値(qwerty)になった。

1Like

@Verclene posted at 2022-12-14

やろうとしている具体的な内容までは保証しませんが,少なくともawaitした結果を待ってそれを返さなければならないので,getRsiAuthorizeParamsは(generateCodeChallengeFromVerifierと同様に)asyncでなければなりません.

簡単に書くならこんな感じになるかと思います¹.
よほど複雑なことをしようとしない限りasync/awaitとtry/catchで十分です.

export const getRsiAuthorizeParams = async () => {
    const value = await generateCodeChallengeFromVerifier(CODE_VERIFIER)
    return {
        client_id : CLIENT_ID,
        scope : 'offline_access aut:me:read aut:tenant:read',
        redirect_uri : REDIRECT_URL,
        response_type : 'code',
        code_challenge : value,
        code_challenge_method : 'S256',
        response_mode : 'fragment'
    } 
}

Promiseを返す場合は,resolveに自分の使いたいデータを渡すように記述します.

export const getRsiAuthorizeParams = () => {
    return new Promise((resolve, reject) => {
        generateCodeChallengeFromVerifier(CODE_VERIFIER).then(value=>{    
            resolve({
                client_id : CLIENT_ID,
                scope : 'offline_access aut:me:read aut:tenant:read',
                redirect_uri : REDIRECT_URL,
                response_type : 'code',
                code_challenge : value,
                code_challenge_method : 'S256',
                response_mode : 'fragment'
            })
        })
    })
}

returnで返る値が明白になるので,可能ならasyncで記述することを推奨しますが,Typescriptでの型定義はPromise<T>のままであることに注意してください. ↩

1Like

@gucho-n posted at 2022-12-15

今回ご返答いただいたお二方、
お時間を頂戴しまして誠にありがとうございます。
おかげさまで期待していた値を取得することができました。
私としてresolve内で返却した値はどうにかすればグローバルに使えるものだと誤認識しておりました。
エクスポートする関数を関数式に書き換え、それに対してのasyncを書けてあげるという方法は、私のレベルでは思いつきませんでした。
これからPromiseを勉強しなおすモチベーションになりました。
改めてありがとうございました。

0Like

Are you sure you want to delete the question?

[[PromiseResult]]の結果を取得したい

試したこと

3Answer

Your answer might help someone💌