Implémentation d'un authentificateur custom-authent-ember

Question

Premièrement, je ne suis pas un développeur JS chevronné, alors excusez les erreurs évidentes que j'aurais pu commettre. J'essaie de mettre en œuvre un authentificateur personnalisé pour authentifier un utilisateur avec Keycloak en utilisant l'OAuth2 Password Grant qui nécessite que le client_id soit passé dans le corps de la demande.

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); 
    } 
}); 

J'ai un contrôleur qui utilise ce Authenticator en appelant cette action:

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

Cela provoque Firefox pour accrocher et me donne un message de script ne répond pas.

Si je retire la return de la méthode makeRequest(), je peux voir dans le débogueur du navigateur que l'appel à Keycloak retourne en fait correctement avec l'objet qui contient mon jeton etc. inspecteur Ember Cependant montre quelques erreurs liées à des promesses non résolues. Mais je suppose que c'est parce que je ne rends plus la promesse.

Qu'est-ce que je fais mal ici?

Comment puis-je résoudre le problème de script qui ne répond pas?

Y a-t-il un autre moyen pour moi d'atteindre mon objectif?

Edit 1: C'est quand je supprimer le retour

Voici l'objet réel qui est retourné:

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

C'est ce que l'inspecteur de Ember (promesses) montre:

Voici la pile de la promesse:

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

En fait, votre solution semble correcte.

Je suppose que vous avez un problème dans la réponse du serveur ou des méthodes de demande désadaptation GET/POST . Pour résoudre cela, essayez de déboguer la promesse à l'intérieur 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); 

Donc, si problème ici, juste récrire méthode tout makeRequest et ajouter vos propres promesses avec la coutume fetch.

Une autre façon est d'écrire sur mesure Authenticator, remplaçant authenticate, restore et (éventuellement) invalidate méthodes comme écrit dans la documentation: https://github.com/simplabs/ember-simple-auth#implementing-a-custom-authenticator