I am reading documentation of the Ember Simple Auth. I want to send authorized ajax request (outside of the Ember store).
I've found out there is a method for that. However when I try it to call inside my component, I get error "TypeError: this.get(...).authorize is not a function". What am I doing wrong?
Here's my code:
import Ember from "ember";
export default Ember.Component.extend({
session: Ember.inject.service('session'),
actions: {
del: function() {
var self = this;
console.log(this.get('session'));
this.get('session').authorize('authorizer:oauth2-bearer', function(header, content) {
...
});
}
}
});
One rule you should apply when you upgrade ember plugin - make sure the older NPM version is uninstalled properly - or you will have many, many problems like I had.
Uninstalling the older version completly solved my problem.
Related
According to the docs, you just need to embed the analytics code and reopen the Router. The latter seems unclear to me.
I've placed the embedded code on index.html, then created the following
app/reopens/router.js
import Router from '../router';
Router.reopen({
notifyGoogleAnalytics: function() {
return ga('send', 'pageview', {
'page': this.get('url'),
'title': this.get('url')
});
}.on('didTransition')
});
app/app.js: Added the import...
import './reopens/router';
This results in a fatal error when viewing the site: Uncaught ReferenceError: ga is not defined
How do you make the ga function visible to this observer?
The problem is that on the first run through of the didTransition, the method is missing as that part of the script has not been executed.
Is this a problem? Actually no. The purpose of didTransition in this instance is to capture when a transition occurs as the supplied javascript from Google with capture to initial local of the page. All is needed is a check to see if 'ga' exists.
Add the recommended javascript to the index.html of your ember app from Google (https://developers.google.com/analytics/devguides/collection/analyticsjs/).
Modify your code to include a check to see if ga is undefined:
import Router from '../router';
Router.reopen({
notifyGoogleAnalytics: function() {
if (typeof ga != 'function') { return; }
return ga('send', 'pageview', {
'page': this.get('url'),
'title': this.get('url')
});
}.on('didTransition')
});
This is variation of what I have for an ember-cli based app. Let me know if it works.
After looking, exhaustively, for a way to plug Google Analytics into Ember, I built my own. For all those still struggling with this issue and not finding the Ember.js v1.0.0 answer helpful, here is how I got it to work on v4.2:
import Route from '#ember/routing/route';
import { action } from '#ember/object';
export default class ApplicationRoute extends Route {
#action
didTransition() {
gtag('set', 'page_path', window.location.pathname);
gtag('event', 'page_view');
return true;
}
}
Forgive my ignorance, as I am new to Ember, but the existing documentation makes it look like didTransition is no longer supported at the router level. That makes +99% of the solutions I found on the internet outdated.
Instead, I invoked didTransition at the route level. By extending Route as ApplicationRoute, I extended the main behavior of every Route. In this example, I execute the gtag event for triggering a page view after setting the page URL. The gtag code from Google simply goes in the index.html file in the head section.
Hopefully, this saves someone from hours of searching.
I am learning Ember and I am getting stuck on making the mock api with ember-cli-mirage. I modified the config file as specified in the ember tutorial as well as on the ember-cli-mirage site, but everytime I hit the endpoint I get nothing. Here is my current config file
export default function() {
this.get('/api/users', function() {
return {
users: [
{id: 1, name: 'Zelda'},
{id: 2, name: 'Link'},
{id: 3, name: 'Epona'},
]
}
});
}
Like I said, when I go to /api/users it is just a blank page. Am I missing something here?
Thanks!
First thing first, install Ember inspector extension (for Chrome or Firefox) and look in the browser console to see if Mirage is giving you some errors. If nothing is written in there, you are not hitting the endpoint with your ember application. Basically, Mirage proxies all the request from your ember application.
So you need to generate a user model
ember g model user
and put in there the name attribute.
Create a route and in the model hook write
return this.get('store').findAll('user');
(look at the quick start tutorial if something is not clear)
So now, leveraging Ember Data, your app will request all users hitting on /users.
Now let's start with mirage, generate a mirage model
ember g mirage-model user
and follow the mirage quickstart, just adapt it to your needs :)
Start your application with ember s and you should see the request to /users.
If you want to put your api on the same domain, but with the /api prefix, then i suggest you to read about endpoint path customization
In app/mirage/config.js you can set up mock endpoints for your users:
export default function() {
this.get('/users');
this.post('/users');
this.put('/users/:id');
this.del('/users/:id');
}
You can set up your mock data by configuring fixtures in app/mirage/fixtures/users.js:
export default [
{id: 1, name: 'Zelda'},
{id: 2, name: 'Link'},
{id: 3, name: 'Epona'},
];
Mirage isn't an actual server, so you won't be able to hit the API from your browser directly. It's a mock server that lives in JavaScript memory, and is instantiated when your Ember app boots up.
To test out your mocks, have your Ember app make an API request, e.g.
// routes/application.js
export default Ember.Route.extend({
model() {
return Ember.$.getJSON('/api/users');
}
});
If everything's hooked up correctly, you should now see Mirage handling this request and logging the response data in your console.
We are using rails-csrf in our ember-cli app. The README on rails-csrf says:
Be sure to mock out the call to the csrf server endpoint. Otherwise your tests will fail with
"error while processing route: [route]"
messages in the browser console. For example:
server = new Pretender(function() {
this.get('/csrf', function(request) {
return [200, {"Content-Type": "application/json"},
JSON.stringify({
"authenticity_token": "token"
})
];
});
});
I understand the problem here (our integration tests are indeed showing this error) and I understand how Pretender solves it. I've got Pretender installed via ember-cli-pretender.
What I don't understand is how to make sure this code snippet - configuration for a Pretender mock - is working. I have it installed in the setup block of the integration test module, and it gets called, but the error is still present and the tests still aren't passing.
Here's the current non-working state:
module('Integration test', {
setup: function() {
App = startApp();
var server = new Pretender(function() {
this.get('/our/api/for/csrf', function(request) {
return [200, {"Content-Type": "application/json"},
JSON.stringify({
"authenticity_token": "token"
// I've also tried putting a real token from the server here instead of "token"
})
];
});
});
},
teardown: function() {
Ember.run(App, App.destroy);
}
});
The mock is getting called, but whatever it's returning is apparently not enough for rails-csrf. It looks like the beforeModel call in the application route is returning a promise; it's not clear if that's expected and being resolved.
(This question is superficially similar to this older one, but the available tools for handling this in Ember have changed significantly.)
I updated our app from ember-cli 0.1.12 and ember 1.8.1 to ember-cli 0.2.0 and ember 1.10.0. I also updated Pretender to 0.6.0 (the ember-cli-pretender package installed 0.1.0). This didn't solve anything by itself, but it did lead to a telling change in how the integration test failed. Now, Pretender was intercepting data requests and returning an error because I hadn't defined handlers for them.
Error: Pretender intercepted GET /our/api/data/:id but no handler was defined for this type of request
So the issue was no longer Ember but my configuration of Pretender. Once I mocked data requests to the API, we were off and running.
tl;dr make sure you have the latest version of Pretender.
I'm attempting to setup a custom authenticator with ember simple auth. I'm using Ember CLI and according to the Simple Auth ReadMe on GitHub it states. Note that when you're not using Ember CLI the authenticator will not be registered with the container automatically and you need to do that in an initializer.
It does not state where you need to put your authenticator (or authorizer for that matter) in your directory structure in order for it to be registered by Ember CLI automatically. After creating my file in app/authenticators/custom.js (as shown in the examples of the read me) I expected it to be registered with the container. Looking in Ember Inspector it's no where to be found.
Does anyone have any insight into this? Where are these files meant to be placed?
Please ask if any additional information is needed.
Ember: 1.7.0
Ember Data: 1.0.0-beta.10
Ember Simple Auth: 0.7.1
The latest version of Ember CLI should actually auto-register the authenticator - make sure you're using that (you probably aren't as you're still at Ember 1.7.0). That should solve it.
Make sure you have your initializer in /app/initializers/. Initializers in this directory are automatically set up by ember-cli.
// app/initializers/authentication.js
import CustomAuthenticator from '../authenticators/custom';
export default {
name: 'authentication',
before: 'simple-auth',
initialize: function(container, application) {
container.register('authenticator:custom', CustomAuthenticator);
}
};
I am getting the same issue and I have Ember 1.8.1
Error is:
Uncaught ReferenceError: CustomAuthenticator is not defined
in file app/authenticators/custom.js
I needed to add an initializer and change the code found in the docs to this below, and it works
import Base from 'simple-auth/authenticators/base';
var CustomAuthenticator = Base.extend({
restore: function(data) {
},
authenticate: function(options) {
},
invalidate: function(data) {
}
});
export default CustomAuthenticator;
I've got a problem to create a route to my model with ember.js. I've got the following messages:
GET http://localhost:4200/contacts 404 (Not Found)
Error while processing route: contacts'
This is my code :
// app/models/contacts.js
import DS from 'ember-data';
export default DS.Model.extend({
lastname: DS.attr('string'),
firstname: DS.attr('string')
});
// app/routes/contacts.js
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return this.store.find('contact');
}
});
// app/templates/application.hbs
<h2 id='title'>Welcome to Ember.js</h2>
{{link-to 'Mes contacts' 'contacts'}}
{{outlet}}
// app/templates/contacts.hbs
<h3>Liste des contacts</h3>
{{outlet}}
// app/router.js
import Ember from 'ember';
import config from './config/environment';
var Router = Ember.Router.extend({
location: config.locationType
});
Router.map(function() {
this.resource('contacts');
});
export default Router;
These messages appear when I click in the link "Mes contacts".
I use Ember v1.8.1.
Someone could help me ?
Thanks by advance.
Install the Ember Inspector if you haven't done already. Then you can see the promises that are failing.
Also the normal browser Network inspector will show you the request payloads so you can see what is being sent and received.
Have you verified that the request actually goes to the server?
Have you verified that the server is able to precess the request?
(as it appears the server does not know the endpoint provided).
Have you verified that the server is sending a response with the expected payload?
Does the browser network inspector response payload show the expected result?
I had the same issue. Sometimes Ember is not showing the details of an error.
I ended putting a breakpoint in my vendor.js on the following line:
TRY_CATCH_ERROR.error = e;
I know you can also enable more details if needed but I haven't tried yet.
Bon courage! :)
I had issues with ember-cli when i've upgraded to the latest ember.js v1.8.1 with bower, so i downgraded ember to the version which is bundled with ember cli and it worked again.
I am new to ember.js, i find it hard to upgrade to latest version without breaking the app because of incompatibility with the generator and addons like ember-data.
Try using version bundled with ember-cli to see if it is an upgrade issue.
OK, I start a new project and I don't have this problem.
But I don't know what I did wrong..
I close this topic.