Support Keycloak

[kstan79]

Hi,

Thanks of this plugin and it reduce my work. I'd modify providers/provider.js to support keycloak, tested it work in ios only. Android it show blank page instead of login form (Seems SSL issue), after by pass SSL it still facing another issue which is webview no callback success status (another error which is session not exists). Need your advise how to make it work in android.

Below is the additional code of provider.js:

//add keycloak into provider.js
var TnsOaProviderKeycloak = (function () {
    function TnsOaProviderKeycloak(options,keycloakbaseurl,realm) {
        this.openIdSupport = "oid-none";
        this.providerType = "keycloak";
        this.authority = keycloakbaseurl;
        this.tokenEndpointBase = keycloakbaseurl;
        this.authorizeEndpoint = '/realms/'+realm+'/protocol/openid-connect/auth';
        this.tokenEndpoint = '/realms/'+realm+'/protocol/openid-connect/token';
        this.cookieDomains = [realm];
        this.options = options;
    }
    TnsOaProviderKeycloak.prototype.parseTokenResult = function (jsonData) {
        return jsonData;
    };
    return TnsOaProviderKeycloak;
}());
exports.TnsOaProviderKeycloak = TnsOaProviderKeycloak;

I'm not really understand how nativescript plugin system (how .ts convert to .js) work, and the plugin seems no distribute provider.ts (in fact, our project not use typescript). So I submit above code hope you can you merge into your project and benefit others keycloak user.

for usage, auth-service.js:

function configureOAuthProviderKeycloak() {
  var serverurl='https://<keycloakserver>/auth';
  var realm='keycloakrealm';
    var keycloakProviderOptions = {        
        openIdSupport: "oid-none",
        clientId: "keycloakclientid",
        clientSecret: "clientsecret",
        redirectUri: "redirecturl",        
        scopes: ["email"]
    };
    var keycloakProvider = new providers_1.TnsOaProviderKeycloak(keycloakProviderOptions,serverurl,realm);
    return keycloakProvider;
}

at landingpage, I use below:

var auth_service_1 = require("~/auth-service");
auth_service_1.configureOAuthProviders();
auth_service_1.tnsOauthLogin("keycloak");

Thanks Ks

[kstan79]

You can refer above image, seems it server side received multiple access in same second. below is nativescript event, it shown first attemp success, and immediately show 2nd attemp error.

hope you have some clue.

[alexziskind1]

Thanks for the suggestion. Is there an open environment where I can test the keycloak auth connection? As far as TypeScript - using the plugin does not require TypeScript, you can just use JavaScript if you wish. TypeScript is there only if you need it.

[kstan79]

Hi, you may use this, I'd make this allow registration. If you encounter any issue please dont hesitate to let me know.

** By the way, oid-none and oid-full I'm notice has different behaviour but I have no ideal which one is better for us.

function configureOAuthProviderKeycloak() {
  var serverurl='https://login.simbiz.cloud/auth';
  var realm='simbiz.cloud';
    var keycloakProviderOptions = {        
        openIdSupport: "oid-none", 
        clientId: "mytesting",
        clientSecret: "7139caee-87fb-4f1f-a014-76eb4fbe61f6",
        redirectUri: "http://localhost/a.html",
        scopes: ["email","uid","name"]
    };
    var keycloakProvider = new providers_1.TnsOaProviderKeycloak(keycloakProviderOptions,serverurl,realm);
    return keycloakProvider;
}

[kstan79]

hi, after some try seems above amendment is work (previously seems server side ssl missing origin ca-bundle) so android blocked. I believe you can make this as standard

//add keycloak into provider.js
var TnsOaProviderKeycloak = (function () {
    function TnsOaProviderKeycloak(options,keycloakbaseurl,realm) {
        this.openIdSupport = "oid-none";
        this.providerType = "keycloak";
        this.authority = keycloakbaseurl;
        this.tokenEndpointBase = keycloakbaseurl;
        this.authorizeEndpoint = '/realms/'+realm+'/protocol/openid-connect/auth';
        this.tokenEndpoint = '/realms/'+realm+'/protocol/openid-connect/token';
        this.cookieDomains = [realm];
        this.options = options;
    }
    TnsOaProviderKeycloak.prototype.parseTokenResult = function (jsonData) {
        return jsonData;
    };
    return TnsOaProviderKeycloak;
}());
exports.TnsOaProviderKeycloak = TnsOaProviderKeycloak;

[kstan79]

Hi, I'm reopen this issue just for follow up hope can make keycloak officially support

[chongma]

@kstan79 could you create a PR for this? would be great to have keycloak supported by this package. how do you add this manually to the code?

[kstan79]

I add above sample into project/node_modules/nativescript-oauth2/providers/providers.js

then change auth-service.js and add following sample

function configureOAuthProviderKeycloak() {
  let customizeLoginServer = filestorage.readCustomizeLoginServer();

  let server ='https://yourkeycloakserver/auth';
  let realm =  'yourrealm';
  let keycloakProviderOptions = {
        openIdSupport: 'oid-none',  
        clientId:  'yourclientid',
        clientSecret: 'your secret',
        redirectUri: 'https://yourvalidredirecturl',
        scopes: ['email','uid','name','links']
    };

    let keycloakProvider = new providers.TnsOaProviderKeycloak(keycloakProviderOptions, server, realm);
    return keycloakProvider;
}

[chongma]

@kstan79 Thanks for your help. i added the keycloak authprovider in my project and it works fine. i didn't add it into project/node_modules/nativescript-oauth2/providers/providers.js in case the node_modules directory is updated or deleted. it would be nice if the provider was added to this project though and then i wouldn't have to define it

[SmailHammour]

Would be great to add Keycloak support.

[trane77]

Actually I'm usign keycloak just by creating a new provider. I'm using "oid-none". On development machine, when launching the application in the emulator, you need to point to this host: 10.0.2.2, it will redirect the call to the host machine 'localhost'. It's stated in android documentation. Hope it helps!

[davidpodhola]

Thank you all for the comments and @kstan79 for the code, it was the missing piece for me 👍

Following the guide to create a custom provider and @funder7 's comment you no longer need to modify the providers.js file inside of the nativescript-oauth2 package, you can create your own keycloak provider and use it.

Please see Keycloak provider for nativescript-oauth2 inside a svelte native application.

It seems to me the issue can be kind of closed now 🤔

[trane77]

Glad you solved it @davidpodhola! Probably it's better to close it after adding some info in the documentation, it can help other users to use keycloak without digging into the repository issues :-)