Calling a django APi in React shopping Cart - django

I have built a react shopping Cart application which has a login page Signup Page Products Add to Cart and other features like Checkout through Api . Now the other person from my team has build a backend api on django. I want to call that api from my react code now. How should I do it? Do I need to learn something specific? I have searched in internet and all of the sources we to make serve react and django from same project. I have a React project with me and a separate api developed by someone else. Please guide me through this.

You want to make an HTTP request to the API your colleague made. This video explains three methods you can use really well: https://www.youtube.com/watch?v=4K33w-0-p2c
XMLHttpRequest
fetch() API
Axios. Here the video from the same channel.
You should use Axios because it gives you the simplest way to make these requests:
// Make a request for a user with a given ID
axios.get('/user?ID=12345')
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.finally(function () {
// always executed
});

Related

Django REST framework - prevent data access for user view?

In my api, I have a /users endpoint which currently shows (eg address) details of all users currently registered. This needs to be accessed by the (Ember) application (eg to view a user shipping address) but for obvious reasons I can't allow anyone to be able to view the data (whether that be via the browsable api or as plain JSON if we restrict a view to just use the JSONRenderer). I don't think I can use authentication and permissions, since the application needs to log a user in from the front end app (I am using token based authentication) in the first instance. If I use authentication on the user view in Django for instance, I am unable to login from Ember.
Am I missing something?
UPDATE
Hi, I wanted to come back on this.
For authentication on the Ember side I'm using Ember Simple Auth and token based authentication in Django. All is working fine - I can log into the Ember app, and have access to the token.
What I need to be able to do is to access the user; for this I followed the code sample here https://github.com/simplabs/ember-simple-auth/blob/master/guides/managing-current-user.md
I have tested the token based authentication in Postman, using the token for my logged in user - and can access the /users endpoint. (This is returning all users - what I want is for only the user for whom I have the token to be returned but that's for later!).
The question is how to do I pass the (token) header in any Ember requests, eg
this.store.findAll('user') .... etc
This is clearly not happening currently, and I'm not sure how to fix this.
UPDATE
Fixed it. Turns out that the authorize function in my application adapter was not setting the headers, so have changed the code to set the headers explicitly:
authorize(xhr) {
let { access_token } = this.get('session.data.authenticated');
if (isPresent(access_token)) {
xhr.setRequestHeader('Authorization', `Token ${access_token}`);
}
},
headers: computed('session.data.authenticated.token', function () {
const headers = {};
if (this.session.isAuthenticated) {
headers['Authorization'] = `Token ${this.session.data.authenticated.token}`
}
return headers;
})
Ember is framework for creating SPAs. These run in the browser. So for Ember to get the data, you have to send the data to the browser.
The browser is completely under the control of the user. The browser is software that works for them, not for the owner of the website.
Any data you send to the browser, the user can access. Full stop.
If you want to limit which bits of the data the user can read from the API, then you need to write the logic to apply those limits server-side and not depend on the client-side Ember code to filter out the bits you don't want the user to see.
I don't think I can use authentication and permissions, since the application needs to log a user in from the front end app (I am using token based authentication) in the first instance. If I use authentication on the user view in Django for instance, I am unable to login from Ember.
This doesn't really make sense.
Generally, this should happen:
The user enters some credentials into the Ember app
The ember app sends them to an authentication endpoint on the server
The server returns a token
The ember app stores the token
The ember app sends the token when it makes the request for data from the API
The server uses the token to determine which data to send back from the API

Dart/Flutter auth implementation

I am working on a sample Flutter mobile application.
Does Flutter / Dart have any http libraries that support persisting secure cookies.
Example use case ( guessing it should be pretty common use case): User logs in once and the application should be able to use secure cookie from successful sign-in until session gets expire/ user signs out.
On android, OkHttp supports persisting cookies and sending those persisted cookies whenever client (application) makes a request to the backend.
What is the best way to acheive that in Flutter?
Thanks
This is not related to flutter, it is pure dart but :
For cookies, there's dart:io with Cookie class
There's the boolean secure property and boolean httpOnly you can set.
As for Http connections, you can simply use dart:http's HttpClient.
OR you can use flutter's createHttpClient method which is recomended by flutter for testing purpose (mock) ; as stated here
I've published a small flutter library called requests to assist with cookie-aware http requests (with the assistance of shared_preferences)
as of now, it uses shared_preferences which is not the best practice (security-wise) to store sensitive data (session-ids etc) Issue #1
pubspec.yaml
dependencies:
requests: ^1.0.0
Usage:
import 'package:requests/requests.dart';
// ...
// this will persist cookies
await Requests.post("https://example.com/api/v1/login", body: {"username":"...", "password":"..."} );
// this will re-use the persisted cookies
dynamic data = await Requests.get("https://example.com/api/v1/stuff", json: true);

FB user button onClick event attend [duplicate]

I would like to make possibility for attending to event in Facebook feed view in my app. Is it possible by POST-request of Graph API?
IF it´s still possible, then by just doing a POST request to the attending endpoint. For example, with the JS SDK:
FB.api('/[event-id]/attending', 'POST', function(response){
console.log(response)
});
Afaik it was possible earlier, and you would need the rsvp_event permission for this.
Edit: I just tried it in the API Explorer, it definitely works: https://developers.facebook.com/tools/explorer/?method=POST&path=[event-id]%2Fattending&version=v2.5 (of course you need to replace the event ID)

Without using cordova plugin post message on Facebook

Using this link facebook-phonegap-cordova-without-plugin I create an phonegap Facebook app. In that app application when I am login that application it working fine. It give me facebook friendlist, birthday, friend links and its allow to me to post on Facebook wall me and my friends Facebook wall. but when I logout and logging into another user then it allow me to login but its gives me that message The User hasn’t authorized the application to perform this action. And when I try to post some thing then it gives me that error This does not let testing post to Facebook your public profile is you name, profile and other public info
I am using
latest cordova build
In developer.facebook my application name is Testing
I am using API v1.0
following code is to share the post
function share() {
openFB.api({
method: 'POST',
path: '/me/feed',
params: {
message: 'Testing Facebook APIs',
},
success: function() {
alert('the item was posted on Facebook');
},
error: errorHandler});
}
Please remember its working fine for me but when I logging using another user then it gives me error.
Have you tried this while logging out the first user :
Revoke permissions :
openFB.revokePermissions(
function() {
},
errorHandler );
If it's working for you only then check if your app is in developer mode or not.
Go to your app facebook dashboard.
App review tab.
Check and turn on to make your app public.
Hope it helps with your question.

How to access the webservice in grails through secure layer

I have simple method in controller class.
Class TrainingController{
def getTrainingsJson(){
def trainingList = Training.list()
println "called===="
//render trainingList as JSON
render "${params.callback}(${trainingList as JSON})"
}
}
Which gets the list of training, In my HTML page I have request as follows
<script type="text/javascript">
$(function(){
$.getJSON('http://localhost:8080/training/getTrainingsJson?callback=?',
function(data) {
console.log("success");
alert(data);
});
});
</script>
The request is served only after the login. Without the login the response will be login page HTML format.
The request is across the servers (from php to grails).
I want to ensure that secure communication must be established, So how to authenticate
through json using spring security in grails.
And How to ensure that Nobody can forge the request and get the response from the server.
And Do need to follow the REST Or Can i write the methods in existing controllers OR Do i need to create a separate controller/service for this kind of requests.
If all access is through the browser, then spring authentication will take care of it - just secure the url accordingly. All requests (including ajax) will go through the spring auth
To prevent snooping consider implementing SSL
The Spring Security plugin docs has more information on securing your application. In particular read about Authentication, IP Address restriction and Session Fixation Prevention