Редактировать - добро пожаловать в ТАК! Будь милым здесь и помоги другим людям.
Чтобы быть милыми, вот несколько советов и решение для вашего задания. Но, пожалуйста, пожалуйста, пожалуйста - не просто копируйте это, изучите, как это работает, продумайте это, примените это к своему собственному приложению реакции.
Прежде всего, так как identityserver имеет очень хорошую документацию на https://identityserver4.readthedocs.io/ - он очень ориентирован на код и с ним может быть трудно начать.
Итак, взгляните на auth0, конкурентный коммерческий продукт. У них также есть довольно хорошие документы, и они также объясняют некоторые протоколы.
https://auth0.com/docs/protocols/oauth2
https://auth0.com/docs/flows/concepts/auth-code-pkce
Это представляет особый интерес.
Теперь у них также есть сценарии, подобные тому, который вам нужно реализовать. Вы можете подумать, что это так: https://auth0.com/docs/architecture-scenarios/spa-api но они немного отстают в новых правилах (но, к счастью, это не ваше назначение), что SPA также должны использовать поток кода с PKCE, так что вам лучше с этим : https://auth0.com/docs/architecture-scenarios/mobile-api
(подробнее о том, почему это лучше, здесь: https://brockallen.com/2019/01/03/the-state-of-the-implicit-flow-in-oauth2/)
Прочитав все это, вам нужно найти хорошую библиотеку JS, которая сделает oidc / oauth для вас. Не стоит писать в школе самостоятельно, если вы не собираетесь получить степень доктора наук.
Google javascript oidc -> https://github.com/IdentityModel/oidc-client-js. Привет! Это снова те парни из сервера удостоверений. Они замечательные люди, не так ли? Они, конечно, получили вашу спину.
Теперь гугл отреагирует oidc-client-js - ну разве это не хорошо, кто-то побил вас этим: https://github.com/skoruba/react-oidc-client-js
Это должно начать вас. Как я уже сказал, пожалуйста, не заставляйте меня сожалеть об этом и потратьте время и время, чтобы на самом деле изучить этот материал. Позже это может привести к интересному направлению работы: -)