So implementieren Sie oAuth mit PKCE für die Integration von Drittanbietern in React

Bei der Implementierung von oAuth für die Integration von Drittanbietern bin ich auf einige Informationen gestoßen, die eine ganze Weile nicht aktualisiert wurden. Hier versuche ich meine Erfahrungen und die Funktionsweise festzuhalten

Hinweis: In diesem Artikel wird nicht ausführlich auf oAuth und seine Funktionsweise eingegangen. Konzentrieren Sie sich hauptsächlich auf die Konfiguration und Implementierung in der Reaktionsanwendung. Wenn Sie mehr über oAuth erfahren möchten, lesen Sie hier. Bietet kristallklare Informationen.

Der Fluss:

Der Ablauf funktioniert ungefähr wie oben beschrieben.

Also, was ist das Problem:

Wenn Sie versuchen, den Code und den Codeverifier direkt von der Website eines Drittanbieters abzurufen, kann es normalerweise zu einem CORS-Problem kommen. Dies wird erwartet.

Wie kann man sie lösen?

1. Erkundigen Sie sich bei einem Drittanbieter – wenn dieser Ihre Website auf die Whitelist setzen kann, ist das erstaunlich. Sie benötigen überhaupt kein Backend

2. Wenn das Whitelisting nicht funktioniert, benötigen Sie möglicherweise ein Backend, das als Reverse_Proxy für Sie fungiert. In unserem Fall haben wir ein einfaches Typoskript-Setup verwendet, das unseren Aufruf weiterleitet und ihn als Backend für den Reverse-Proxy verwendet. Sie können dies auch mit Ihrem Backend-Setup erreichen.

Warum trifft es CORS?

Wenn Sie PKCE verwenden, müssen Sie höchstwahrscheinlich zusammen mit Ihrer Anfrage einen Authentifizierungsheader senden, um das Token zu erhalten. Das Senden einer Authentifizierung ist aus Sicherheitsgründen von der Benutzeroberfläche aus verboten.

CORs ist eine in Browser integrierte Funktion für zusätzliche Sicherheit. Es verhindert, dass eine beliebige Website Ihre authentifizierten Cookies verwendet, um eine API-Anfrage an die Website Ihrer Bank zu senden und Dinge wie heimlich Geld abzuheben.

Welche Bibliothek habe ich verwendet, um es in React einfach zu erledigen?

https://github.com/authts/react-oidc-context
? Dieses hier. Dies stellt die Konfiguration als Kontext bereit und unterstützt auch webstoragestatestore, was sehr praktisch ist.

Haben Sie weitere Fragen?

Hier antworten. Ich würde gerne helfen, wenn ich kann :)

Viel Spaß beim Codieren..

Das obige ist der detaillierte Inhalt vonSo implementieren Sie oAuth mit PKCE für die Integration von Drittanbietern in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!