chrome 扩展用户使用 okta 进行标识 - “浏览器对令牌端点的请求必须是至少一个列入白名单的 redirect_uri 的一部分。”

Question

我正在使用 okta-api 在我的 chrome 扩展中进行身份验证登录。 但当我尝试获取 访问令牌

时遇到问题

{
"error": "invalid_request",
"error_description": "Browser requests to the token endpoint must be part of at least one whitelisted redirect_uri."
}

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.msg === "login") {
    const url = `https://${okta_domain}/oauth2/default/v1/authorize?
      client_id=${client_id}&
      response_type=code&
      scope=openid&
      redirect_uri=http://localhost:3000/login&
      state=mystate&
      nonce=mynonce&
      code_challenge_method=S256&
      code_challenge=${code_challenge}}`;
    chrome.identity.launchWebAuthFlow(
      {
        url: url,
        interactive: true,
      },
      function (redirect_url) {
        const code = extractAccessTokenFromUrl(redirect_url);
        const token = getTokenUsingCodeOkta(code);
        sendResponse("success");
      }
    );
    return true;
  }
});

extractAccessTokenFromUrl(redirect_url) 

该函数从redirect_url返回code并且运行良好。 现在使用

getTokenUsingCodeOkta(code);

假设返回访问令牌，并使用该令牌我可以向服务器发出请求。

async function getTokenUsingCodeOkta(code) {
  const headers = new Headers({
    Accept: "application/json",
    "Content-Type": "application/x-www-form-urlencoded",
  });

  const body = new URLSearchParams({
    grant_type: "authorization_code",
    redirect_uri: REDIRECT_URI,
    client_id: CLIENT_ID,
    code: code,
    code_verifier: CODE_VERIFIER,
  });
  const options = {
    method: "POST",
    headers: headers,
    body: body
  };

  fetch(
    `https://{okta_domain}/oauth2/default/v1/token`,
    options
  )
    .then((response) => response.text())
    .then((result) => result)
    .catch((error) => console.log("error", error));

调用此函数后，出现以下错误：

{
"error": "invalid_request",
"error_description": "Browser requests to the token endpoint must be part of at least one whitelisted redirect_uri."
}

OKTA 应用程序配置：

谢谢。

Answer 1

我现在也遇到了同样的问题，请问你解决了吗？

提前谢谢您