使用 nginx 时 okta 回调不起作用

Question

我在 docker 容器中有一个 VueJS 3 应用程序运行，使用 nginx 作为 Web 服务器。

我集成了 okta 进行身份验证。在没有 ngnix 的情况下，okta 集成在 localhost:3000 上运行良好。然而，当部署在生产中时，在成功验证后，重定向卡在回调页面上：

回调路由器定义：

import { LoginCallback } from '@okta/okta-vue'
import { createRouter, createWebHistory } from 'vue-router'

const routes =[{
    path: '/iam/callback',
    component: () => LoginCallback
}]
  
const router = createRouter({
    history: createWebHistory('/'),
    routes
})

我的 Docker 文件如下所示：

FROM node:17.5-alpine3.14 as package

# set working directory
WORKDIR /usr/src/webapp

# install and cache app dependencies
COPY package*.json ./
COPY nginx.conf ./

#RUN npm install
RUN npm ci

COPY . .

RUN npm run build

# production environment
FROM nginx:1.21.6-alpine as production
COPY --from=package /usr/src/webapp/dist /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx.conf /etc/nginx/conf.d

EXPOSE 80

COPY entrypoint.sh /

# Make the file executable
RUN chmod +x /entrypoint.sh

CMD ["./entrypoint.sh"]

nginx 配置如下所示：

server {
    listen       80;

   location / {
     root /usr/share/nginx/html;
     try_files $uri $uri/ /index.html;
   }
}

nginx配置有问题吗？

登录流程代码：

const transaction = await this.$auth
        .signInWithCredentials({
          username: this.username,
          password: this.password
        })
        .catch((error) => console.log(error))
      if (transaction.status === 'SUCCESS') {
        const originalUri = this.$auth.getOriginalUri()
        if (!originalUri) {
          this.$auth.setOriginalUri('/app/next')
        }
        this.$auth.token.getWithRedirect({
          sessionToken: transaction.sessionToken,
          responseType: 'access_token'
        })
      }

Answer 1

您的 nginx.config 文件需要制作 SPA-aware。也就是说，它需要将所有请求重定向到 index.html.

server {
    listen   80;
    server_name  _;

    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri /index.html;
    }
}

来自https://developer.okta.com/blog/2020/06/17/angular-docker-spring-boot#create-a-docker-container-for-your-angular-app

Answer 2

不确定确切的问题是什么，但更改登录流程后问题就解决了。

我没有使用 get，而是调用了我的登录流程：

发件人：

this.$auth.token.getWithRedirect({
          sessionToken: transaction.sessionToken,
          responseType: 'access_token'
        })

收件人：

if (transaction.status === 'SUCCESS') {
        const originalUri = this.$auth.getOriginalUri()
        if (!originalUri) {
          this.$auth.setOriginalUri('/app/next')
        }

        const { tokens } = await this.$auth.token.getWithoutPrompt({
          responseType: 'id_token',
          sessionToken: transaction.sessionToken
        })

        await this.$auth.tokenManager.setTokens(tokens)
        await this.$auth.handleLoginRedirect(tokens)
      }

使用 nginx 时 okta 回调不起作用

okta callback not working when using nginx

nginx

docker

vue.js

okta