在Netlify上部署Vue.js Okta身份验证应用程序 [英] Deploy Vue.js Okta Authentication app on Netlify

问题描述

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

I recently built a Vue.js application with Okta authentication. I am attempting to deploy this application on Netlify. After setting up a new project in Netlify, I imported the Vue.js application into the Netlify project from GitHub. I reconfigured the router in the application so that redirect_uri in the Okta initializer reflects the new 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登录页面.但是，我却被重定向到一个页面，上面写着找不到页面:好像您跟随了一个损坏的链接，或者输入了此网站上不存在的URL."

After deploying the application and clicking the login button, I should be redirected to the default Okta login page. However, I am instead redirected to a page that says "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吗?谢谢！

I even made sure to whitelist that URL in my Okta dashboard. Any idea why Netlify doesn't recognize the new redirect_uri? Thanks!

推荐答案

自从部署SPA以来，您需要将所有路由都路由到index.html并由Vue处理.

Since you're deploying a SPA, you need to route all routes to your index.html and let Vue handle them.

根据

According to this article, you need to add a _redirects file to your publish directory with the following line to take advantage of browser history pushstate:

/*    /index.html   200

有关更多信息，请参见 Netlify的文档.

For more info, see Netlify's docs.

这篇关于在Netlify上部署Vue.js Okta身份验证应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！