来自 chrome 扩展的登录用户

Question

I need help in authenticate user login from chrome extension with jwt

This is my manifest file

    {
  "manifest_version": 2,
  "name": "Time tracker",
  "description": "use this extension to send url and time to server",
  "author": "Ashkan Ganj",
  "version": "1.0",
  "browser_action": {
    "default_icon": "/icons/16.png",
    "default_title": "Time Tracker",
    "default_popup":"popup.html"
  },
  "permissions": [
    "tabs",
    "activeTab",
    "http://127.0.0.1:8000/*",
    "https://jsonplaceholder.typicode.com/posts",
    "storage",
    "http://*/", 
    "https://*/"

  ],
  "content_scripts": 
  [
      {
          "matches": ["http://127.0.0.1:8000/*","https://jsonplaceholder.typicode.com/posts"],  
          "js": ["packages/jquery-3.5.0.min.js","popup.js"]
      }
  ],

  "background": {
    "scripts": [
      "background.js","packages/jquery-3.5.0.min.js"
    ],
    "persistent": false
  }
}

and my popup js to send login info, my problem is: how to send request and get access and refresh token and store them in session storage in order to login user

$("#submitbtn").click(function (sendReq) {
  var email = $("#email").val();
  var password = $("#password").val();
  sessionStorage.setItem("userToken", "");
});
function sendReq() {
  let sendReq = (ev) => {
    let url = "/api/token";
    let h = new Headers();
    let req = new Request(url, {
      method: "POST",
      mode: "cors",
    });
    fetch(req)
      .then((resp) => resp.json())
      .then((data) => {
        console.log(data[0]);
      })
      .catch((err) => {
        console.error(err.message);
      });
  };
}

my path to get token and refresh token api/token and api/token/refresh my rest framework get token pic

Thanks for your helps.

Answer 1

Fisrt thing first, Use background.js for API calls and send the 200 response to popup as message passing between popup and background then set the browserAction to any other html you want to show after successful login.