Nuxt auth-next 与 keycloak CORS 问题答案

【问题标题】：Nuxt auth-next with keycloak CORS problemNuxt auth-next 与 keycloak CORS 问题
【发布时间】：2021-06-11 03:28:37
【问题描述】：

版本：

keycloak 12.0.2
nuxt: 2.14.6 
nuxt/auth-next: 5.0.0-1622918202.e815752

配置：

nuxt.config.js

    auth: {
        strategies: {
            keycloak: {
                scheme: '~/plugins/keycloak.js',
                endpoints: {
                  authorization:'https://xxx/auth/realms/asdf/protocol/fdsf-connect/auth',
                  token:'https://xxx/auth/realms/asdf/protocol/fdsf-connect/token',
                  userInfo: "https://xxx/auth/realms/asdf/protocol/fdsf-connect/token",
                  logout:'https://xxx/auth/realms/asdf/protocol/fdsf-connect/logout',
                },
                responseType: 'id_token token',
                clientId: 'centuari-portal-fe',
                scope: ['fdsf'],
              }
        },
        redirect: {
            login: '/login',
            logout: '/logout',
            callback: '/callback',
            home: '/',
          }
    },
    router: {
      middleware: ['auth']
    },

由于当前版本为 nuxt/auth-next 的 issue，我通过扩展 oauth2 创建了一个自定义方案

/plugin/keycloak.js

import { Oauth2Scheme } from '~auth/runtime'

function encodeQuery(queryObject) {
    return Object.entries(queryObject)
        .filter(([_key, value]) => typeof value !== 'undefined')
        .map(([key, value]) => encodeURIComponent(key) + (value != null ? '=' + encodeURIComponent(value) : ''))
        .join('&')
}

export default class KeycloakScheme extends Oauth2Scheme {
    logout() {
        if (this.options.endpoints.logout) {
            const opts = {
                client_id: this.options.clientId,
                post_logout_redirect_uri: this._logoutRedirectURI
            }
            const url = this.options.endpoints.logout + '?' + encodeQuery(opts)
            window.location.replace(url)
        }
        return this.$auth.reset()
    }
}

但是在登录时，浏览器会因为 CORS 而阻塞令牌请求。预检指定允许方法的 keycloak 服务器响应为 POST, OPTIONS，但 auth-next 使用 GET 获取令牌。

有什么解决办法吗？

【问题讨论】：

CORS 与后端或您用于身份验证的服务有关，这里您需要将localhost 和您的production URL 列入白名单。
GET 获取令牌？真的，fdsf.net/specs/fdsf-connect-core-1_0.html#TokenRequest - 我会使用库，它遵循 OIDC 规范（所以POST 用于令牌请求）。我敢打赌，当您解决 CORS 问题时，Keycloak 会拒绝该 GET 请求。
我确实有 POST 来获取我的 JWT 令牌，同时使用 nuxt-auth。没有改变这一点AFAIK的配置。也许tokenRequired: true, tokenType: 'JWT',？

标签： oauth nuxt.js keycloak nuxt-auth

【解决方案1】：

您需要将 url 添加/注册到 keycloak 管理仪表板中。

转到 keycloak 管理仪表板
菜单Clients => 选择客户端
在Settings 选项卡上，向下滚动页面并找到Web Origins。在其上添加您的前端 url (nuxt url)。不要忘记也添加到Valid Redirect URIs。

【讨论】：