Angular 2 Oauth2 with smart on fhir sandbox

[jason judis]

Hello everyone,

Has anyone here had any success getting their Angular 2 app a basic authorization through the smart health it sandbox. I have gotten it to work outside of Angular with a small app, but I either don't fully understand how it works because I did it through a Cerner tutorial, or I am messing something up. If I need to give more information  I can, but any help would be appreciated. I just want to be pointed in the right direction. Right now the launch URL goes into an infinite loading screen, but the console has no errors. 

[Mayank Yaduvanshi]

Same problem here. Let me know if you and anyone done it?

[Chris Meeusen]

Yeah I've built a few apps using angular (2 and 4).  What in particular caused you a problem?

[Lorena González]

Hi, same problem here.

I'm building an Angular 4 app. I've managed to do the "launch" part:

FHIR.oauth2.authorize({

"client_id": "app-smart-angular",

"scope": "patient/*.read"

}); 
However, once I am in the main app I am not able to read objects from FHIR server. I've used this function:

FHIR.oauth2.ready(function(smart){

var patient = smart.patient;

var pt = patient.read();

this.gender = patient.gender;

});

It seems like .ready() function is never called.

I've used these snippets outside Angular and I got it work. Can someone help me?

[Eric Soto]

I am experiencing the same issue. Were you able to get FHIR.oauth2.ready working with Angular 4?

[Vladimir Ignatov]

There are two things that you can try to further debug the issue:

1. Use another function as second argument for FHIR.oauth2.ready. The first function (that you are using already) is only called on success while the second should be called in case of error. Then perhaps just console.log the arguments to see if an error or error message is passed to that function. Note that it might also receive a request object which contains an error response or something like that... 

2. After you authorize the app, you should be redirected back to the redirect_uri. Look at the browser URL and see if you have extra URL parameters appended to it like "error” and “error_description”. Errors that originate at the auth server might be sent to you this way.

Hope that helps,

Vlad

 

--
You received this message because you are subscribed to the Google Groups "SMART on FHIR" group.
To unsubscribe from this group and stop receiving emails from it, send an email to smart-on-fhi...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Eric Soto]

Thanks Vlad! Adding the second function to catch the error message did the trick. Now to figure out why the following error is being thrown

No 'state' parameter found in authorization response.

[Vladimir Ignatov]

This is a common error message. It typically means that your app is not launched properly. What are you using for that? Can you try with https://launch.smarthealthit.org ?

Vlad

[Eric Soto]

Vlad,

Yes, I am using http://launch.smarthealthit.org to launch the application. For testing purposes I'm running the application locally so I'm passing in the following for the App Launch URL: http://localhost:4200/omhonfhir/launch. The application is written in Angular 5 and I'm using the fhir-client.js library to perform interactions with the SMART Oauth server. The ngOnInit() function of the launch component uses the following to start the auth process.

FHIR.oauth2.authorize({
  "client_id": "test_client",
  "scope":  "patient/*.read"
});

I was following the information from the tutorials on the SMART website http://docs.smarthealthit.org/tutorials/testing/. Is there something I am missing in the config passed to the authorize function?

Thanks,

Eric

To unsubscribe from this group and stop receiving emails from it, send an email to smart-on-fhir+unsubscribe@googlegroups.com.

[Michele Mottini]

Did you try adding a 'state'  parameter as well (with anything as a value)?

 - Michele

  CareEvolution Inc

[Vladimir Ignatov]

I have never used this library with angular. Looking at the code, the only thing I can think of is that your app could somehow mess with your location (url, query string, hash…). The fhir client also modifies your location so this might lead to race conditions. Perhaps you can try the same with pure JS (see https://github.com/smart-on-fhir/sample-apps-stu3)  just to test if the problem is at the angular client?

Vlad

[Eric Soto]

Thanks Vlad! This is definitely looking like an Angular issue. The sample app https://github.com/smart-on-fhir/sample-apps-stu3/tree/master/authorize-client launches and works as expected.

Michele, is there any documentation that shows how to pass state, and other parameters? Scanning the source code I was thinking it might be something like this:

FHIR.oauth2.authorize({
  "client":{
    "client_id": "test_client",
    "scope":  "patient/*.read",
    "state": "1234"
  }
});

but I'm just trying to find some solid documentation to support what I was thinking.

Thanks!

Eric

To unsubscribe from this group and stop receiving emails from it, send an email to smart-on-fhir+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "SMART on FHIR" group.

To unsubscribe from this group and stop receiving emails from it, send an email to smart-on-fhir+unsubscribe@googlegroups.com.

[Michele Mottini]

Don't know about documentation, sorry. That would be my guess as well - does it work?

  - Michele

  CareEvolution Inc

[Eric Soto]

I was not able to get it to work with Angular 5, however I did get it working with AngularJS. The key was to make sure you include the "launch" scope on the authorize request from your launch controller. So the call to the fhir-js-client.js API from your launch controller would look like.

FHIR.oauth2.authorize({
    "client_id": "test_client",
    "scope": "patient/*.read launch"
});

I'm off to the races now. I'm just porting my application from Angular to AngularJS. All is good. Thank you for the help.

[Kevin Dufendach]

Hi Eric,

I didn't chime in earlier because it seemed you wanted to use the fhir-client.js library, but if you still want to use Angular 2+, I have had some success with using the angular-oauth2-oidc client. I did have to modify it slightly to store the headers returned from the OAuth server, so my fork is here: https://github.com/KevinDufendach/angular-oauth2-oidc. This then allows you to use the Definitely Typed FHIR classes in your application and keeps the type-safe properties of typescript. I haven't yet converted all the search & other information retrieval methods from fhir-client.js into typescript.

Also (in the form of unsolicited advice), if you continue to develop with AngularJS, be sure to check out John Papa's AngularJS style guide (https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md). It'll help keep things familiar coming from Angular 2+.

Hope that helps,

Kevin

Kevin R. Dufendach, MD, MS, FAAP
Assistant Professor, Pediatrics and Biomedical Informatics
Neonatologist | Clinical Informatician

Cincinnati Children's
3333 Burnet Avenue, MLC 7024, Cincinnati, OH 45229

To unsubscribe from this group and stop receiving emails from it, send an email to smart-on-fhi...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "SMART on FHIR" group.

To unsubscribe from this group and stop receiving emails from it, send an email to smart-on-fhi...@googlegroups.com.

[Ram G]

Hi Everyone,

You can find a working sample application which makes use of Angular and SMART on FHIR JS client library here.

https://github.com/CHBase/smart-ng-fhir-app

Thanks,

Ram