Cognito не работает с Cloudfront Distribution со статическим хостингом S3

Я пытаюсь заставить свой веб-сайт S3, который находится за облачным дистрибутивом, работать с облачным фронтом. Если я тестирую свое приложение Angular локально, и у меня есть URL-адрес обратного вызова и URL-адрес выхода, установленные на localhost:4200 с косой чертой в конце

затем в моем приложении, когда я нажимаю «Войти», он переходит в пользовательский интерфейс Cognito Hosted и перенаправляет после входа в мое приложение, и я могу успешно пройти аутентификацию. Если я обновлю его до своего облачного дистрибутива

и развернуть мое угловое приложение с URL-адресом облачного фронта, тогда я получаю

https://<cognito_url>.us-east-1.amazoncognito.com/error?error=redirect_mismatch&client_id=<client_id> с 400 на вкладке сети.

Итак, вкратце, он работает локально с localhost: 4200, но не с URL-адресом Cloudfront. Что я делаю не так? Я ценю любую помощь!

кнопка входа в угловой

login() {
        window.location.href = `https://<cognito_url>.auth.us-east-1.amazoncognito.com/login?client_id=<client_id>&response_type=code&scope=email+openid+profile&redirect_uri=<cloudfront_url>.cloudfront.net/`;
    }

auth.service.ts

    Auth: {
        region: 'us-east-1',
        userPoolId: environment.cognitoUserPoolId,
        userPoolWebClientId: environment.cognitoAppClientId,
        mandatorySignIn: false,

        oauth: {
            domain: '<cognito_url>.auth.us-east-1.amazoncognito.com',
            scope: ['email', 'profile', 'openid'],
            redirectSignIn: 'https://<cloudfront_url>.cloudfront.net/',
            redirectSignOut: 'https://<cloudfront_url>.cloudfront.net/',
            responseType: 'code' 
        }
    }
});

@KevinHakanson Я обновил свой пост и удалил часть о перенаправлении на ведро s3, потому что на следующий день я попытался воссоздать облачный дистрибутив, применил новую политику ведра, чтобы указать на новый дистрибутив, обновил пользовательские страницы ошибок, и во второй раз это не помогло. показывать ведро s3 в перенаправлении при нажатии на вход из облака (не локально). Тем не менее, у него все еще есть та же самая ошибка несоответствия перенаправления, но отображение корзины s3 больше не имеет значения. Так что та же проблема все еще продолжается.

user6680 15.02.2023 00:06

В вашей локальной среде вы правильно перенаправляетесь на перенаправление и получаете код авторизации или его эквивалент. Однако код не перенаправляет вас правильно, когда доступ к вашему сайту осуществляется через облачный фронт?

Albert Marrero 15.02.2023 17:02
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
3
53
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам необходимо передать полный URI перенаправления (схема + домен + путь) при переходе к размещенному пользовательскому интерфейсу.

    login() {
        window.location.href = `https://<cognito_url>.auth.us-east-1.amazoncognito.com/login?client_id=<client_id>&response_type=code&scope=email+openid+profile&redirect_uri=https://<cloudfront_url>.cloudfront.net/`;
    }

По-видимому, я использовал старый URL-адрес облачного дистрибутива в своей ссылке для входа. Это странно, потому что я знаю, что пробовал ту же настройку с предыдущими дистрибутивами, которые я сделал, и это не сработало. После изменения URL-адреса распространения облака я обновил некоторые пользовательские страницы ошибок, чтобы перенаправить сайт, так что, возможно, это разница, но теперь у меня все работает. Я был очень сбит с толку, когда вы разместили ту же ссылку для входа, что и у меня, но это заставило меня очень внимательно посмотреть на нее, и я заметил неправильный URL-адрес облачного фронта в настоящее время. Я обновил его, и теперь он работает. Так что спасибо!

user6680 16.02.2023 01:01

Другие вопросы по теме