实现一个自定义的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 
[email protected]://localhost:4200/assets/vendor.js:63591:7 
[email protected]://localhost:4200/assets/vendor.js:64067:35 
[email protected]://localhost:4200/assets/vendor.js:77919:14 
[email protected]://localhost:4200/assets/vendor.js:78528:14 
[email protected]://localhost:4200/assets/vendor.js:79420:14 
[email protected]://localhost:4200/assets/sfx-itransfer-web-agent.js:855:9 
[email protected]://localhost:4200/assets/vendor.js:20249:24 
[email protected]://localhost:4200/assets/vendor.js:37657:12 
makeClosureAction/</<@http://localhost:4200/assets/vendor.js:29073:16 
[email protected]://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 
[email protected]://localhost:4200/assets/vendor.js:63549:14 
[email protected]://localhost:4200/assets/vendor.js:63562:15 
[email protected]://localhost:4200/assets/vendor.js:63532:9 
@http://localhost:4200/assets/vendor.js:54458:16 
[email protected]://localhost:4200/assets/vendor.js:19948:17 
[email protected]://localhost:4200/assets/vendor.js:19827:25 
[email protected]://localhost:4200/assets/vendor.js:20019:25 
[email protected]://localhost:4200/assets/vendor.js:20128:26 
[email protected]://localhost:4200/assets/vendor.js:20212:21 
[email protected]://localhost:4200/assets/vendor.js:20219:24 
[email protected]://localhost:4200/assets/vendor.js:37657:12 
handleEvent/<@http://localhost:4200/assets/vendor.js:58233:18 
[email protected]://localhost:4200/assets/vendor.js:37087:14 
[email protected]://localhost:4200/assets/vendor.js:58232:17 
[email protected]://localhost:4200/assets/vendor.js:57385:12 
[email protected]://localhost:4200/assets/vendor.js:57685:14 
setupHandler/<@http://localhost:4200/assets/vendor.js:57619:20 
[email protected]://localhost:4200/assets/vendor.js:5546:16 
add/[email protected]://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