Feat: Keycloak support

[DanielScholte]

Describe the Feature

Add Keycloak support to the AccessToken request. According to the original openid spec, the Token request needs to be performed with url encoding and the "application/x-www-form-urlencoded" header. Currently, the request is performed using Form Data.
I've only tested this on Web, not on Android or iOS.

Platform(s) Support Requested

• Android
• iOS
• Web

Describe Preferred Solution

Ideal situation would probably be a setting, where you can configure how the request should be performed.

Describe Alternatives

Perhaps add an option where the response from the code request is returned, so the Token request can be executed manually. I see this is already on option, but according to the README, this isn't working on iOS?

[TobiasFPJS]

I have an ionic pwa running on IOS with this plugin with a keycloak backend no problem.

[DaSchTour]

I have an ionic pwa running on IOS with this plugin with a keycloak backend no problem.

That sounds great. Could you provide some details, configurations, examples, hints and so on?

[TobiasFPJS]

Exactly what do you need? I have just set up this this plugin according to the specs of the standard AOuth with the info from my keycloak server. Fyi. my pwa only runs on Android/iPhone, so I dont know if it works in a standard chrome browser, etc.

[aligator]

As I also had some problems configuring this lib for keycloak, here my findings:

1. Android API level >= 28 Forces to use https by default. So you cannot use a local test-keycloak instance without enabling android:usesCleartextTraffic="true" in the android manifest (should be false for production!)
2. At first I did not understand how the redirectUrl has to look like.
   It must look like this:

   redirectUrl: 'com.example.app:/'

   if your Android manifest contains this:

   <data android:scheme="@string/custom_url_scheme" android:host="oauth" />

   and your strings.xml contains this:

   <string name="custom_url_scheme">com.example.app</string>

A complete example config looks like this:

    {
      authorizationBaseUrl: 'https://keycloak.example.com/auth/realms/yourrealm/protocol/openid-connect/auth',
      accessTokenEndpoint: 'https://keycloak.example.com/auth/realms/yourrealm/protocol/openid-connect/token',
      scope: 'email profile openid',
      resourceUrl: 'https://keycloak.example.com/auth/realms/yourrealm/protocol/openid-connect/userinfo',
      web: {
        appId: 'yourclientid', // clientId
        responseType: 'token', // implicit flow
        accessTokenEndpoint: '', // clear the tokenEndpoint as we know that implicit flow gets the accessToken from the authorizationRequest
        redirectUrl: 'http://localhost:3000',
        windowOptions: 'height=600,left=0,top=0',
      },
      android: {
        appId: 'yourclientid', // clientId
        pkceEnabled: true,
        responseType: 'code', // if you configured a android app in google dev console the value must be "code"
        redirectUrl: 'com.example.app:/', // package name from google dev console
      },
      ios: { 
// Not tested yet!
        appId: 'yourclientid', // clientId
        responseType: 'code', // if you configured a ios app in google dev console the value must be "code"
        redirectUrl: 'com.example.app:/', // Bundle ID from google dev console
      },
    }

3. I think in keycloak you have to enable the implicit Flow in your realm for the web-authentication to work. (for the app-authentication I think this is not needed.)

[weihsth]

Hi,

on iOS Safari alway tells me, that "com.example.app:/" is not a valid url.. so redirect is not working. For Android it works like a charm with keycloak. Any ideas?

[weihsth]

For all having problems with iOS... I solved it!

This docu: https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app tells us to configure this:

Identifier: com.example.myphotoapp URL Schemes: myphotoapp Role: Viewer

But it needs to be:

Identifier: com.example.myphotoapp URL Schemes: com.example.myphotoapp <-- !!!! Role: Viewer

The change has to be done in X-Code > App (on left side) > Info (Tap) > "URL Types ()" (collapse) ...

And in Keycloak, the redirect_uri stays:

com.example.myphotoapp:/

[JorgHunsel]

I struggled with the redirect URL on android. The following worked for me:

1. Add deeplinking to your project: https://capacitorjs.com/docs/guides/deep-links
2. In the android manifest: add the following inside the activity:

<intent-filter>
                <data android:scheme="com.your.app" android:host="oauth" />
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT"/>
                <category android:name="android.intent.category.BROWSABLE" />
</intent-filter>

note the android:scheme and the android:host

3. In your OAuth2Options for capacitor, set the redirectUrl as follows:

android: {
    appId: YOUR-CLIENT-ID,
    responseType: "code",
    redirectUrl: "com.your.app://oauth",
  },

4. Test deeplinking as follows: https://code.tutsplus.com/tutorials/how-to-enable-deep-links-on-android--cms-26317

[Excel1]

Currently im also try to implement this library with keycloak and capacitor. Can someone provide a complete exampe (for the ReadMe)? Maybe we can create a PR :)