IdentityModel / oidc-token-manager

Apache License 2.0
51 stars 36 forks source link

Support for popular frameworks #44

Closed rosieks closed 8 years ago

rosieks commented 8 years ago

Hi I'm wonder if you are maybe thought about provide some library dedicated for specific frameworks like Angular 1.x, Angular 2.0 or Apache Cordova. Something similar to what Microsoft provides for ADAL:

It would be really great to have something what I just add and it works but don't require me to use ADAL.

brockallen commented 8 years ago

@ryanwischkaemper

It comes down to time and money (as I am self-employed and am not funded by anyone). You can't be naive enough to assume that open source is free. I have to pay my bills (as we all do) and your company receiving the benefits of this (and/or other OSS libraries) has little room to complain unless the company somehow contributes back. This can be in the form of sponsorship, or in the form of time and effort from employees to assist on the project.

So given the vocality of your high expectations, what do you offer to help bring this library into the modern era?

tonyeung commented 8 years ago

I'm not sure about ng2 or cordova, but integration with ng1 is relatively pain free. What kind of issues are you having with integration with those frameworks?

rosieks commented 8 years ago

Hi @tonyeung Integration with angular 1.x isn't so hard, but unfortunately when you type oidc token manager angular there is also not so much good results. Of course the first one is really useful but it's still lack restricting access to routes.

Cordova is much worst case - solution with using InAppBrowser is a bit clumsy (probably for that reason ADAL use some native code to manage tokens). Also requires much more code to make it working. Additionally there are some restrictions from mobile platforms regarding some capabilities in Cordova which make it even harder (e.g. internetClientServer or privateNetworkClientServer).

tonyeung commented 8 years ago

you wouldnt use the oidc token manager to restrict access to routes in the first place. You should be doing that using an event handler listening to routeChangeStart or stateChangeStart. You would just pass the token manager service into the run block and pull what you need to authorize your pages.

brockallen commented 8 years ago

So yes, @rosieks I agree -- I'd love to have the time to make this handle all of those environments. All I can say is "possibly eventually?". @ryanwischkaemper brought up some valid points, and with enough time I'd love to be able to address them, but it is a time issue. This library is a v1 in essence, so the fact that there's something at all should be something to at least get started with, even if it means forking or doing your own home grown based on this as a starting point.

leastprivilege commented 8 years ago

So given the vocality of your high expectations, what do you offer to help bring this library into the modern era? @ryanwischkaemper

nothing - it seems.

rosieks commented 8 years ago

@tonyeung - I'm trying to use stateChangeStart but unfortunately it doesn't work well:

$rootScope.$on('stateChangeStart', function (event, next) {
    if (next.restricted && tokenManager.expired) {
        event.preventDefault();
        tokenManager.redirectForToken();
    }
});

Unfortunatelly it ends up with never ending ledirect loop because preventDefault change url to previous and redirectForToken doesn't change it synchronously.

tonyeung commented 8 years ago

Try sticking it into a $timeout. Also, why are you manually refreshing the token? Why not have it silently renew?

rosieks commented 8 years ago

First of all I'm not trying to manually refresh the token. User tries to reach some route that requires user to be authenticated. I'm just checking if token is expired. If it is then I call redirectForToken to let user login in IdentityServer. That's pretty the same what you have here: https://github.com/AzureAD/azure-activedirectory-library-for-js/blob/master/lib/adal-angular.js#L194

Using $timeout doesn't help. In my case user tries to reach '/' url. But I have no such state so it redirect's user to '/home'. But home requires user to be authenticated. I check that and it looks like he isn't so I preventDefault and call redirectForToken. Angular notice that I have prevented action and move me back to '/'. Then angular notice that there is no such state and redirect's to '/home'. That way I end up with infinite loop.

tonyeung commented 8 years ago

You don't have a signin page?

rosieks commented 8 years ago

No, IdentityServer is my signin page

rosieks commented 8 years ago

Sure I can, I just thought that redirectForToken is for that.

tonyeung commented 8 years ago

you know, I don't have a prevent default in my project. I simply redirect and then return. You might want to create a login page that is public which only exists to redirect the user to the redirectForToken

rosieks commented 8 years ago

Yeah, but I don't see what could be on this page. I don't know - maybe only text "Redirecting to login page"

tonyeung commented 8 years ago

pretty much. unless your users connect via dial up, all they should see is a screen flash, if even that. Its too bad there isn't a redirectForToken silent for situations where the user can be silently authenticated via SSO.

ryanwischkaemper commented 8 years ago

@leastprivilege @brockallen I started on a update to this project. Progress so far is here. I've only done a rough port to Typescript so far, but it builds, runs, and unit tests are set up.

Interested on getting feedback on the structure of it.

Benefits

Why pick SystemJS Publishing a modern Javascript library nowadays isn't simple. People want to use their package manager and build tool of choice, and they also often want to be able to run the same library in NodeJS and the browser.

Whether you use Browserify, WebPack, RequireJS, Rollup, jspm, etc, etc, or still want to use libraries on the global scope - you'd still be able to use this library. It could be consumed easily by npm or jspm package managers. It wouldn't be able to be used in NodeJS right away, though, until certain things were shimmed in the codebase (like depending on window to be there).

ryanwischkaemper commented 8 years ago

As a followup, what do you think about merging this repo and the oidc-client one? There are shared concerns by both and they are both very small

brockallen commented 8 years ago

@ryanwischkaemper

I'm swamped this week, but will have a look next week. Thanks.

ryanwischkaemper commented 8 years ago

If using SystemJS is decided to be desirable going forward for this project, then I'll finish work on my fork and open a PR.

brockallen commented 8 years ago

@ryanwischkaemper please hold off. I've not yet had time to look into it. I'm also not convinced of TS (babeljs or some such might be an alternative). I just don't want you spend a ton of time if it's not been discussed.

ryanwischkaemper commented 8 years ago

@brockallen Agreed - I haven't done and won't do anything else until a decision is made. Also, what I have done so far wouldn't take long to convert to plain JS and use Babel as the transpiler. That's easy with SystemJS

brockallen commented 8 years ago

Ok, thanks. I need to get myself up to speed more than anything else so, as always, time is the main bottleneck here.

mvarblow commented 8 years ago

+1 for systemjs and typescript; will make this excellent library drop into an angular 2 application very nicely.

tonyeung commented 8 years ago

@ryanwischkaemper @mvarblow What is the reason for systemjs vs webpack or gulp? I'm currently using gulp, evaluating webpack, looked at systemjs and could not find how systemjs/jspm does chunking, lazy loading, dev servers, etc.. In summary, am I mistaken to think jspm/systemjs as a comprehensive dev/prd build system that i can use to rapidly prototype, test, and deploy apps?

I don't have any preference at this point, just trying to understand the differences/pros/cons of each (already using typescript).

mvarblow commented 8 years ago

Actually, I'd like to see it packaged in a way that makes importing it into a webpack-bundled typescript (or es6) application just work. If it works in systemsjs from a typescript application then I assumed that it would also work from webpack. For example, if it's packaged as an AMD module generated from typescript I'll be happy.

I've been unable to get the current version to work in a webpack bundle using typescript. To get it to work I had to import a customized version of the dist file. I had to customize the dist file to prevent compile errors on the require of the 'vertx' library, which I've been unable to locate.

ryanwischkaemper commented 8 years ago

@tonyeung

What is the reason for systemjs vs webpack or gulp?

Gulp is a streaming build system - it's not comparable to SystemJS or webpack. SystemJS is a "universal dynamic module loader" (from their README) and webpack is a "bundler for modules" (from its README).

Essentially, SystemJS and webpack support writing code in CommonJS, AMD, or ES6 module format and dealing with the resulting complexities of interoperability of the different module formats, transpiling (if using Babel/Typescript or similar), compilation, and bundling. If you use SystemJS or webpack, you are not limited (for the most part) to what external libraries you use; and, most importantly, it doesn't limit consumers of your library because your library can be built in a variety of formats from the same source code.

am I mistaken to think jspm/systemjs as a comprehensive dev/prd build system that i can use to rapidly prototype, test, and deploy apps

No, you are not mistaken - SystemJS/jspm can and is used in this capacity on a large number of open source and closed source enterprise projects. I'd strongly encourage you to read over the README's for the two projects to get a better understanding, and if you'd like to get some insight for using SystemJS from dev to production then the jspm 0.17 beta guide. Even though it is a guide for the beta version (which is largely stable and not far off from being released), the concepts largely apply to the current stable version.

@mvarblow

Actually, I'd like to see it packaged in a way that makes importing it into a webpack-bundled typescript (or es6) application just work

That's how we (developers) want all of our libraries to be packaged - so that consumers can import it into their project and have it just work. SystemJS (and webpack) allow this.

tonyeung commented 8 years ago

@ryanwischkaemper The beta guide helps a lot with understanding the capabilities of SystemJs since their README left me scratching my head quite a bit. I find the docs a bit heavy on features and light on usage.

I'll need to play around a bit more with webpack and systemjs to be sure of how I feel about each. At this point jspm/systemjs reminds me a lot of grunt. There seems to be a big focus on configuration which kind of makes it feel like a black box. Webpack docs seem to explain the intended usage better.

This probably has a lot more to do with the amount of docs available for each project so I'll play around with them first before I decide what I'll use on my projects. Thanks for the explanation.

brockallen commented 8 years ago

Would any of you be interested in a google hangout sometime this week to discuss? I'm timezone EDT/UTC-4 (as of today's time change).

I want:

the unit tests are all on me. the dependency management is really just a matter of changing how the tooling is used. and packaging is the final unknown that i think this thread is now discussing.

i spent several hours last week doing research on babel vs. TS, as well as jspm vs webpack. I'm still undecided on it all. these would be something to discuss as well if we had a call.

RichiCoder1 commented 8 years ago

Color me interested!

ryanwischkaemper commented 8 years ago

@brockallen I'm interested. I'm CDT/UTC-5

tonyeung commented 8 years ago

@brockallen I'm in if I can make it. Also CDT/UTC-5.

brockallen commented 8 years ago

Ok, I'm thinking Thursday at 10AM EDT. Any objections?

tonyeung commented 8 years ago

i don't have any meetings scheduled for that time so it should be tentatively okay for me

ryanwischkaemper commented 8 years ago

That time works for me

RichiCoder1 commented 8 years ago

That'd work by me.

brockallen commented 8 years ago

Ok, sounds like a plan: https://plus.google.com/events/c7rthjgvvmbk84hj5vbu9bt1850?authkey=CKXOzIfRz9-07AE

brockallen commented 8 years ago

For anyone else watching here, here's the first major cut done in es6: https://github.com/IdentityModel/oidc-client-js/issues/2

brockallen commented 8 years ago

Rewritten oidc-client now released: https://github.com/IdentityModel/oidc-client-js. As for Angular, etc. those could be nice contrib projects on top.