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
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.
Resolution here:
https://github.com/firebase/polymerfire/issues/108
Used then authed to using "signinwithcreditials".
Related
I have a very simple polymer 2 app, which uses query query string parameters. Moving to Polymer 2.0.1 and app-location 2.0 (instead of rc and preview versions), I noticed that simply having an app-location element deletes all query string parameters from the url.
Try this url: https://api-1913.s3-eu-west-1.amazonaws.com/index.html?foo=bar, and notice how the query string is removed during loading.
Here's all the code:
index.html:
<!DOCTYPE HTML>
<script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="/my-app.html">
<html>
<head>
</head>
<body>
<my-app></my-app>
</body>
</html>
my-app.html:
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/app-route/app-location.html">
<dom-module id="my-app">
<template>
<app-location></app-location>
<h1>Coin</h1>
</template>
<script>
class App extends Polymer.Element{
static get is(){return 'my-app'}
ready(){
super.ready()
console.log('ready')
}
}
customElements.define(App.is, App)
</script>
</dom-module>
Specifying query-params attribute to map it to a property of App does not change anything. Remove the app-location element and query string is kept.
Has anyone seen this behavior? Is there any workaround - except a rollback to a previous version?
It is a bug. You can temporarly remove the default value in iron-location element until the fix is released.
Lines to remove
value: function() {
return {};
}
Affected property
paramsObject: {
type: Object,
notify: true,
value: function() {
return {};
}
},
Reference:
https://github.com/PolymerElements/iron-location/pull/86/commits/3732e93ce2197178f76c3c2073438b9cd15096b4
I want to check if the user is logged in on element creation and eventually redirect him if the user is not. The problem is that the domHost.signedIn property is false even though the user is signedIn. If I check the property later(for example when I call a function with button tap) the property is true as it should be.
Here is the code:
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/paper-button/paper-button.html">
<dom-module id="settings-view">
<template>
<style>
</style>
TODO: user settings
<paper-button on-tap="debugFunction">button</paper-button>
</template>
<script>
Polymer({
is: 'settings-view',
ready: function () {
console.log(this.domHost.signedIn); // false
console.log(this.domHost.user); // null
},
debugFunction: function () {
console.log(this.domHost.signedIn); // true
console.log(this.domHost.user); // user object
}
});
</script>
</dom-module>
What is the best way to check if the user is signedIn in child element? Would setting the signedIn value to iron-meta element be a better approach?
Thanks, Jan
You're better off declaring properties with observers on them. Observers will execute the function as soon as the property's value is something other than undefined. So your code will look like this:
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/paper-button/paper-button.html">
<dom-module id="settings-view">
<template>
<style>
</style>
TODO: user settings
</template>
<script>
Polymer({
is: 'settings-view',
properties: {
signedIn: {
type: Boolean,
observer: '_signedInChanged'
},
user: {
type: Object,
observer: '_userChanged'
},
},
_signedInChanged: function (newSignedInValue) {
console.log(newSignedInValue); // true
console.log(this.signedIn); // true
},
_userChanged: function (newUserValue) {
console.log(newUserValue); // user object
console.log(this.user); // user object
}
});
</script>
</dom-module>
Then when you update those signedIn and user values through JavaScript or data binding, the observers will call the associated functions.
I am trying to implement a custom filter using Polymer v1.7.0 currently. However, it does not work at all; when I try to use a filter the output is just the raw expression, unprocessed.
I have tried it like it's done here: https://github.com/PolymerLabs/polymer-patterns/blob/master/snippets/filters/using-custom-filters.html but using this code:
<div id="toFixed">{{10.123456789 | toFixed(2)}}</div>
only results in
{{10.123456789 | toFixed(2)}} in the resulting document.
Is my linked source outdated? I couldn't find any valuable information in the Polymer docs so a nudge into the right the direction is appreciated.
You don't need pipe in Polymer 1.x to achieve this. You can directly call an function and pass it the value that you want to
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<dom-module id="my-element">
<template>
{{format(myVal)}}
<br>{{format("hello")}}
</template>
</dom-module>
<script>
Polymer({
is: "my-element",
properties: {
myVal: {
type: String,
value: "Hi"
}
},
format: function(input) {
return input + " John";
}
});
</script>
<my-element></my-element>
I am making an application which will use users phone number to log in. So I am using digits api. Now I have seen how to use its web login. But I am not able to integrate it in my polymer web application.
<head>
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">
<script id="digits-sdk" src="https://cdn.digits.com/1/sdk.js" async></script>
</head>
I pasted script in head tag as mentioned.
<script>
Polymer({
is: 'my-view1',
properties:{
textArea: {
type: String,
value: "this is text area",
notify: true,
reflectToAttribute: true
}
},
attached: function(){
console.log("Attached")
this.$.Digits.init({ consumerKey: 'YOUR KEY HERE' })
}
});
And one more doubt is that can i paste javascript script after Polymer({}); but under <script> tag? Will this create any problems. Or I have to write all my code under Polymer({});
I'm working on a reddit client using polymer to check out web compoments technologies. I started with the 0.5 version and got back on this project recently. That when I found out that polymer had the 1.0 released so I started over (as it wasn't that advanced anyway).
I have a service that use the iron-ajax to request reddit api and look for the posts. Here is the code :
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<dom-module id="reddit-list-service">
<template>
<iron-ajax
url='https://www.reddit.com/new.json'
handle-as='json'
debounce-duration="300"
on-response='handleResponse'
debounce-duration="300"
auto>
</iron-ajax>
</template>
</dom-module>
<script>
(function () {
Polymer({
is: 'reddit-list-service',
properties: {
modhash: {
type: String,
value: function() {
return '';
}
},
posts: {
type: Array,
value: function () {
return [];
}
},
after: {
type: String,
value: function () {
return '';
}
}
},
// Update object properties from the ajax call response
handleResponse: function (resp) {
this.properties.modash = resp.detail.response.data.modhash;
this.properties.posts = resp.detail.response.data.children;
this.properties.after = resp.detail.response.data.after;
this.post = this.properties.posts; // just to try
console.log(this.properties.posts);
}
});
})();
</script>
My log shows me that I get posts from the API and that's great!
Here's the issue when I want to use this service to make a list out of the posts array I can't figure out how to get them into my list compoment which is below :
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../reddit-list-service/reddit-list-service.html">
<dom-module id="reddit-post-list">
<template>
<reddit-list-service posts="{{posts}}">
</reddit-list-service>
<template is="dom-repeat" id="post-list" posts="{{posts}}">
<p>{{post.author}}</p>
<template>
</template>
</dom-module>
<script>
(function () {
Polymer({
is: 'reddit-post-list',
properties: {
},
});
})();
</script>
I've tried several think I saw in the documentation but I can't figure out what's wrong the author property doesn't show up.
Any clue?
You have a few things that aren't quite right here. In reddit-post-list you are not using the dom-repeat template correctly. See below:
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="reddit-list-service.html">
<dom-module id="reddit-post-list">
<template>
<reddit-list-service posts="{{posts}}"></reddit-list-service>
<template is="dom-repeat" items="[[posts]]">
<p>{{item.data.author}}</p>
</template>
</template>
</dom-module>
<script>
Polymer({
is: "reddit-post-list"
});
</script>
You need an attribute called items which is the array the dom-repeat will iterate over. Inside the iteration you need to refer to item as this is the array item for the current iteration. Here are the docs.
For you reddit-list-service, you need to set the the reflectToAttribute and notify attributes to true on your posts property. This means that any changes to this property are reflected back on the posts attribute on the reddit-list-service element. See here for more information.
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-ajax/iron-ajax.html">
<dom-module id="reddit-list-service">
<template>
<iron-ajax auto url="https://www.reddit.com/new.json" handle-as="json" on-response="handleResponse"></iron-ajax>
</template>
</dom-module>
<script>
Polymer({
is: "reddit-list-service",
properties: {
modhash: {
type: String,
value: ""
},
posts: {
type: Array,
value: function () {
return [];
},
reflectToAttribute: true, // note these two new attributes
notify: true
},
after: {
type: String,
value: ""
}
},
// Update object properties from the ajax call response
handleResponse: function (resp) {
this.modash = resp.detail.response.data.modhash;
this.posts = resp.detail.response.data.children;
this.after = resp.detail.response.data.after;
}
});
</script>
I have also tidied up the following things:
Removed the immediately called function wrapper from the <script> tags as these are not needed.
When referring to properties in your element you only need to use this.PROPERTYNAME rather than this.properties.PROPERTYNAME.
Having looked at the JSON returned, it appears that the author property is on the another property called data.
When you declare a value for a property in your element, you only need to have a function that returns a value if the property type is an Object or Array.