在Keycloak页面上登录后重定向到应用Android的错误

Question

我正在跟踪集成了Vue.js和Keycloak服务器的示例https://github.com/dsb-norge/vue-keycloak-js/tree/master/examples/hello-keycloak。 我尝试使用此示例https://github.com/keycloak/keycloak/tree/master/examples/cordova-native来构建Android应用。 问题在于，成功登录keycloak页面后，redirect_uri不起作用，也无法在应用程序上返回我。
可能是我使用的是通用链接或插件。

这是我的config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="vuejs.cordova.sample" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>VueJS Cordova Sample</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="dev@cordova.apache.org" href="http://cordova.io">
        Valentin Brosseau
    </author>
    <content src="index.html" />
    <access origin="*" />
    <allow-navigation href="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="*" />
        <preference name="loadUrlTimeoutValue" value="700000" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
    <preference``` name="AndroidLaunchMode" value="singleTask" />
    <universal-links>
        <host name="vuejs.cordova.sample" scheme="http">
            <path event="keycloak" url="/cas_list" />
        </host>
    </universal-links>
    <preference name="SplashScreenBackgroundColor" value="#FFFFFF" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="BackgroundColor" value="#FFFFFF" />
    <preference name="DisallowOverscroll" value="true" />
    <preference name="ShowSplashScreenSpinner" value="false" />
    <preference name="StatusBarOverlaysWebView" value="false" />
    <preference name="StatusBarBackgroundColor" value="#313AA5" />
    <preference name="HeaderColor" value="#313AA5" />
    <plugin name="cordova-plugin-android-window-background" spec="^1.0.1">
        <variable name="WINDOW_BACKGROUND_COLOR" value="#ffffff" />
    </plugin>
    <plugin name="cordova-plugin-camera" spec="^2.4.1" />
    <plugin name="cordova-plugin-dialogs" spec="^1.3.3" />
    <plugin name="cordova-plugin-flashlight" spec="^3.2.0" />
    <plugin name="cordova-plugin-geolocation" spec="^2.4.3" />
    <plugin name="cordova-plugin-headercolor" spec="^1.0.0" />
    <plugin name="cordova-plugin-statusbar" spec="^2.2.3" />
    <plugin name="phonegap-nfc" spec="^0.6.6" />
    <plugin name="cordova-plugin-vibration" spec="^2.1.6" />
    <plugin name="cordova-plugin-file-transfer" spec="^1.7.1" />
    <plugin name="cordova-plugin-advanced-http" spec="^2.0.9" />
    <plugin name="cordova-plugin-file" spec="^6.0.1" />
    <plugin name="cordova-plugin-deeplinks" spec="~1.1.0" />
    <engine name="ios" spec="^4.5.5" />
    <engine name="android" spec="^7.1.4" />
</widget>

这是我的main.js

// import '@babel/polyfill'
import vb from 'vue-babylonjs'
import 'babylonjs-loaders'
import 'babylonjs-inspector'
import './plugins/vuetify'
import './plugins/vuetify-extra'
import VueKeycloakJs from '@dsb-norge/vue-keycloak-js'
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import i18n from './i18n'
import 'roboto-fontface/css/roboto/roboto-fontface.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
import VueApexCharts from 'vue-apexcharts'
import VueZoomer from 'vue-zoomer'
import 'vue-zoomer/dist/vue-zoomer.css'
import axios from 'axios'

Vue.use(VueZoomer)

Vue.config.productionTip = false
Vue.use(vb)
function tokenInterceptor () {
  axios.interceptors.request.use(config => {
    config.headers.Authorization = `Bearer ${Vue.prototype.$keycloak.token}`
    return config
  }, error => {
    return Promise.reject(error)
  })
}

Vue.use(VueKeycloakJs, {
  init: {
    // Use 'login-required' to always require authentication
    // If using 'login-required', there is no need for the router guards in router.js
    // adapter: 'cordova-native',
    // responseMode: 'query',
    onLoad: 'login-required',
    // redirectUri: 'android-app://vuejs.cordova.sample/https/keycloak-cordova-example.github.io/secret'
    // redirectUri: 'android-app://vuejs.cordova.sample/http/localhost/cas_list'
    // redirectUri:'http://localhost:8080/*'
    // redirectUri: 'http://localhost'
    redirectUri: 'android-app://vuejs.cordova.sample/http/vuejs.cordova.sample/cas_list/'
    // redirectUri: 'android-app://vuejs.cordova.sample/http/10.0.1.4:8080/secret'
  },
  config: {
    url: 'http://10.0.1.10:8180/auth',
    clientId: 'test-app',
    realm: 'Test'
  },
  onReady: (keycloak) => {
    tokenInterceptor()
    new Vue({
      router,
      i18n,
      VueZoomer,
      render: h => h(App)
    }).$mount('#app')
  }
})

Vue.use(vb);
// const init = () => {
//   new Vue({
//     router,
//     i18n,
//     VueZoomer,
//     render: h => h(App)
//   }).$mount('#app')
// };
Vue.component('apexchart', VueApexCharts)

// // Wait for the deviceready event to start the render
// document.addEventListener("deviceready", () => {
//   // eslint-disable-next-line
//   console.log("Ready, Render the App");
//   init();
// });

const isCordovaApp = (typeof window.cordova !== "undefined");
if (!isCordovaApp){
  document.dispatchEvent(new CustomEvent("deviceready", {

  }));
}

Object.defineProperty(Vue.prototype, '$locale', {
  get: function () {
    return i18n.locale
  },
  set: function (locale) {
    i18n.locale = locale
  }
})

这是我的router.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    // {
    //   path: '/',
    //   name: 'login',
    //   component: () => import(/* webpackChunkName: "login" */ '@/views/Login.vue'),
    //   meta: {
    //     requiresAuth: true
    //   }
    // },
    {
      path: '/',
      name: 'Dashboard',
      component: () => import(/* webpackChunkName: "dashboard" */ '@/views/Dashboard.vue'),
      meta: {
        requiresAuth: true
      }
    },
    {
      path: '/cas_list',
      name: 'cas_list',
      component: () => import(/* webpackChunkName: "cas_list" */ '@/views/Cases_list.vue'),
      meta: {
        requiresAuth: true
      }
    },
  ]
})

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (router.app.$keycloak.authenticated) {
      next()
    } else {
      const loginUrl = router.app.$keycloak.createLoginUrl()
      window.location.replace(loginUrl)
    }
  } else {
    next()
  }
})

export default router

这通常是一个错误

Blocked (possibly sub-frame) navigation to non-allowed URL: http://10.0.1.10:8180/auth/realms/Test/protocol/openid-connect/auth?client_id=test-app&redirect_uri=android-app://vuejs.cordova.sample/http/vuejs.cordova.sample/cas_list&state=313d9a09-a357-4754-b15e-6516a64fac88&response_mode=fragment&response_type=code&scope=openid&nonce=6a0d0169-3074-4e06-998b-7ab2eb4b8e56
D/CordovaWebViewImpl: onPageFinished(file:///android_asset/www/index.html)