CODEWITHSUNDEEP
polymerpolymer-1.0polymerfire
Derek Berry
Derek Berry

Reputation: 11

Cannot access Google Rest APIs with Iron-ajax in polymer

I am using Polymerfire to auth. The response is 401 from google REST APIs...

Can you make a Google api request with iron-ajax? It works great in the oauth playground...

Code:

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/polymerfire/polymerfire.html">
<link rel="import" href="../bower_components/iron-image/iron-image.html">
<link rel="import" href="../bower_components/iron-list/iron-list.html">
<link rel="import" href="../bower_components/google-apis/google-apis.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">

<link rel="import" href="shared-styles.html">

<dom-module id="doc-create">
  <template>
    <style include="shared-styles">
      :host {
        display: block;
        padding: 10px;
      }

    </style>
    <!--
    <iron-ajax
      auto
      url="https://api.github.com/repos/firebase/polymerfire/issues"
      handle-as="json"
      params="{state: "closed", page: "1"}"
      last-response="{{ajaxResponse}}"></iron-ajax> -->
      <iron-ajax
        auto
        url="https://www.googleapis.com/drive/v3/about"
        params = "{{ajaxParams}}"
        handle-as="json"
        with-credentials
        last-response="{{ajaxResponse}}"></iron-ajax>

    <div class="card">

      <template is="dom-repeat" items="[[ajaxResponse]]">
        <div class="horizontal-section">
        <p>[[index]]: [[item.title]]</p>
        </div>
      </template>

    </div>

    <div class="card">
        Response Data: [[ajaxResponse]]
        Params: [[ajaxParams.fields]]
    </div>

  </template>

  <script>
    Polymer({
      is: 'doc-create',
      properties: {
          fields: {
              type: String,
              value: 'user'
          },
          apikey: {
              type: String,
              value: 'ya29.CjBVA-xV9TJ9cS25hx9qJvEgD1w'
          },
          ajaxParams: {
              type: String,
              computed: 'processParams(fields, apikey)'
          }
      },
        processParams: function(fields, apikey) {
            return {
                fields: fields,
                key: apikey
            };
        }
      //   ,
      // ready: function(){
      //       var request = api.url.get({
      //         shortUrl: 'oo.gl/fbsS'
      //       });
      //       request.execute(function(resp) {
      //         console.log(resp);
      //       });
      //  }

    });
  </script>
</dom-module>

What am I doing wrong??? Screeshootof console

Upvotes: 0

Views: 290

Answers (2)

Derek Berry
Derek Berry

Reputation: 11

Resolution here: https://github.com/firebase/polymerfire/issues/108

Used then authed to using "signinwithcreditials".

Upvotes: 0

Steve Bazyl
Steve Bazyl

Reputation: 11672

TL;DR - You're not authorizing the request properly. You need to supply an access token properly, not an API key.

401 error is typically an authorization error, meaning no access token or insufficient scopes. While I'm not too familiar with iron-ajax, there is one oddity in the sample.

The apiKey value appears to be an access token, not an API key (based on the ya29 prefix.) If you intended that to be an access token, it should be passed via an Authorization header (Authorization: Bearer your_token_value) or via a query parameter named access_token.

If you meant it to be an API key, then note that API keys are insufficient in this case. The particular API operates on user data and requires an Outh2 access token authorized by the user. API keys aren't tied to users and don't grant the necessary permissions.

Upvotes: 1

Related Questions