0

版本：

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://keycloak.bgzchina.com/auth/realms/bgzchina/protocol/openid-connect/auth',
                  token:'https://keycloak.bgzchina.com/auth/realms/bgzchina/protocol/openid-connect/token',
                  userInfo: "https://keycloak.bgzchina.com/auth/realms/bgzchina/protocol/openid-connect/token",
                  logout:'https://keycloak.bgzchina.com/auth/realms/bgzchina/protocol/openid-connect/logout',
                },
                responseType: 'id_token token',
                clientId: 'centuari-portal-fe',
                scope: ['openid'],
              }
        },
        redirect: {
            login: '/login',
            logout: '/logout',
            callback: '/callback',
            home: '/',
          }
    },
    router: {
      middleware: ['auth']
    },

由于当前版本 nuxt/auth-next 存在问题，我通过扩展 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获取令牌。

有什么解决办法吗？

4

1 回答 1

0

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

  1. 转到 keycloak 管理仪表板
  2. 菜单Clients=> 选择客户端
  3. 在Settings选项卡上，向下滚动页面并找到Web Origins. 在其上添加您的前端 url (nuxt url)。也别忘了加进去Valid Redirect URIs。
于 2021-12-31T13:00:31.123 回答