Otentikasi dasar dengan pengambilan?

Saya ingin menulis otentikasi dasar sederhana dengan pengambilan, tetapi saya terus mendapatkan kesalahan 401. Akan luar biasa jika seseorang memberi tahu saya apa yang salah dengan kode:

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

Anda kehilangan spasi antara Basicdan nama pengguna dan kata sandi yang dikodekan.

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

Solusi tanpa ketergantungan.

Node

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

Browser

headers.set('Authorization', 'Basic ' + btoa(username + ":" + password));

Anda juga bisa menggunakan btoa sebagai ganti base64.encode ().

headers.set('Authorization', 'Basic ' + btoa(username + ":" + password));

Jika Anda memiliki server backend yang meminta kredensial Basic Auth sebelum aplikasi, maka ini cukup, itu akan digunakan kembali kemudian:

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

Contoh sederhana untuk menyalin-tempel ke konsol Chrome:

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

PENGGUNA NODE (REACT, EXPRESS) IKUTI LANGKAH INI

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. Jangan lupa untuk mendefinisikan seluruh fungsi ini sebagai async

Saya akan membagikan kode yang memiliki badan permintaan data formulir Basic Auth Header,

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

Ini tidak terkait langsung dengan masalah awal, tetapi mungkin akan membantu seseorang.

Saya menghadapi masalah yang sama ketika mencoba mengirim permintaan serupa menggunakan akun domain. Jadi masalah saya adalah karakter yang tidak lolos dalam nama login.

Contoh buruk:

'ABC\username'

Contoh yang baik:

'ABC\\username'