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. uriが間違っていても、新しいangular2ルータでトークンをキャッチするにはどうすればよいですか？ （質問の前に疑問符がない）

Answer 1

多くの苦労の末、私は回避策を見つけました。

TL; DR; PathLocationStrategy（HTML 5 pushState）を使用し、 "ハッシュURL"スタイルは使用しないでください。 Allowed logout URLsとAllowed origins以下

---

Auth0コンソールで（クライアントの設定）、それが指定されています。これらのURLの検証時にクエリ文字列とハッシュ情報は考慮されないことを

注意してください。

したがって、指定されていなくてもAllowed Callback URLsに適用される可能性があります。

これは、なぜcallbackURLが無視されるのかを説明します。

---

トリックは、URLのハッシュ（＃）を取り除くことです。ハッシュ値はLocationStrategyでAngular2 Webpack Starterです。それが働いている必要がありますがapp.modules.tsで、RouterModule.forRoot(ROUTES, { useHash: true })

RouterModule.forRoot(ROUTES, { useHash: false })から

---

を変更する、ことを行うには

は、私はaccrossさらに別の問題が来た：あな​​たはページをリロードするとき、それは次のようなメッセージで空白のページを提供します：

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

ちょっとグーグルした後、私はfix in this pageを見つけました。

修正は "WebPACKの-devのサーバー" にcarret（^）を削除することです： "^ 2.1.0-beta.2"（devDependencies、package.json）、およびパッケージを再インストールしてください：

• コンソール/端末で、

その後、 "2.1.0-beta.2" で "^ 2.1.0-beta.2" を置き換える、タイプ：npm install webpack-dev-server

---

今、すべてのIそのようにcallbackURLを更新するだけでした：

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

そしてAuth0クライアントの設定可コールバックURLを、インサート内：

http://localhost:3000/sandbox 

とセーブ。

さて、ログイン成功（私は、電子メールでの魔法のリンクをクリック）した後、それは以下のURLでブラウザウィンドウを開きます：

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

とそれが必要として、それは、そこにとどまります。トークンをキャッチして保存するのは簡単です...