SAML SSO integration with Ionic

1

We are developing a cross-platform ionic app that will be a reflection of the Content Management System that is secured with SAML 2.0 SSO. The mobile app will also be secured with the same SSO implementation.

The approach i took was to open the SAML login URL in an inAppbrowser, prompting the user to enter the credentials and allow all the necessary redirects to happen. Once the user is successfully authenticated against the Idp and redirected back to the SP for SAML token assertion and a cookie generation, i tried to read the cookie value through an javascript code on a loadstop event, save it to local storage, so we can re-use it from the ionic app for any subsequent request. The Authtoken cookie HttpOnly flag is set to 1, not allowing me to read the value and save it.

Are there any other options to either read the cookie token or somehow make a POST call to fetch this token, or should we take a different approach in this regard ? Is there a standard approach that i should take while integrating with SAML based SSO ?

If forum experts here can outline the right approach, it will be really helpful.

Regards, V.

2

I’m curious, did you find a solution and decide on a approach?

3

me too… looking for an answer which doesnot use auth0.

4

Any update on a solution using SAML?? Were you able to access the token?? It’s like a soap opera here…so much suspense!!

5

I am able to access cookies in Android as the latest plugin returns cookie with the loadStart callback event. But in IOS I have worked around in plugin native code and sending cookie with the loadstart event similar to android. Is there a better solution for this?

For Reference of my work around find the below link.

1 Like
6

Hi Vidhyashankar,

How did you configure SAML Login URL ?
Can you explain in rough sketch ?

Regards,
Anand

7

Ok one way around this is to register a custom URL scheme for your app (in the example below I have called this myscheme).
You’ll need this plugin: cordova-plugin-customurlscheme

Once you come back from the SAML login you drop them on a page that has:

<a href="myscheme://mycustomaction?foo=bar">Finished Login</a>

You can also fire this automatically using location.href='myscheme://mycustomaction?foo=bar' if you want it seamless, without the button.

Swap out foo=bar for that cookie value that you want to pass to your app. Then you’ll have to handle that.

This method is kinda cool as it’ll allow for logins from a mobile browser using Identity Provider initiated logins that pop open the app seamlessly.

The other way to do it is once they are back from the SAML login, redirect them to a page on your sever that has the cookie value in the QueryString. It’s much easier to read the QueryString value than the Cookie value from the loadstop event of the InAppBrowser:

	appBrowser= window.open(SAMLURL, '_blank', 'location=no,EnableViewPortScale=yes,toolbar=yes,closebuttoncaption=Close');
	appBrowser.addEventListener('loadstop', function (event) {
		if (event.url.indexOf('foo') >= 0) {
			appBrowser.close();
			...
		}
	});

Or do both methods and be fully covered :-).

8

@galaxathon, Can you please provide the full implementation of it?

9

@Apptestgenerate That’s a lot of files, and very very custom… so no, I can’t provide a full example. What don’t you understand?

10

Hi, i am facing the same issue. I have successfully implemented oAuth 2.0 on my app manually with an ADFS server.
Now, i am confused with what should be the steps to implement SAML with the same server.
Can you kindly give a brief overview of the steps you used to get the correct token and close the browser on successful auth.

Thanks
Sourav

11

I have added cookie parameter for loadstart Callback event. for both android and ios.
For reference, you can take look at my repository.for any help you can DM me.

12

Hello Galaxathon, I was able to that, open the browser using InAppbrowser, and then login, but after login to the SAML , invoking the axios get request seems the cookie is not present in the APP, but its only present in the browser

13

Me too, I’m stuck with it…
I tried to use the cookie master , but it seems it doesn’t have a ionic-native equivalent…

14

How is the cookie parameter use in loadstart ?

15

Hello Any one have done Azure AD in ionic through SAML. Please is it any way to integrate SAML in iONIC App , Please share a link.

16

Hi Vidyashankar,

Same thing i am working on SAML SSO integration in ionic app but no more documentation and details in ionic documentation, Please if you have any thing related share me

17

Check this out it might be helpful for you
options: InAppBrowserOptions = {
location: “no”,
toolbar: “yes”,
// location: ‘yes’,//Or ‘no’
hidden: “no”, //Or ‘yes’
// clearcache: “yes”,
// clearsessioncache: ‘yes’,
// zoom: ‘yes’,//Android only ,shows browser zoom controls
hardwareback: “no”,
// mediaPlaybackRequiresUserAction: ‘no’,
// shouldPauseOnSuspend: ‘no’, //Android only
closebuttoncaption: “Close”, //iOS only
disallowoverscroll: “no”, //iOS only
// toolbar: ‘yes’, //iOS only
enableViewportScale: “no”, //iOS only
// allowInlineMediaPlayback: ‘no’,//iOS only
presentationstyle: “pagesheet”, //iOS only
// fullscreen: ‘yes’,//Windows only
};

var pageContentUrl = "data:text/html;base64," + btoa(this.html);
const browser = this.iab.create(pageContentUrl, "_blank", this.options);
browser.on("loadstart").subscribe((e) => {
  console.log("URL OF IAB", e.url.toLowerCase());
  console.log("URL OF HOST: ", this.host.toLowerCase());
  if ( e.url.toLowerCase() === this.host.toLowerCase()+'/' ) {
    browser.close();
    this.goToLogin();
  }
});
18

Can anybody point me on the full guide on how to implement this? TIA