Включение совместного использования ресурсов между источниками с Auth0 для аутентификации Angular2

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

Мой auth.service.ts класс:

export class AuthService {
  // Configure Auth0
  auth0 = new Auth0({
    domain: myConfig.domain,
    clientID: myConfig.clientID,
    callbackOnLocationHash: true,
    callbackURL: myConfig.callbackURL,
  });

  constructor(private router: Router) {
    var result = this.auth0.parseHash(window.location.hash);

    if (result && result.idToken) {
      localStorage.setItem('id_token', result.idToken);
      this.router.navigate(['/dashboard']);
    } else if (result && result.error) {
      alert('error: ' + result.error);
    }
  }

  public login(username: string, password: string) {
    this.auth0.login({
      connection: 'Username-Password-Authentication',
      responseType: 'token',
      email: username,
      password: password,
    }, function(err: any) { if (err) alert("something went wrong: " + err.message); });
  };
}

Я считаю, что мне нужно что-то добавить в заголовки, возможно: Access-Control-Allow-Origin: *.auth0.com*, но куда мне нужно добавить это и в каком формате это должно быть введено?

Полное сообщение об ошибке выглядит следующим образом:

Запросы между источниками заблокированы: та же политика происхождения запрещает чтение удаленного ресурса по адресу https://[mydomain]/usernamepassword/login . (Причина: заголовок CORS «Access-Control-Allow-Origin» отсутствует). Код состояния HTTP: 400.

В настоящее время я использую «облегченную» библиотеку/процесс сервера разработки Angular2.

Доменное имя было добавлено как в белый список обратного вызова, так и в белый список CORS с помощью панели управления Auth0 в следующем формате:

http://*.[mydomain]*

Я бы попытался добавить https://*.[mydomain]* в список и установить автоматическое перенаправление на https://, чтобы посмотреть, поможет ли это, но веб-сайт, похоже, не любит доступ через https и выдает следующую ошибку, когда я пытаюсь это сделать:

Безопасное соединение не удалось

Соединение с www.[mydomain]:3004 было прервано во время загрузки страницы.

Возможно, потому что у меня нет SSL-сертификата??


person Community    schedule 24.10.2016    source источник
comment
Что за сообщение об ошибке? Вы уверены, что ваш сервер настроен на ответ с заголовками CORS? Заголовок Access-Control-Allow-Origin — это то, что возвращается сервером, а не отправляется клиентом.   -  person Nitzan Tomer    schedule 24.10.2016
comment
@NitzanTomer, наверное, нет? Это просто Linode с Ubuntu 16.04 LTS, и я не сделал ничего конкретного для включения CORS, поэтому я думаю, что он не включен ...? На данный момент я использую облегченный серверный процесс из документации Angular2...   -  person    schedule 24.10.2016
comment
Возможный дубликат заголовка Setting Access-Control-Allow-Origin в режиме разработки Angular2   -  person msanford    schedule 24.10.2016


Ответы (2)


Ошибка, которую вы получаете, связана с API Auth0 (https://[mydomain]/usernamepassword/login), поэтому проблема не в том, что ваш сервер не возвращает соответствующие заголовки CORS, а в том, что сервер Auth0 из-за безопасности не разрешает запросы CORS если вы не настроите белый список источников.

Это означает, что если вы хотите взаимодействовать с API Auth0 из браузера, вам необходимо настроить его таким образом, чтобы он распознавал источник вашего клиентского приложения и добавлял необходимые заголовки CORS, чтобы заставить его работать.

Это можно сделать, добавив правильный источник в настройки Разрешенные источники (CORS), доступные в настройки клиентского приложения панели управления Auth0.

person João Angelo    schedule 24.10.2016
comment
Ах. Я пытался использовать Auth0, чтобы позволить пользователям веб-сайта создавать учетные записи пользователей, пока я занимаюсь внедрением надлежащего бэкэнда. Возможно, Auth0 не является правильным решением для этого? Очевидно, я не могу ожидать, что все пользователи изменят настройки своего клиентского браузера, чтобы войти на мой сайт и создать учетные записи... - person ; 24.10.2016
comment
Auth0 — идеальное решение, если вы хотите делегировать свою логику аутентификации/авторизации, чтобы вы могли сосредоточиться на бизнес-ценности ваших приложений. Об изменении: Это не пользовательские настройки браузера клиента; вам и только вам нужно обновить параметр Разрешенные источники (CORS) клиентского приложения в Панель аутентификации0. Также проверьте ссылку, которую я добавил в ответ. - person João Angelo; 24.10.2016
comment
Я убедился, что домен был добавлен в список CORS на панели управления Auth0, но все равно получаю ту же ошибку. Собираюсь просмотреть ссылку в вашем ответе, посмотреть, смогу ли я узнать что-нибудь еще оттуда. - person ; 24.10.2016
comment
да, это работает, но мы также должны указать номер порта. Например; localhost:4200 - person ankur agrawal; 30.10.2017

Для тех, у кого может возникнуть эта проблема, но он добавил свой URL-адрес в настройки CORS в настройках клиента, как предложил Жоао... убедитесь, что в вашей конфигурации используется правильный идентификатор клиента. Если вы копируете код из краткого руководства, по умолчанию используется идентификатор клиента «Приложение по умолчанию», поэтому вам необходимо изменить его на правильный идентификатор клиента, чтобы ваши настройки CORS вступили в силу.

person adamdabbracci    schedule 27.04.2017