Auth0 и angular2: как установить callbackURL и поймать токен?

Question

Я пытаюсь реализовать аутентификацию без пароля Auth0 и angular2 (2.0.0-rc.6), используя angular2-webpack-starter и auth0-lock-passwordless.

в форме отображается нормально, и для проверки подлинности электронной почты отправляется с помощью этого кода:

this.lock.magiclink({ 
    callbackURL:"http://localhost:3000/#/sandbox" 
    }); 

происходят вопросы после я нажимаю волшебную ссылку в сообщение электронной почты:

• Несмотря на то, что redirect_uri магического соединения кажется правильным (redirect_uri = http% 3A% 2F% 2Flocalhost% 3A3000% 2F% 23% 2Fsandbox), он игнорируется;

• Вместо этого, после успешного входа в систему (проверено в журналах Auth0), URL-адрес в адресной строке есть (кратко): http://localhost:3000/#access_token=xxxxxxxxxx&id_token=yyyyyyyyy&email=myemail@emails.com (обратите внимание на # вместо ожидаемого знака вопроса)

• затем (после второй или около того) он перенаправляет: http://localhost:3000/#/access_token

---

Мои вопросы:

1. Как получить Auth0 на самом деле перенаправление на callbackURL?
2. Как я могу поймать токен с новым маршрутизатором с угловым2, хотя ури ошибочно? (Знак вопроса отсутствует перед запросом)

Answer 1

После долгих изо всех сил, я нашел обходной путь.

TL; DR; используйте PathLocationStrategy (HTML 5 pushState), а не стиль «хэш-URL».

---

Ниже Allowed logout URLs и Allowed origins в консоли Auth0 (клиенты настройки), указано:

Обратите внимание, что querystrings и информация хэш не учитываются при проверке этих URL-адресов.

Так что я полагал, что это может относиться и к Allowed Callback URLs, даже если оно не указано.

Это объясняет, почему callbackURL игнорируется.

---

Трюк заключается в том, чтобы избавиться от хеша (#) в URL-адресах; хеш по умолчанию LocationStrategy в Angular2 Webpack Starter.

Чтобы сделать это, в app.modules.ts, изменить RouterModule.forRoot(ROUTES, { useHash: true }) к RouterModule.forRoot(ROUTES, { useHash: false })

---

Хотя это должно было сработать, я наткнулся на еще один вопрос: когда вы перезагрузите страницу, она дает пустую страницу со следующим сообщением :

<% if (webpackConfig.htmlElements.headTags) { %> 

После небольшого Googling, я нашел fix in this page.

Исправление для удаления Carret (^) в "WebPack-DEV-сервер": "^ 2.1.0-beta.2" (devDependencies, package.json) и установите пакет:

• заменить "^ 2.1.0-beta.2" на "2.1.0-beta.2"

затем в консоли/терминале введите: npm install webpack-dev-server

---

Теперь я должен был сделать так, чтобы обновить callbackURL так :

this.lock.magiclink({ 
    callbackURL:"http://localhost:3000/sandbox" 
}); 

И Разрешенные Callback URL-Auth0 клиенты настройки вставить:

http://localhost:3000/sandbox 

и сохранить.

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

http://localhost:3000/sandbox#access_token=xxxxxxxxxxx&id_token=yyyyyyyyyyy&token_type=Bearer 

и он остается там, как положено. Захват и сохранение токена теперь должны быть тривиальными ...