Authentification de base avec récupération?

122

Je veux écrire une authentification de base simple avec fetch, mais j'obtiens toujours une erreur 401. Ce serait génial si quelqu'un me disait ce qui ne va pas avec le code:

let base64 = require('base-64');

let url = 'http://eu.httpbin.org/basic-auth/user/passwd';
let username = 'user';
let password = 'passwd';

let headers = new Headers();

//headers.append('Content-Type', 'text/json');
headers.append('Authorization', 'Basic' + base64.encode(username + ":" + password));

fetch(url, {method:'GET',
        headers: headers,
        //credentials: 'user:passwd'
       })
.then(response => response.json())
.then(json => console.log(json));
//.done();

function parseJSON(response) {
return response.json()
}
daniel.lozynski
la source

Réponses:

117

Il vous manque un espace entre Basicle nom d'utilisateur et le mot de passe encodés.

headers.set('Authorization', 'Basic ' + base64.encode(username + ":" + password));
Lukasz Wiktor
la source
8
Atob et btoa ne sont-ils pas intégrés à la spécification Javascript?
Martin
6
Les 2 fonctions sont disponibles dans tous les principaux navigateurs, mais je ne pense pas qu'elles soient couvertes par une spécification ES. En particulier, vous ne les trouverez pas dans node.js github.com/nodejs/node/issues/3462
Lukasz Wiktor
Notez que cela n'établit PAS de session pour le navigateur. Vous pouvez utiliser XHR pour établir une session et éviter le codage base64. Voir: stackoverflow.com/a/58627805/333296
Nux
Uncaught ReferenceError: base64 n'est pas définie
Sveen
@Sveen base64fait référence à la bibliothèque importée dans l'article d'origine. Ce n'est pas un global intégré, mais une bibliothèque qui a été importée dans le module CJS.
oligofren le
90

Une solution sans dépendances.

Nœud

headers.set('Authorization', 'Basic ' + Buffer.from(username + ":" + password).toString('base64'));

Navigateur

headers.set('Authorization', 'Basic ' + btoa(username + ":" + password));
qoomon
la source
5
Dans un navigateur, vous pouvez utiliser window.btoa(username + ':' + password); developer.mozilla.org/en-US/docs/Web/API/WindowBase64/…
Andreas Riedmüller
1
pour prendre en charge les caractères spéciaux, quelque chose comme window.btoa(unescape(encodeURIComponent(string)));devrait faire le travail, vous pouvez en savoir plus à ce sujet ici: developer.mozilla.org/en-US/docs/Web/API/WindowBase64/…
Andreas Riedmüller
En outre, en fonction de votre version de nœud fetchn'existe pas là-bas.
dovidweisz
18

Vous pouvez également utiliser btoa au lieu de base64.encode ().

headers.set('Authorization', 'Basic ' + btoa(username + ":" + password));
Il y a
la source
1. uniquement dans les navigateurs 2. uniquement avec des caractères ascii.
Lukas Liesis le
7

Si vous avez un serveur principal qui demande les informations d'identification de base avant l'application, cela suffit, il le réutilisera alors:

fetch(url, {
  credentials: 'include',
}).then(...);
OZZIE
la source
4

Un exemple simple de copier-coller dans la console Chrome:

fetch('https://example.com/path', {method:'GET', 
headers: {'Authorization': 'Basic ' + btoa('login:password')}})
.then(response => response.json())
.then(json => console.log(json));
kolypto
la source
2

LES UTILISATEURS DE NOEUDS (REACT, EXPRESS) SUIVENT CES ÉTAPES

  1. npm install base-64 --save
  2. import { encode } from "base-64";
  3.  const response = await fetch(URL, {
      method: 'post',
      headers: new Headers({
        'Authorization': 'Basic ' + encode(username + ":" + password),
        'Content-Type': 'application/json'
      }),
      body: JSON.stringify({
        "PassengerMobile": "xxxxxxxxxxxx",
        "Password": "xxxxxxx"
      })
    });
    const posts = await response.json();
    
  4. N'oubliez pas de définir toute cette fonction comme async

kumar kundan
la source
1

Je partagerai un code qui a un corps de demande de données de formulaire d'en-tête d'authentification de base,

let username = 'test-name';
let password = 'EbQZB37gbS2yEsfs';
let formdata = new FormData();
let headers = new Headers();


formdata.append('grant_type','password');
formdata.append('username','testname');
formdata.append('password','qawsedrf');

headers.append('Authorization', 'Basic ' + base64.encode(username + ":" + password));
fetch('https://www.example.com/token.php', {
 method: 'POST',
 headers: headers,
 body: formdata
}).then((response) => response.json())
.then((responseJson) => {
 console.log(responseJson);

 this.setState({
    data: responseJson
 })
  })
   .catch((error) => {
 console.error(error);
   });
Manoj Perumarath
la source
0

Ce n'est pas directement lié au problème initial, mais cela aidera probablement quelqu'un.

J'ai rencontré le même problème en essayant d'envoyer une demande similaire à l'aide d'un compte de domaine. Le problème de la mienne n'était donc pas un caractère échappé dans le nom de connexion.

Mauvais exemple:

'ABC\username'

Bon exemple:

'ABC\\username'
DJ-Glock
la source
C'est juste parce que vous devez échapper le caractère d'échappement de la chaîne js lui-même, mais ce n'est pas lié à l'authentification de base.
qoomon le
@qoomon correct. C'est pourquoi j'ai mentionné que ce n'est pas directement lié, mais pourrait être utile.
DJ-Glock le