Реализация предоставления кода авторизации OAuth 2.0 в Angular

Question

Мы должны интегрировать предоставление кода авторизации OAuth 2.0 в мой клиентский проект.В настоящее время приложение использует собственную страницу входа.Нам нужно удалить страницу и перенаправить не авторизованных пользователей на страницу авторизации AS, https://as.com/as/authorization.oauth2?client_id=UoM&response_type=code.После успешного входа в систему в конце AS мы перенаправлены на настроенный redirect_uri.На этом этапе, как мое клиентское приложение узнает, что пользователь вошел в систему в AS?Как я могу поддерживать сеанс на стороне клиента?Кроме того, мне нужно обменяться кодом авторизации и получить доступ к токену и использовать его для последующих вызовов API сервера.Так как я могу добиться этого и отправить токен в качестве заголовка?

Приложение написано на Angular 4. Я никогда раньше не работал над клиентскими проектами, поэтому путаница.

Мне просто нужнократкие указания / фрагменты кода о том, как это сделать.

Answer 1

Вы можете использовать эту библиотеку для реализации входа OAuth2 / OpenID Connect на вашем сайте.

Неявный поток грантов не должен использоваться SPA, подробнее здесь .

Стандарт OAuth2 - это структура авторизации, которая не имеет состояния.Это означает, что каждый раз, когда вы хотите получить доступ к ресурсу с сервера ресурсов, вам необходимо предоставить действительный токен доступа - он должен предоставляться в виде заголовка «Авторизация».Токен доступа является недолгим токеном.Основная причина этого заключается в том, что даже если токен был украден во время соединения, злоумышленник не сможет использовать его в будущем.Также есть токен обновления.Этот вид токенов позволяет получать токены доступа без повторного отображения страницы входа в систему до истечения срока ее действия.

Answer 2

Я не эксперт в этой области, но я постараюсь помочь вам как можно лучше.

Не совсем уверен, но я думаю, что для приложения Angular (или любого другого SPA)Вы должны использовать Поток неявного предоставления .

Как я могу поддерживать сеанс на стороне клиента

Сеть не имеет состояния, поэтому нетдействительно сеанс.Когда вы работаете с токенами (например, JWT), вы должны обновить их до истечения срока их действия.

Мне нужно обменяться кодом авторизации и получить доступ к токену и использовать его для последующих вызовов API сервера.Итак, как мне этого добиться и отправить токен в качестве заголовка?

Вы должны вызывать защищенные ресурсы API с токеном доступа.Вы можете использовать перехватчик для размещения заголовка аутентификации (например, JWT) при выполнении http-вызовов вашего API.

Вот прекрасный пример того, как вы можете реализовать это здесь: https://auth0.com/docs/quickstart/spa/angular2/01-login#configure-auth0