oauth-v2.html

<link rel="import" href="../iron-ajax/iron-ajax.html">
<link rel="import" href="../oauth-popup/oauth-popup.html">
<dom-module id="oauth-v2">
  <template>
    <style>
      :host {
        display: none;
      }
    </style>

    <oauth-popup id="popup" url="{{url}}"
      width="{{popupWidth}}" height="{{popupHeight}}"
      response="{{response_token}}" on-response="on_response_token"
      error="{{error}}" on-error="on_error">
    </oauth-popup>

    <iron-ajax id="exchange" method="POST" url="{{exchange_url}}"
      content-type="application/json" body="{{exchange_body}}"
      handle-as="json" last-response="{{response_exchange}}" on-response="on_response_exchange"
      last-error="{{error}}" on-error="on_error">
    </iron-ajax>

  </template>
</dom-module>
<script>
  Polymer({

    is: 'oauth-v2',

    properties: {
      scope: {
        type: Array
      },
      scopeDelimiter: {
        type: String
      },
      scopePrefix: {
        type: String
      },
      display: {
        type: String,
        value: 'popup'
      },
      endpoint: {
        type: String
      },
      urlParams: {
        type: Array
      },
      defaultUrlParams: {
        type: Array,
        value: ['response_type', 'client_id', 'redirect_uri']
      },
      response_type: {
        type: String,
        value: 'code'
      },
      client_id: {
        type: String
      },
      redirect_uri: {
        type: String
      },
      popupWidth: {
        type: Number
      },
      popupHeight: {
        type: Number
      },
      response_token: {
        type: Object,
      },
      exchange_url: {
        type: String
      },
      response_exchange: {
        type: Object
      },
      error: {
        type: Object,
        notify: true
      },
      response: {
        type: Object,
        notify: true
      }
    },

    open: function () {
      this.url = this._compute_url();
      this.$.popup.open();
    },

    _compute_url: function () {
      var querystring = this._compute_querystring();
      var url = this.endpoint + '?' + querystring;
      return url;
    },

    _compute_querystring: function () {
      var querystring = '';
      var scope = this;
      var value;
      var pairs = [];

      scope.defaultUrlParams.forEach(function (param) {
        value = scope[param];
        pairs.push(param + '=' + value);
      });

      scope.urlParams.forEach(function (param) {
        value = scope[param];

        if (param === 'scope') {
          if (scope.scopePrefix) {
            value.unshift(scope.scopePrefix);
          }
          value = value.join(scope.scopeDelimiter);
        }

        pairs.push(param + '=' + value);
      });

      querystring = pairs.join('&');
      return querystring;
    },

    on_response_token: function (event) {
      event.stopPropagation();
      this._exchange();
    },

    _exchange: function () {
      if (this.response_type === 'token') {
        this.response = this.response_token;
        this.fire('response', this.response);
        return;
      }
      this.exchange_body = this._compute_exchange_body();
      this.$.exchange.generateRequest();
    },

    _compute_exchange_body: function () {
      var body = {};
      var response = this.response_token;
      var responseParams = this.responseParams;
      var key;

      body.client_id = this.client_id;
      body.redirect_uri = this.redirect_uri;
      body.code = response.code;

      if (response.state) {
        body.state = response.state;
      }

      for (key in responseParams) {
        body[key] = response[key];
      }

      body = JSON.stringify(body);

      return body;
    },

    on_response_exchange: function (event) {
      event.stopPropagation();
      this.response = this.response_exchange;
      this.fire('response', this.response)
    },

    on_error: function (event) {
      event.stopPropagation();
      this.fire('error', this.error);
    }

  });
</script>