PKCE対応のためのcode_challenge生成をフロントエンドで行いたい PKCE対応のためのコード生成をフロントエンド側で行う必要が出てきた sha256のハッシュ化やランダムな文字列生成のためのライブラリは世にたくさんあるが、外部ライブラリを利用しなくとも実装は可能であると分かった 具体的にはweb crypto APIというブラウザ内の機能を使う。その説明はこの記事が詳しい Web Crypto APIについて 紛らわしいのは、node.jsにもcyrptoというAPIが存在すること ここに私はひっかかった。node.jsのcryptoのAPIで実装を進めてしまっていた。node.jsなのでブラウザでは直接実行できない。実行するためにはBrowserify、streamifyというツールのインストールが必要になってしまう Bufferを使ったエンコード例の記事がweb上には多い
![【TypeScript】ブラウザの標準機能だけでPKCE認証のためのコード生成は実装できる - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/cde4ce3853e7e3baeb99143ebb75dc61a79d28ba/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUUzJTgwJTkwVHlwZVNjcmlwdCVFMyU4MCU5MSVFMyU4MyU5NiVFMyU4MyVBOSVFMyU4MiVBNiVFMyU4MiVCNiVFMyU4MSVBRSVFNiVBOCU5OSVFNiVCQSU5NiVFNiVBOSU5RiVFOCU4MyVCRCVFMyU4MSVBMCVFMyU4MSU5MSVFMyU4MSVBN1BLQ0UlRTglQUElOEQlRTglQTglQkMlRTMlODElQUUlRTMlODElOUYlRTMlODIlODElRTMlODElQUUlRTMlODIlQjMlRTMlODMlQkMlRTMlODMlODklRTclOTQlOUYlRTYlODglOTAlRTMlODElQUYlRTUlQUUlOUYlRTglQTMlODUlRTMlODElQTclRTMlODElOEQlRTMlODIlOEImdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTQyYWYzNDcxODZkMzc0NGE1MjY5YWIwY2NhMGY3Mjhk%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTcxNiZ0eHQ9JTQwZGF0dHN1ODk5OSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTMyJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ODJmNDUwNTAyYjI1YzE1YTcyOGNiOGE0NDIwMGUyNGQ%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dbe46eb74ec81286b4a8aba37402ae08a)