在 Netlify 上部署 Vue.js Okta 身份验证应用程序

Question

我最近使用 Okta 身份验证构建了一个 Vue.js 应用程序。我正在尝试在 Netlify 上部署此应用程序。在 Netlify 中设置新项目后，我将 Vue.js 应用程序从 GitHub 导入到 Netlify 项目中。我在应用程序中重新配置了路由器，以便 Okta 初始化程序中的 redirect_uri 反映新的 Netlify URL:

import Auth from "@okta/okta-vue";

Vue.use(Auth, {
  issuer: "https://xxx-xxxxxx.okta.com/oauth2/default",
  client_id: "xxxxxxxxxxxxxxxxxxxx",
  redirect_uri: "https://xxxxxxxxx-xxxx-xxxxxx.netlify.com/implicit/callback",
  scope: "openid profile email"
});

部署应用程序并单击登录按钮后，我应该会被重定向到默认的 Okta 登录页面。但是，我被重定向到一个显示 "page not found: Looks like you've followed a broken link or entered a URL that doesn't exist on this site."

的页面

我什至确保在我的 Okta 仪表板中将 URL 列入白名单。知道为什么 Netlify 不能识别新的 redirect_uri 吗？谢谢！

Answer 1

由于您正在部署 SPA，因此您需要将所有路由路由到您的 index.html 并让 Vue 处理它们。

根据 this article，您需要使用以下行将 _redirects 文件添加到您的 publish 目录以利用浏览器历史推送状态：

/*    /index.html   200

有关详细信息，请参阅 Netlify's docs。

Answer 2

我解决了 CORS 问题。在 Okta 仪表板中，我在 API > Trusted Origins 下添加了重定向 URL 作为原始 URL。我选择了Add Origin来指定网站的基础URL，然后选择了CORS。参见：https://support.okta.com/help/s/article/CORS-error-when-accessing-Okta-APIs-from-front-end

在 Netlify 上部署 Vue.js Okta 身份验证应用程序

Deploy Vue.js Okta Authentication app on Netlify

vue.js

github

okta

netlify

okta-api