Vue.js，Express Server，Okta，部署到 Heroku，隐式/回调 404答案

【问题标题】：Vue.js, Express Server, Okta, deploy to Heroku, 404 on implicit/callbackVue.js，Express Server，Okta，部署到 Heroku，隐式/回调 404
【发布时间】：2019-01-13 23:55:14
【问题描述】：

我有一个使用 vue-cli 构建并通过 Okta 授权的 Vue 应用程序。推到 Heroku 作为生产设置，但我有点想知道 Okta 是否不在免费增值级别上进行生产？

我是否在文档中遗漏了有关此内容的内容...

设置：

有一个 src 目录，其中包含 router/index.js 的常用内容，附加了 Okta 库：

Vue.use(Auth, {
  issuer: 'dev_url',
  client_id: 'some_string',
  redirect_uri: window.location.origin + '/implicit/callback',
  scope: 'openid profile email'
})

这是在路由数组中：

{
  path: '/implicit/callback',
  component: Auth.handleCallback()
},

在src/ 中有一个server.js 并获得了一些jwt 验证和构建文件夹：

app.use(express.static(path.join(__dirname, "../dist")))
...
const oktaJwtVerifier = new OktaJwtVerifier({
    clientId: '<some_id>',
    issuer: '<some_url>'
})
...
app.get('/', authRequired(), (req, res, next) => {
    return res.sendFile(path.join(__dirname, '../dist/index.html'))
 })

这些看起来都不错，而且一切都像 localhost 上的魅力一样。使用 webpack-dev-server，但通过推到 heroku，我在 implicit/callback 路由上得到 404...

以下是脚本：

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    "test": "npm run unit",
    "lint": "eslint --ext .js,.vue src test/unit",
    "build": "node build/build.js",
    "server": "node ./src/server",
    "start": "node ./src/server",
    "heroku-prebuild": "npm install && npm run build"
},

当构建完成并且所有快乐时光应该开始时，我点击登录，这个调用通过浏览器发送出去，这看起来有点奇怪：

https://<base_url>.herokuapp.com/implicit/callback#id_token=<huge_hashed_string>&token_type=Bearer&expires_in=3600&scope=openid+email+profile&state=<huge_hashed_string>

我们在 404 上崩溃并且没有发生身份验证。

如果你克隆它和npm install，你可以运行npm run dev和npm start。

我尝试过的事情：

进行了很多路由操作，不知道还有什么要弄乱的，主要是因为它确实可以在本地运行我就是这样处理事情的。

我已在仪表板设置中将生产 URL 添加到 登录重定向 URI。并接受基本网址。有人对此有任何意见吗？

【问题讨论】：

This 基本上是同一个问题，我认为上下文较少，大约 2 个月前被问到，所以要么这是一个非常困难的解决方案，要么我错过了一些非常简单的东西。
所以我正在阅读有关 SAML layers 的信息，看起来 Okta 可能需要在生产中发挥作用。有人对我有任何背景......这是正确的道路吗？

标签： javascript express heroku vue.js okta

【解决方案1】：

嗯，还不错。我找到的答案是您必须返回令牌存储并使用 OktaClient 而不是它们的隐式回调设置。通过关注This tutorial.解决了问题

【讨论】：