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日誌檢查）後，在地址欄中的網址是（簡述）： 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」樣式。

---

下面的Auth0控制檯（客戶端設置）Allowed logout URLs和Allowed origins，規定：

注意查詢字符串和哈希信息驗證這些URL時都沒有考慮到。

所以我想它可能也適用於Allowed Callback URLs，即使它沒有指定。

這可以解釋爲什麼callbackURL被忽略。

---

然後訣竅是擺脫網址中的散列（＃）;散列是Angular2 Webpack Starter中的默認LocationStrategy。

要做到這一點，在app.modules.ts，改變RouterModule.forRoot(ROUTES, { useHash: true })到RouterModule.forRoot(ROUTES, { useHash: false })

---

雖然它應該有工作，我就翻過另一個問題：當你重新加載頁面時，它給出了以下消息的空白頁：

<% 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

---

現在我必須要做的就是像這樣更新callbackURL ：

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

而且在Auth0客戶端設置允許回調的URL，插入：

http://localhost:3000/sandbox 

和保存。

現在，登錄成功後（當我點擊電子郵件中的鏈接魔術），它會打開一個瀏覽器窗口，以下網址：

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

，並在那裏停留，因爲它應該。捕捉和保存令牌現在應該是微不足道的...