Keycloak 电容器适配器 - 身份验证重定向问题

问题描述

我们使用带有 Capacitor 和 Keycloak 的 Ionic Vue (5.4.0 - Vue3) 作为身份验证提供程序。我们已经实现了提供电容器适配器的 https://www.npmjs.com/package/keycloak-ionic 包。我们已经为两个平台设置了所需的深层链接，它们正在运行。应用程序应在系统浏览器（电容原生适配器）中对用户进行身份验证，保存令牌并在下一个应用程序启动时重用这些令牌。它正在Android上运行。在 iOS 上，第一次启动工作正常，但如果我重新启动（终止并重新启动），我只会看到一个空白屏幕。它不会重定向到受保护的内容或显示 keycloak 登录页面。我发现使用 keycloak 登录的 Safari 浏览器在后台打开。如果我关闭此浏览器选项卡并启动应用程序，它会通过将我重定向到 keycloak 登录页面来工作。

可能是浏览器打开了 keycloak 实例的问题？

我也对 inappbrowser（电容器适配器）进行了同样的尝试。第一个开始也在那里工作。如果我重新启动应用程序，自定义选项卡会打开重定向 url 页面，而不会将我重定向到受保护的内容或 keycloak 登录页面。

代码示例：

App.addListener('appUrlOpen',function (data: any) {
  const slug = data.url.split('/kc1').pop()

  // We only push to the route if there is a slug present
  if (slug) {
    router.push({ name: 'Overview' })
  }
})

// init authentication
const initKeycloak = async () => {
  const cachedKeycloak = new CacheUtil('keycloak')
  const cachedKeycloakAccesstoken = await cachedKeycloak.get('accesstoken')
  const cachedKeycloakRefreshToken = await cachedKeycloak.get('refreshToken')

  const initOptions = { url: process.env.VUE_APP_AUTH_URL + '/auth',realm: 'mp',clientId: 'mobile',checkLoginIframe: false,onLoad: 'login-required',token: cachedKeycloakAccesstoken,refreshToken: cachedKeycloakRefreshToken }
  const keycloak = KeycloakIonic(initOptions)

  keycloak.init({
    adapter: 'capacitor-native',pkceMethod:'S256',onLoad: initOptions.onLoad as any,redirectUri: process.env.VUE_APP_REDIRECT_URI
  }).then((auth: any) => {
    // auth and create app
    if (!auth) {
      console.log(auth)
    } else {
      const app = createApp(VueApp)
        .use(IonicVue)
        .use(router)
        .use(store)

      router.isReady().then(() => {
        app.mount('#app')
      })
    }
  }).catch((e: Error) => {
    console.log('auth Failed: ',e)
  })

  keycloak.onAuthSuccess = () => {
    console.log('authenticated!')

    // save tokens to device storage
    cachedKeycloak.set('accesstoken',keycloak.token)
    cachedKeycloak.set('refreshToken',keycloak.refreshToken)
  }
}

initKeycloak()

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

capacitor deep-linking ionic-framework keycloak