PayPal express checkout from Angular app? - angularjs

I am trying to complete a PayPal payment from an Angular app, using PayPal's classic express checkout API. In this checkout flow, I obtain a URL to send the buyer to in order to authorize their payment on PayPal's site. When I request that URL, PayPal returns a 302 response and attempts to redirect the buyer. However, when the browser attempts to redirect, I understandably get this error:
XMLHttpRequest cannot load 'PAYPAL_SITE'. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'MY_HOST' is therefore not allowed access.
What is the best way to deal with this? I have seen that PayPal also has a newer, RESTful API. If this API supports CORS, would switching to that solve the problem? Is there something I should change in my Angular configuration? From what I have read it seems like the PayPal server need certain headers to allow my host access, but I'm not too sure...

The way I solved this was to send the user away from the angular app to a "dummy" page, which just immediately made an (non-XML) HTTP request to the PayPal site. I passed the data I needed as params in the URL.
In your js:
window.location.href = "dummypage.html" + build_params();
Assuming you are using some sort of MVC framework, in your controller:
index() {
paypalUrl = getParams(paypalUrl);
redirect_to(paypalUrl);
}
When the user is confirming the payment they are redirected back to the angular app to complete the transaction. I don't believe this is an optimal solution, and it feels pretty messy to use, but I haven't come up with anything better yet!

Related

Handle post request in reactjs

I have have trying to communicate to third party application from react app. Whenever user tries to browse say : http://somesite.com/ , user is redirected to http://authenticationsite.com/ . This application then responds back with POST data in first site if the user is successfully authenticated. I have routes for handling get request. How can I possibly handle POST request from third party apps which contains information like token in the react app?
You basically want to implement sort of token based authentication?
When you load your app (or a component within your app), make a POST request to the authorization website using some ajax library, like axios, fetch or jquery ajax. Depending on the response from the 3rd party server, save the token somewhere (localStorage for example) and proceed with the rest of the flow.
Hope this helps! If you have any questions, or I misunderstood your question, please let me know, and we will proceed from there.

Laravel angularjs cross origin session

I have a problem with communication between angular and laravel.
Its about mobile application that needs to log in to a laravel framework and get some data.
Mobile application is angularjs based, and for login i user standard $httpd function.
Login works fine, and i get expected response from laravel, but when i make another request assuming that im loged in, laravel returns NULL for session and auth. When I upload mobile app to a server where laravel is installed all works like a charm. But my app needs to be on mobile device, so thats not a solution.
I assume that the problem is in cors or cross domain communication. It seems that laravel destroys session made from cross origin requests, because that session is not accessible from another request, and on another request laravel tries to make a new one.
I need help solving that session problem (access session after login or keep session), i hope some of you have some kind of a solution.
i tried :
changing headers in my login controller
changing get to post
adding content type to my angular http req (Content-Type': 'application/x-www-form-urlencoded)
tried requerst with jquery ajax
changed laravels app/config/session.php values of driver, cookie, domain...
setting vendor/laravel/framework/src/illuminate/http/frameGuard.php x-frame options to false
no luck!
Use json web tokens, and simply set it up so that you request a JWT on login, and you can share that token around - the only way it invalidates, is either if you lose the token, or it times out.

Symfony2 Oauth2 Server with authorization code grant, Symfony2 APIRest and Angular JS client

What I have:
-API Rest in Symfony2 using friendsofsymfony/rest-bundle exposing some resources.
-Oauth2 server in Symfony2 using FOSOAuthServerBundle.
-Client in Angular.js doing requests to the API Rest. This client currently gets to login via the authorization code grant (using Hello.js with a custom module), and gets the access token effectively.
I want these API resources secured, so:
-On API Rest app: I implemented the AuthenticationEntryPointInterface which I set as the entry_point in security.yml, to return 401 code and application/json content-type on rejected.
-Client intercepts 401 responses and sends the user to the login form.
-Client sends api rest requests with X-Access-Token set on header.
My current issues:
1) I'm not sure whether I should be setting X-Access-Token on client for requests, I understand this is the right way? Or should I leave it all to hello.js api methods?
2) I have no idea how to make the API Rest app "ask" the oauth server "is this token ok? who does it belong to?" Is this already solved in Symfony?
Thanks a lot for any answer or guideline. Feel free to require any further information or code for what I describe.
For anyone else facing a similar issue:
1) As for the client authenticated requests after login, I let hello.js hello(provider).api methods solve it. It sends access_token as a param. I didn't have to set X-Access-Token on the header or any other "hand made" touch.
2) I didn't find an out of the box solution by symfony for this. But this is what I did:
-Configured a before filter for the protected controller (see doc)
-In that method, I made a call to the API held on the OAuthServer (using this bundle)

Authenticated Angular JS apps

I want to conver my existing site to angularJS application. Its flow is like this.
My parent web site is having link to sign up or login page.
As per user selection signup or login page should open.So once user login or created account he pointed to dashboard page.So how to do this angularJS?
Please note my parent web site is not in angular.
Thanks in advnce.
Here is a suggested design and here is a little project I wrote that has Angular code authenticating with a PHP server. The code has both the Register and Log in options you are looking for.
Use token based authentication (Im assuming your angular requests are JSON)
After the user logs in or registers, send a bearer token back to Angular via the URL. On the server side set an expiry date for the token
Every http request you make can include the token in the http header
The sample code has this implemented.

GAE JSP and Facebook-api-java iframe fb_sig_* param

I am building facebook app using iFrame (using Google App Engine Java,JSP and Facebook-api-java), and when Facebook calls back to my website, I expect to get the fb_sig_* request params for the iFrame, but I get those params in HTTP referer header instead.
When I use the php client, i get the fb_sig_* in the $[_GET] as expected.
What have I done wrong?
Thanks
If you get them in the referrer, then it means that a redirect has taken place. If this is not the expected behaviour by Facebook, then you need to ensure that you don't have some Servlet or Filter in the request chain which redirects requests using HttpServletResponse#sendRedirect() for some reason.

Resources