實現一個自定義的ember-simple-auth認證器

Question

首先，我不是一個經驗豐富的JS開發者，所以請原諒我可能犯的明顯錯誤。

我想實現一個自定義身份驗證器，用於使用OAuth2密碼授權對Keycloak進行身份驗證，該授權要求client_id作爲請求主體的一部分進行傳遞。

import OAuth2PasswordGrant from 'ember-simple-auth/authenticators/oauth2-password-grant'; 
export default OAuth2PasswordGrant.extend({ 
    serverTokenEndpoint: 'http://localhost:8080/something/token', 
    makeRequest(url, data, headers = {}) { 
    data.client_id = 'my-app'; 
    return this._super(url, data, headers); 
    } 
}); 

我有通過調用這個動作使用該驗證控制器：

actions: { 
    authenticate() { 
    let {username, password} = this.getProperties('username', 'password'); 
    this.get('session').authenticate('authenticator:oauth2', username, password).then(() => { 
     // Do something 
    }).catch((response) => { 
     // Show error 
    }); 
    } 
} 

這導致Firefox掛起，並給了我一個不響應腳本消息。

如果我從makeRequest()方法去除return，我可以從調用Keycloak實際上正確地包含了USB Key等對象返回瀏覽器調試器看不過燼檢查顯示與未解決的承諾，一些錯誤。但我想這是因爲我不再回復承諾。

我在做什麼錯在這裏？

如何解決無響應的腳本問題？

有沒有另外一種方法可以實現我的目標？

編輯1：這是當我刪除return

這裏是返回的實際對象：

{ 
"access_token":"eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICJTRUNSd09fMlZWdGhxUVBUWnFxNHlqX0tKekxnOElSTjBrQkx5UTlacklrIn0.eyJqdGkiOiI1NDgzZDdkMi0zMDdhLTQyZjItYWUxZC0xYTZjMTZjOTM2ZjAiLCJleHAiOjE1MDgzMzE5MjAsIm5iZiI6MCwiaWF0IjoxNTA4MzMxNjIwLCJpc3MiOiJodHRwOi8vbG9jYWxob3N0OjgwODAvYXV0aC9yZWFsbXMvc2Z4LWl0cmFuc2Zlci13ZWItYWdlbnQiLCJhdWQiOiJhZ2VudC13ZWItYXBwIiwic3ViIjoiMzZiMWY4OWMtNGYwMC00OTU1LWE0YzMtZWQ0NzZmZDU2OGM3IiwidHlwIjoiQmVhcmVyIiwiYXpwIjoiYWdlbnQtd2ViLWFwcCIsImF1dGhfdGltZSI6MCwic2Vzc2lvbl9zdGF0ZSI6IjQwODMxZWFhLTRmMmEtNDk2ZS05NDVkLTdiZWIxN2U0NmU0NCIsImFjciI6IjEiLCJhbGxvd2VkLW9yaWdpbnMiOlsiaHR0cDovL2xvY2FsaG9zdDo0MjAwIl0sInJlYWxtX2FjY2VzcyI6eyJyb2xlcyI6WyJ1bWFfYXV0aG9yaXphdGlvbiIsImJhY2stb2ZmaWNlLWFnZW50Il19LCJyZXNvdXJjZV9hY2Nlc3MiOnsiYWNjb3VudCI6eyJyb2xlcyI6WyJtYW5hZ2UtYWNjb3VudCIsIm1hbmFnZS1hY2NvdW50LWxpbmtzIiwidmlldy1wcm9maWxlIl19fSwibmFtZSI6IlVtYXIgS2hvbHZhZGlhIiwicHJlZmVycmVkX3VzZXJuYW1lIjoidW1hciIsImdpdmVuX25hbWUiOiJVbWFyIiwiZmFtaWx5X25hbWUiOiJLaG9sdmFkaWEiLCJlbWFpbCI6InVtYXJAYWlydmFudGFnZS5jby56YSJ9.eUJFklRiRjQPOC1rQLcqrljsSWmGXCpNNKqLJGAcvbnbwx8X0T1iqrmpFdyMN3EKRrIfTZyYRfcTEbpcBEjZcZtgDY9V0Ntvt4pvpUx_8Ey6I8xZQolHVwferjM30puLqG8MImADUimNrj3ghbJbAaCOJktIKgLnTIhDbkNb-8lzgbyq-rEP6lYAWjQ2OuOZnc8NQQ9CJiR9M1SB79SEmY2iQW9E_J8xo8BgZQ0GUBrhaWPo-Kn4RnlEcRNzVnlLHQKi5FM7Zpov3SMQUbAeLat38V41y09ap2XVCy7MfL_7-TrSlMx0TLrhWqPgA5aaXbmsT9_vKOoXNZoJ9bWCuA", 
"expires_in":300, 
"refresh_expires_in":1800, 
"refresh_token":"eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICJTRUNSd09fMlZWdGhxUVBUWnFxNHlqX0tKekxnOElSTjBrQkx5UTlacklrIn0.eyJqdGkiOiIxNTUwNDIyZS02OThkLTQ5N2ItODZmYi00YmY5MTFlMTcwYzYiLCJleHAiOjE1MDgzMzM0MjAsIm5iZiI6MCwiaWF0IjoxNTA4MzMxNjIwLCJpc3MiOiJodHRwOi8vbG9jYWxob3N0OjgwODAvYXV0aC9yZWFsbXMvc2Z4LWl0cmFuc2Zlci13ZWItYWdlbnQiLCJhdWQiOiJhZ2VudC13ZWItYXBwIiwic3ViIjoiMzZiMWY4OWMtNGYwMC00OTU1LWE0YzMtZWQ0NzZmZDU2OGM3IiwidHlwIjoiUmVmcmVzaCIsImF6cCI6ImFnZW50LXdlYi1hcHAiLCJhdXRoX3RpbWUiOjAsInNlc3Npb25fc3RhdGUiOiI0MDgzMWVhYS00ZjJhLTQ5NmUtOTQ1ZC03YmViMTdlNDZlNDQiLCJyZWFsbV9hY2Nlc3MiOnsicm9sZXMiOlsidW1hX2F1dGhvcml6YXRpb24iLCJiYWNrLW9mZmljZS1hZ2VudCJdfSwicmVzb3VyY2VfYWNjZXNzIjp7ImFjY291bnQiOnsicm9sZXMiOlsibWFuYWdlLWFjY291bnQiLCJtYW5hZ2UtYWNjb3VudC1saW5rcyIsInZpZXctcHJvZmlsZSJdfX19.XgYSZWwfaHeY1yZZuwnQ5bj-0IHP4UEmiPTqaeCE1KVyjl3kZz3HJVisndtcKPr05kalS-M_NqU0TaYvbcZ_zesJRIga5sz4gGRqObUmUCUJoQ_iWoOhbM2SutiVnlfgJDACvOxegIcSvakZTgQsEcSweio_0kMFqi-2DYzFp6Rl0TpQ8vALLkc7rEOonUGyt7S4qQzkT-xB1_ZDlSVfm6mC-QKYNZhtqBT18P7MKxBhEgwrJtCytA_4ft7qNAbgvZ3kUohcbhzxGvtHej5RKHNI2wTzwK3IWHbkLWNndxSk_Lzj2-lCx380VpTkVpiDJfq5umjskOmI13dyPF7paA", 
"token_type":"bearer", 
"not-before-policy":0, 
"session_state":"40831eaa-4f2a-496e-945d-7beb17e46e44" 
} 

這是燼督察（承諾）表示：

這是來自Promise的堆棧跟蹤：

Ember Inspector ($E): authenticate/<@http://localhost:4200/assets/vendor.js:77927:9 
initializePromise@http://localhost:4200/assets/vendor.js:63591:7 
Promise@http://localhost:4200/assets/vendor.js:64067:35 
authenticate@http://localhost:4200/assets/vendor.js:77919:14 
authenticate@http://localhost:4200/assets/vendor.js:78528:14 
authenticate@http://localhost:4200/assets/vendor.js:79420:14 
authenticate@http://localhost:4200/assets/sfx-itransfer-web-agent.js:855:9 
join@http://localhost:4200/assets/vendor.js:20249:24 
run$1.join@http://localhost:4200/assets/vendor.js:37657:12 
makeClosureAction/</<@http://localhost:4200/assets/vendor.js:29073:16 
exports.flaggedInstrument@http://localhost:4200/assets/vendor.js:37087:14 
makeClosureAction/<@http://localhost:4200/assets/vendor.js:29072:15 
submit/<@http://localhost:4200/assets/vendor.js:70453:20 
tryCatch@http://localhost:4200/assets/vendor.js:63549:14 
invokeCallback@http://localhost:4200/assets/vendor.js:63562:15 
publish@http://localhost:4200/assets/vendor.js:63532:9 
@http://localhost:4200/assets/vendor.js:54458:16 
invoke@http://localhost:4200/assets/vendor.js:19948:17 
flush@http://localhost:4200/assets/vendor.js:19827:25 
flush@http://localhost:4200/assets/vendor.js:20019:25 
end@http://localhost:4200/assets/vendor.js:20128:26 
run@http://localhost:4200/assets/vendor.js:20212:21 
join@http://localhost:4200/assets/vendor.js:20219:24 
run$1.join@http://localhost:4200/assets/vendor.js:37657:12 
handleEvent/<@http://localhost:4200/assets/vendor.js:58233:18 
exports.flaggedInstrument@http://localhost:4200/assets/vendor.js:37087:14 
handleEvent@http://localhost:4200/assets/vendor.js:58232:17 
_Mixin$create.handleEvent@http://localhost:4200/assets/vendor.js:57385:12 
_bubbleEvent@http://localhost:4200/assets/vendor.js:57685:14 
setupHandler/<@http://localhost:4200/assets/vendor.js:57619:20 
dispatch@http://localhost:4200/assets/vendor.js:5546:16 
add/elemData.handle@http://localhost:4200/assets/vendor.js:5355:6 

Answer 1

其實你的解決方案看起來是正確的。

我猜你在服務器響應或不匹配的請求方法有問題GET/POST。爲了解決這個問題，請嘗試在makeRequest內調試諾言。

return new RSVP.Promise((resolve, reject) => { 
    fetch(url, options).then((response) => { 
    response.text().then((text) => { //<-- here debug text 
     let json = text ? JSON.parse(text) : {}; 
     if (!response.ok) { //<-- and here debug response 
     response.responseJSON = json; 
     reject(response); 
     } else { 
     resolve(json); 
     } 
    }); 
    }).catch(reject); 

所以，如果問題在這裏，剛剛改寫的makeRequest整個方法，並添加使用自定義fetch自己的諾言。

另一種方法是編寫自定義Authenticator，覆蓋authenticate，restore和（可選）invalidate方法在文件中寫道：https://github.com/simplabs/ember-simple-auth#implementing-a-custom-authenticator