Lors de l'implémentation d'oAuth pour l'intégration tierce, je suis tombé sur des informations qui n'avaient pas été mises à jour depuis un certain temps. Ici, j'essaie de capturer mon expérience et comment cela fonctionne

Remarque : cet article ne parlera pas en détail d'oAuth et de son fonctionnement. Concentrez-vous principalement sur la façon de les configurer et de les implémenter dans l'application React. Si vous souhaitez en savoir plus sur oAuth, lisez ici. Fournit des informations claires comme du cristal.

Le flux :

En gros, le flux fonctionne comme décrit ci-dessus.

Alors, quel est le problème :

Habituellement, lorsque vous essayez d'obtenir le code et le code_verifier directement à partir d'un site Web tiers, vous pouvez rencontrer un problème CORS. Ceci est attendu.

Comment les résoudre ?

1. Vérifiez auprès d'un fournisseur tiers : s'il peut ajouter votre site Web à la liste blanche, c'est incroyable. Vous n'avez pas du tout besoin d'un backend

2. Si la liste blanche ne fonctionne pas, vous aurez peut-être besoin d'un backend pour fonctionner en tant que reverse_proxy pour vous. Dans notre cas, nous avons utilisé une simple configuration dactylographiée qui proxy notre appel et l'avons utilisé comme backend pour le proxy inverse. Vous pouvez également y parvenir avec la configuration de votre backend.

Pourquoi ça frappe CORS ?

Car très probablement, si vous utilisez PKCE, vous devez envoyer l'en-tête d'authentification avec votre demande, pour obtenir le jeton. L'authentification d'envoi est interdite dans l'interface utilisateur pour des raisons de sécurité.

CORs est une fonctionnalité intégrée aux navigateurs pour plus de sécurité. Il empêche tout site Web aléatoire d'utiliser vos cookies authentifiés pour envoyer une demande API au site Web de votre banque et effectuer des opérations telles que retirer de l'argent en secret.

Quelle bibliothèque ai-je utilisée pour le faire facilement en réaction ?

https://github.com/authts/react-oidc-context
? celui-ci. Cela fournit une configuration en tant que contexte et prend également en charge webstoragestatestore, ce qui est agréable à avoir.

Avez-vous d'autres questions ?

Répondez ici. J'aimerais volontiers aider si je peux :)

Bon codage..