React でサードパーティ統合のために PKCE を使用して oAuth を実装する方法

サードパーティ統合のために oAuth を実装しているときに、しばらくの間更新されていない情報をいくつか見つけました。ここでは私の経験とそれがどのように機能するかを記録しようとしています

注: この記事では、oAuth とその仕組みについては詳しく説明しません。主に、反応アプリケーションでそれらを構成および実装する方法に焦点を当てます。 oAuth について知りたい場合は、ここをお読みください。非常に明確な情報を提供します。

流れ:

おおよその流れは上記の通りです。

それで、何が問題なのか:

通常、サードパーティの Web サイトからコードと code_verifier を直接取得しようとすると、CORS 問題が発生する可能性があります。これは予想通りです。

それらを解決するにはどうすればよいでしょうか?

1. サードパーティプロバイダーに確認してください - サードパーティプロバイダーがあなたの Web サイトをホワイトリストに登録できるのであれば、素晴らしいことです。バックエンドはまったく必要ありません

2. ホワイトリストが機能しない場合は、リバースプロキシとして機能するバックエンドが必要になる場合があります。私たちの場合、呼び出しをプロキシする単純な typescript セットアップを使用し、それをリバース プロキシのバックエンドとして使用しました。バックエンドの設定でもこれを実現できます。

なぜ CORS にヒットするのでしょうか?

おそらく、PKCE を使用する場合は、トークンを取得するためにリクエストとともに Authentication ヘッダーを送信する必要があります。セキュリティ上の理由から、UI から認証の送信は禁止されています。

COR は、セキュリティを強化するためにブラウザに組み込まれている機能です。これにより、ランダムな Web サイトが認証済み Cookie を使用して銀行の Web サイトに API リクエストを送信し、秘密裏にお金を引き出すなどの行為が行われるのを防ぎます。

React で簡単に実行するにはどのライブラリを使用すればよいでしょうか?

https://github.com/authts/react-oidc-context
?これです。これはコンテキストとして構成を提供し、あると便利な webstoragestatestore もサポートします。

他にご質問はありますか?

ここに返信してください。できれば喜んでお手伝いさせていただきます:)

コーディングを楽しんでください。

以上がReact でサードパーティ統合のために PKCE を使用して oAuth を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。