tomjackman / keyonic-v2 Goto Github PK

In browser its working fine, but for mobile its showing the blank page

Hello

When I login with a normal user (that is, with username and password) I can see the users details in the app. But if I try using a social login, such as Facebook, I cannot see the users details in the app - even though these details are visible in Keycloak.

Any ideas as to what I am doing wrong?

Thanks

Do you have plans to update or can help with these migrations? I have tried to build and run but with no success. My environment now is npm 13, ionic 4 and angular 9. I get a lot of problems.

The app works when I test it using the browser. But, if I build and install on my phone, so don't works. The keycloak console show this message:

10:56:34,563 WARN [org.keycloak.events] (default task-22) type=LOGIN_ERROR, realmId=keypress, clientId=keyonic-v2, userId=null, ipAddress="my-device-ip", error=invalid_redirect_uri, redirect_uri=http://localhost

And, on my device, I receive this message:

Hi everyone,

I have lost countless hours searching for a solution and this is my last chance to solve the problem.
I cloned the repo and make it work properly very easily, connecting it to my realm in Keycloak. I have seen that this example makes the authentication page of Keycloak's realm load on app's start; I need to do the same thing, but only when the user wants to login in the app, so in a component that is loaded after.

Just to be clearer; the user opens the app and do whatever he wants; at a certain point, he needs to login to see some information. So he clicks on the button and at this point it should open the Keycloak view and check whether the credentials are correct or not, and just in case redirect him to a page.

I think the problem is with the keycloak.js loaded in index.html, that it's inizialized at first and then the KeycloakService is called before the App Component loading, but I can't figure how make it work.

I hope I was (enough) clear!

Thanks in advance,

I'm having this trouble:

Refused to display 'http://localhost:8080/auth/realms/keypress/protocol/openid-connect/auth?client_id=keyonic-v2&redirect_uri=http%3A%2F%2Flocalhost%3A8100%2F%3Fionicplatform%3Dios%26ionicstatusbarpadding%3Dtrue%26http%3A%2F%2Flocalhost%3A8100%2Fionic-lab&state=e913b2b2-bb6e-4297-a606-936c023e0592&nonce=927f0da2-ae91-4fa2-86f3-fe6022d2de51&response_mode=fragment&response_type=id_token%20token&scope=openid' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".

I made this steps:

• clone the project

• npm install -g ionic cordova

• nvm use 6.9

• import realms and users(keyonic-v2-realm.json, keyonic-v2-users.json)

• ionic serve --address localhost

But this trouble appears only when i try to access http://localhost:8100/ionic-lab, when i try to access localhost:8100 works fine.

Hi, I think something is missing, however I have this problem when I run the init when the application starts.
The error refers to this line:
let keycloakAuth: any = new Keycloak (keycloakConfig);
Error: ReferenceError: Keycloak is not defined

Can you give me some help?
Thank you.
Leonardo

Hi @tomjackman

Thanks for your project. I got it working on my browser on my phone. However I'd like to run my app as a native IOS app. How do I do this? Can I run the sign on process using an inAppBrowser, or would I need to run the entire app in an inAppBrowser? I'm trying to wrap my head around how this works..

Cheers,
--Kurt

Hi there,

My Setup
I'm running your project on my physical Android device with my own keycloak server.
I've also installed the officially supported Ionic InAppBrowser plugin in order for the user to perform the login "inside my app".

Issue 1, not resolved
When my app loads, it immediately sends me to the keycloak served login page as dictated by the main.ts file.

So far so good. If I don't login but rather use the back button of the Android device, I'm experiencing an issue. It closes the InAppBrowser, and shows no signs of my application except for the tag of the page. I know, because if I change the body's background colour to red using CSS, I see a red page.

I think it's safe to assume that some Android users will click the back button while viewing the Keycloak login page. At the moment, I don't know how to "fix" this, as I cannot find a way to listen for the "close" event of the InAppBrowser. Any help would be appreciated!!

Issue 2, which I can fix
If I then press the back button AGAIN, the app goes to the background (not force-killed). Then, when the app is re-opened, the InAppBrowser is not ready, and the default OS browser opens, so the user doesn't experience opening my app.
I've came around this issue by putting your KeycloakService.init call inside a deviceready callback (main.ts file still):

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    console.log("onDeviceReady");
    initAppWithKeycloak(); //calls the block of code containing the KeycloakService.init() and the Promise callbacks
}

I am getting following error after successful login, what could be the issue?