Polymer.js + OAuth2

Question

Is there an example out there which describes how to implement an OAuth2 authentication in the frontend based on Polymer.js?

I just found some examples that describe the procedure for AJAX, which is also part of the Polymer element set. So how to go on ahead?

What OAuth2 provider are you trying to connect to? One of the big ones like Facebook, Google, Twitter, etc or some other one? — Alan Dávalos, Jun 10 '16 at 16:19
@Alan I have implemented my own OAuth2 provider based on Node.js (http://scottksmith.com/blog/2014/07/02/beer-locker-building-a-restful-api-with-node-oauth2-server/) because we are building an on-premise solution. — Marcel, Jun 10 '16 at 16:22
Well then, if you already know how to do it using AJAX calls then you might as well use the [`iron-ajax`](https://elements.polymer-project.org/elements/iron-ajax) element since I don't think there's an element for what you need — Alan Dávalos, Jun 10 '16 at 17:46
Yes I assumed that iron-ajax can do the job - now I am figuring out how to do the authentication — Marcel, Jun 10 '16 at 18:53
Do you have sample javascript code of what you exactly want to do? It'd be easier to help you find an equivalent to that using `iron-ajax` that way — Alan Dávalos, Jun 10 '16 at 22:04
Hi @Alan, I have this one described here: http://stackoverflow.com/questions/11440398/how-do-i-implement-secure-oauth2-consumption-in-javascript — Marcel, Jun 12 '16 at 20:38
That example uses AJAX not for getting the token but for actually accessing the api, is that what you want? — Alan Dávalos, Jun 13 '16 at 21:06
@Alan Okay, so that won't be all I need. I also have to obtain a token to authenticate each request I do — Marcel, Jun 13 '16 at 21:09

score 2 · Answer 1 · answered Aug 15 '16 at 07:33

I found a git repo here which have demo. So you can take a look.

  <oauth-user></oauth-user>

  <polymer-element name="oauth-user">
    <template>
        <oauth-authenticator id="authenticator" client_id="282331888208-06mufq54k942624lv803nlm6kvlq76fr.apps.googleusercontent.com" scopes="https://www.googleapis.com/auth/userinfo.profile" on-authenticated="{{authenticated}}"></oauth-authenticator>
        <core-ajax auto id="ajax" url="{{url}}" headers="{{headers}}" handleAs="json" on-core-response="{{ajaxResponse}}"></core-ajax>
        <p>{{greeting}}</p>
    </template>
    <script>
        Polymer({
            url: '',
            greeting: '...',

            authenticated: function(event){
              var token = event.detail.token;
              this.headers = {'Authorization': 'Bearer ' + token};
              this.url = "https://www.googleapis.com/oauth2/v1/userinfo?alt=json";
            },

            ajaxResponse: function(event, response) {
              this.greeting = 'Hello ' + response.response.name + '!';
            }
        });
    </script>
  </polymer-element>

You can see there're event handler so you can redirect user or update screen. There're also a url to get user info.

Polymer.js + OAuth2

1 Answers1