Xác thực cơ bản bằng cách sử dụng JavaScript

Question

Tôi đang tạo ứng dụng tiêu thụ Caspio API. Tôi đang gặp một số vấn đề khi xác thực API của họ. Tôi đã dành 2-3 ngày cố gắng để tìm ra điều này nhưng nó có thể là do một số hiểu biết về kết thúc của tôi. Tôi đã đọc vô số bài viết trên stackoverflow bài và nếu không nhưng đã không giải quyết được vấn đề. Dưới đây là một ví dụ về giải pháp của tôi dựa trên những gì tôi đã xem xét và tôi nhận được một thông báo mã trạng thái 400; Tôi làm gì sai ở đây? (Vui lòng cung cấp cũng nhận xét ví dụ mã và tôi muốn để KHÔNG đã liên kết được đăng ở đây tham khảo các tài liệu khác như tôi đã xem xét những rộng rãi Cảm ơn.!):

Một số tài liệu tham khảo tôi đã xem xét:

1) Pure JavaScript code for HTTP Basic Authentication?

2) How to make http authentication in REST API call from javascript

tôi muốn sử dụng phương thức xác thực này như mô tả của caspio dưới đây:

Là một thay thế để bao gồm thông tin đăng nhập trong phần thân yêu cầu, một khách hàng có thể sử dụng lược đồ xác thực HTTP cơ bản. Trong trường hợp này, yêu cầu xác thực sẽ được thiết lập theo cách sau:

Phương pháp: POST

URL: endpoint Mã thông báo

Body: grant_type = client_credentials

Tiêu đề thông số:

Authorization: xác thực Basic cơ bản lĩnh vực

Dưới đây là mã Javascript và HTML của tôi.

JavaScript:

var userName = "clientID"; 
var passWord = "secretKey"; 

function authenticateUser(user, password) 
{ 
    var token = user + ":" + password; 

    // Should i be encoding this value????? does it matter??? 
    // Base64 Encoding -> btoa 
    var hash = btoa(token); 

    return "Basic " + hash; 
} 

function CallWebAPI() { 

    // New XMLHTTPRequest 
    var request = new XMLHttpRequest(); 
    request.open("POST", "https://xxx123.caspio.com/oauth/token", false); 
    request.setRequestHeader("Authorization", authenticateUser(userName, passWord)); 
    request.send(); 
    // view request status 
    alert(request.status); 
    response.innerHTML = request.responseText; 
} 

HTML:

<div> 
<div id="response"> 

</div> 
<input type="button" class="btn btn-primary" value="Call Web API" onclick="javascript:CallWebAPI();" /> 

Answer 1

Sau khi chi tiêu khá một chút thời gian nhìn vào điều này, tôi đã đưa ra các giải pháp cho điều này; Trong giải pháp này tôi không sử dụng xác thực cơ bản nhưng thay vào đó đã đi với giao thức xác thực oAuth. Nhưng để sử dụng xác thực cơ bản, bạn sẽ có thể chỉ định điều này trong "setHeaderRequest" với các thay đổi tối thiểu đối với phần còn lại của ví dụ mã.Tôi hy vọng điều này sẽ có thể giúp đỡ người khác trong tương lai:

var token_ // variable will store the token 
var userName = "clientID"; // app clientID 
var passWord = "secretKey"; // app clientSecret 
var caspioTokenUrl = "https://xxx123.caspio.com/oauth/token"; // Your application token endpoint 
var request = new XMLHttpRequest(); 

function getToken(url, clientID, clientSecret) { 
    var key;   
    request.open("POST", url, true); 
    request.setRequestHeader("Content-type", "application/json"); 
    request.send("grant_type=client_credentials&client_id="+clientID+"&"+"client_secret="+clientSecret); // specify the credentials to receive the token on request 
    request.onreadystatechange = function() { 
     if (request.readyState == request.DONE) { 
      var response = request.responseText; 
      var obj = JSON.parse(response); 
      key = obj.access_token; //store the value of the accesstoken 
      token_ = key; // store token in your global variable "token_" or you could simply return the value of the access token from the function 
     } 
    } 
} 
// Get the token 
getToken(caspioTokenUrl, userName, passWord); 

Nếu bạn đang sử dụng API REST của Caspio trên một số yêu cầu nó có thể là bắt buộc là bạn mã hóa paramaters cho yêu cầu nhất định để thiết bị đầu cuối của bạn; xem tài liệu Caspio về vấn đề này;

LƯU Ý: mã hóaParams KHÔNG được sử dụng trong ví dụ này nhưng được sử dụng trong giải pháp của tôi.

Bây giờ bạn có thẻ lưu trữ từ các thiết bị đầu cuối thẻ bạn sẽ có thể để xác thực thành công cho yêu cầu tiếp theo từ các thiết bị đầu cuối nguồn caspio cho ứng dụng của bạn

function CallWebAPI() { 
    var request_ = new XMLHttpRequest();   
    var encodedParams = encodeURIComponent(params); 
    request_.open("GET", "https://xxx123.caspio.com/rest/v1/tables/", true); 
    request_.setRequestHeader("Authorization", "Bearer "+ token_); 
    request_.send(); 
    request_.onreadystatechange = function() { 
     if (request_.readyState == 4 && request_.readyState == 200) { 
      var response = request_.responseText; 
      var obj = JSON.parse(response); 
      // handle data as needed... 

     } 
    } 
} 

Giải pháp này không chỉ xem xét làm thế nào để thành công yêu cầu được xác thực bằng cách sử dụng API Caspio trong javascript thuần túy. Vẫn còn nhiều sai sót mà tôi chắc chắn ...

Answer 2

Biến EncodedParams được định nghĩa lại là biến params sẽ không hoạt động. Bạn cần phải có cùng một cuộc gọi được xác định trước để biến, nếu không nó có thể có thể với một ít công việc nhiều hơn nữa. Chúc mừng! json không được sử dụng với khả năng đầy đủ của nó trong php có những cách tốt hơn để gọi json mà tôi không nhớ tại thời điểm này.