Comment implémenter oAuth avec PKCE pour l'intégration tierce dans React

Lors de l'implémentation d'oAuth pour l'intégration tierce, je suis tombé sur des informations qui n'étaient pas mises à jour depuis un bon moment. 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'ils peuvent ajouter votre site Web à la liste blanche, incroyable. Vous n'avez pas du tout besoin de backend

2. Si la liste blanche ne fonctionne pas, vous aurez peut-être besoin d'un backend pour fonctionner comme 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 un non-non de 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..

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!