[英]Deploy Vue.js Okta Authentication app on Netlify
I recently built a Vue.js application with Okta authentication.我最近使用 Okta 身份验证构建了一个 Vue.js 应用程序。 I am attempting to deploy this application on Netlify.
我正在尝试在 Netlify 上部署此应用程序。 After setting up a new project in Netlify, I imported the Vue.js application into the Netlify project from GitHub.
在 Netlify 中设置新项目后,我将 Vue.js 应用程序从 GitHub 导入到 Netlify 项目中。 I reconfigured the router in the application so that
redirect_uri
in the Okta initializer reflects the new Netlify URL:我在应用程序中重新配置了路由器,以便 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"
});
After deploying the application and clicking the login button, I should be redirected to the default Okta login page.部署应用程序并单击登录按钮后,我应该被重定向到默认的 Okta 登录页面。 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."
但是,我被重定向到一个页面,上面写着“找不到页面:您似乎访问了一个损坏的链接或输入了一个在此站点上不存在的 URL”。
I even made sure to whitelist that URL in my Okta dashboard.我什至确保在我的 Okta 仪表板中将该 URL 列入白名单。 Any idea why Netlify doesn't recognize the new redirect_uri?
知道为什么 Netlify 无法识别新的 redirect_uri 吗? Thanks!
谢谢!
Since you're deploying a SPA, you need to route all routes to your index.html
and let Vue handle them.由于您正在部署 SPA,您需要将所有路由路由到您的
index.html
并让 Vue 处理它们。
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:根据这篇文章,您需要使用以下行将
_redirects
文件添加到您的publish
目录,以利用浏览器历史推送状态:
/* /index.html 200
For more info, see Netlify's docs .有关更多信息,请参阅Netlify 的文档。
I solved the CORS issue.我解决了 CORS 问题。 In the Okta Dashboard, I added the redirecting URL as an original URL under
API > Trusted Origins
.在 Okta 仪表板中,我在
API > Trusted Origins
下添加了重定向 URL 作为原始 URL。 I selected Add Origin
to specify the base URL of the website, then selected CORS.我选择
Add Origin
来指定网站的基本 URL,然后选择 CORS。 See : https://support.okta.com/help/s/article/CORS-error-when-accessing-Okta-APIs-from-front-end请参阅: https : //support.okta.com/help/s/article/CORS-error-when-accessing-Okta-APIs-from-front-end
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.