實現自定義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);
  }
});

我有一個控制器通過調用此操作使用此Authenticator：

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的調用實際上正確地返回了包含我的令牌的對象等。但是，ember檢查器顯示了與未解決的promises相關的一些錯誤。 但我猜這是因為我不再回應承諾了。

我在這做錯了什么？

如何修復無響應的腳本問題？

我有另一種方式來實現我的目標嗎？

編輯1：這是我刪除退貨的時候

這是返回的實際對象：

{
"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"
}

這是ember督察員（Promises）所展示的：

這是來自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調試promise。

    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