Basisauthentifizierung mit Abruf?

122

Ich möchte eine einfache Basisauthentifizierung mit Fetch schreiben, erhalte aber immer wieder einen 401-Fehler. Es wäre großartig, wenn mir jemand sagen würde, was mit dem Code nicht stimmt:

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
quelle

Antworten:

116

Es fehlt ein Leerzeichen zwischen Basicund dem verschlüsselten Benutzernamen und Passwort.

headers.set('Authorization', 'Basic ' + base64.encode(username + ":" + password));
Lukasz Wiktor
quelle
8
Ist atob und btoa nicht in die Javascript-Spezifikation integriert?
Martin
6
Die beiden Funktionen sind in allen gängigen Browsern verfügbar, aber ich glaube nicht, dass sie von einer ES-Spezifikation abgedeckt werden. Insbesondere finden Sie sie nicht in node.js github.com/nodejs/node/issues/3462
Lukasz Wiktor
Ah ich sehe. Danke mein Freund!
Martin
Beachten Sie, dass dadurch KEINE Sitzung für den Browser eingerichtet wird. Sie können XHR verwenden, um sowohl eine Sitzung einzurichten als auch die Base64-Codierung zu vermeiden. Siehe: stackoverflow.com/a/58627805/333296
Nux
Nicht gefangener Referenzfehler: base64 ist nicht definiert
Sveen
90

Eine Lösung ohne Abhängigkeiten.

Knoten

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

Browser

headers.set('Authorization', 'Basic ' + btoa(username + ":" + password));
Qoomon
quelle
5
In einem Browser können Sie window.btoa(username + ':' + password); developer.mozilla.org/en-US/docs/Web/API/WindowBase64/…
Andreas Riedmüller
1
Um Sonderzeichen zu unterstützen, die so etwas wie window.btoa(unescape(encodeURIComponent(string)));die Arbeit erledigen sollten, können Sie hier mehr darüber lesen: developer.mozilla.org/en-US/docs/Web/API/WindowBase64/…
Andreas Riedmüller
Auch abhängig von Ihrer Version des Knotens fetchexistiert dort nicht.
Dovidweisz
18

Sie können auch btoa anstelle von base64.encode () verwenden.

headers.set('Authorization', 'Basic ' + btoa(username + ":" + password));
Ilya
quelle
1. nur in Browsern 2. nur mit ASCII-Zeichen.
Lukas Liesis
7

Wenn Sie einen Back-End-Server haben, der vor der App nach den Anmeldeinformationen für die Basisauthentifizierung fragt, ist dies ausreichend. Er verwendet diese dann wieder:

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

Ein einfaches Beispiel für das Einfügen in die Chrome-Konsole:

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

NODE USERS (REACT, EXPRESS) FOLGEN SIE DIESEN SCHRITTEN

  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. Vergessen Sie nicht, diese ganze Funktion als zu definieren async

Kumar Kundan
quelle
1

Ich werde einen Code freigeben, der den Datenanforderungshauptteil des Basisauthentifizierungskopfs enthält.

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
quelle
0

Dies hängt nicht direkt mit dem ursprünglichen Problem zusammen, wird aber wahrscheinlich jemandem helfen.

Ich hatte das gleiche Problem, als ich versuchte, eine ähnliche Anfrage über ein Domänenkonto zu senden. Mein Problem war also ein nicht maskiertes Zeichen im Anmeldenamen.

Schlechtes Beispiel:

'ABC\username'

Gutes Beispiel:

'ABC\\username'
DJ-Glock
quelle
Dies liegt nur daran, dass Sie das js-String-Escape-Zeichen selbst maskieren müssen, dies ist jedoch nicht grundlegend für die Authentifizierung.
Qoomon
@qoomon richtig. Deshalb habe ich erwähnt, dass es nicht direkt damit zusammenhängt, aber hilfreich sein könnte.
DJ-Glock