I want to make a small app that gets some account information from Paypal and shows that in a HTML page. I solely use HTML/CSS and Javascript, I dislike to run the authorization flow on the server for security implications. I don't want to have the token on the server.
I have a working setup now using the OAuth code grant flow provided by Paypal (more here), but as described above, I want to cut the server out of the picture.
There are some methods described in the page I just referenced, but none seem to implicate there is an implicit grant possible.
Is it possible to use Paypal with OAuth implicit grant or something similar?
(The current answers are taking the code grant flow, which was specifically not what I asked for. I know that one exists, but it is bad to use it in this case, so please only answer if you know a method without the need to provide the OAuth secret token to the client.)
If anyone does not understand what is/how works Implicit grant
Of course this is posible with plain Javascript but is not recommendable. Paypal has an endpoint to provide auth tokens:
https://developer.paypal.com/docs/integration/direct/make-your-first-call/#get-an-access-token
Also you will need to obtain user's consent.. When performing the request you should provide redirect_uri param with your webapp url. Usually developers tend to store returned values on the server script that receives that response from paypal. But it is not necessary coz you are able to read javascript global var location which contains all params.
How PayPal uses OAuth 2.0
EDIT:
In order to achieve this you have to do the following steps:
VARIABLES:
APP_CLIENT_ID -> your app's client_id
APP_SECRET -> your app's secret code
APP_RETURN_URL -> default endpoint of your app MUST BE equals to redirect_uri
OPEN_ID -> returned code that allows to create a token for specific customer, also to retrieve info from the user
Asuming that you've created an APP in developer.paypal site to obtain "client_id" and "secret" in order to build an url to redirect the user to paypal login form.
Redirect your customer to:
https://www.[sandbox.]paypal.com/signin/authorize?client_id=APP_CLIENT_ID&response_type=token&scope=openid&redirect_uri=APP_RETURN_URL
Customer will log in its account and produce a openid that it will be sent back to your app through http: 302 redirect to redirect_uri which should be your app.
APP_RETURN_URL?code=OPEN_ID&scope=openid
back in your app you can use that code to perform a request to create a token.. and is up to you:
You're able to retrieve profile data from the user such as address, phone..
request:
curl -v https://api.sandbox.paypal.com/v1/oauth2/token -H "Accept: application/json" -H "Accept-Language: en_US" -H "Authorization: Bearer OPEN_ID" -u "APP_CLIENT_ID:APP_SECRET" -d "grant_type=client_credentials"
response:
{"scope":"https://uri.paypal.com/services/identity/proxyclient https://uri.paypal.com/services/subscriptions https://api.paypal.com/v1/payments/.* https://api.paypal.com/v1/vault/credit-card https://uri.paypal.com/services/applications/webhooks openid https://uri.paypal.com/payments/payouts https://api.paypal.com/v1/vault/credit-card/.* https://uri.paypal.com/services/identity/grantdelegation","nonce":"2017-05-05T14:33:28Z488Zx8aUM1aSVo_wpq8IOecfccJMHptR1PVO2OpWcbA","access_token":"A21AAHZCMP5vBuLMzz2m78DJGZhhpmu854amEVEO5WOavfk1GlNl_gmjSi01_69tJLRi5N_6pT-3GpRqZ81_pD1qKIAGANHMQ","token_type":"Bearer","app_id":"APP-80W284485P519543T","expires_in":32400}
Then you're able to follow this: https://developer.paypal.com/docs/integration/direct/make-your-first-call/#make-an-api-call
Related
Currently I'm facing the following problem:
I'm building an application with a standalone login view.
Let's assume they both run on different domains. My login view communicates with a REST service on the server that issues a JWT token.
With this issued token the user should now be able to view (be forwarded to) the application. But this application - as mentioned - runs on another domain (or subdomain, maybe).
In my mind I tried the following:
Token is issued by the server. A hash is stored in a database and the hash is issued to the user. The hash is transferred to the application via URL and the applications checks the hash.
Token is issued by the server. The token is transferred to the user. When the user now opens the application (or is forwarded to...) the token should be transferred there, too. I have no clue how to do...
Both are not ideal ways, i know. But I really don't know how I can achieve that...
I hope anyone is able to help me with my thinkings?
If anything is unclear, just comment.
Thanks in advance!
Facebook, Twitter, Google, etc. offer OAuth by redirecting (302 Redirect Request). Basically your app starts if user has a valid token everything is fine, else it will open the Login-Page from the Identity Provider (e.g. Google) and return the token, if the login was successful.
This graphic shows the general steps:
https://www.soapui.org/soapui/media/images/stories/oauth2/oauth2flow.png
Hope this helps.
Lets assume you have two services in 2 different domains. One is your identity provider which generates tokens and holds the token <--> user assignment (we call it: idp.my.company). The other one is any application that does stuff but needs to login via idp.my.company (we call it app.my.company).
You have two scenarios:
1. Login without having a token aquired before.
2. Login with token.
Request GET: app.my.company
Response 302: Moved to: idp.my.company
Take a look which redirection type follows your needs (307 maybe)
https://en.wikipedia.org/wiki/URL_redirection
You need to add an information where to redirect back. In this case app.my.company.
[This happens automatically because of the Redirect] GET: idp.my.company/login.html.
Response 200 OK: idp.my.company/login.html
The User will now see the Login-Page of your IDP-Service and perform a Login.
Request POST: idp.my.company/login.html (or whatever)
The User posts his credentials to aquire a token
Response 302 Redirect: If login is successful, return token and now redirect to the origin site (app.my.company) which you provided earlier.
Request GET: app.my.company/afterlogin.html
The header contains a valid token
Response 200 Ok: Now the app.my.company service needs to check if the token is valid and if true return 200 Ok otherwise redirect again to IDP (start over at step 2).
This should be it. There could be errors but you should have a consistent picture of the process and get a grasp on how to implement it. Those steps cover scenario 1 and 2.
Currently i am working on an App which will create groups in Office 365 programatically. I am wondering if this is possible using JavaScript. I also had another question regarding the Authentication and Authorization process. I am able to register the App and fetch the Authorization code. However when i try to fetch the Access token, it throws an error stating that it encountered a bad request. My Authorization URL is of the form:
https://login.microsoftonline.com/common/oauth2/v2.0/authorize?
client_id=<some_client_id>
&scope=openid+profile
&response_type=id_token
&redirect_uri=<some_redirect_url>
&nonce=123456789
And my access token request url is:
https://login.microsoftonline.com/common/oauth2/v2.0/token?
grant_type=authorization_code
&code=<Code_generated_in_above_request>
&redirect_uri=<some_redirect_url>
&resource=https%3A%2F%2Fgraph.microsoft.com%2F
&scope=openid+profile
&client_id=<some_client_id>
&client_secret=<Some_client_secret>
If anyone could help me regarding my doubts, then it would be greatly appreciated. Thanks.
Microsoft Graph from JavaScript
Using Microsoft Graph from JavaScript works. HTTP requests to the REST endpoints with a valid access token will work great. You might also want to check out KurveJS (github:MicrosoftDX/kurvejs) for a simple library (handles authentication and some graph operations).
Authentication
If you are attempting client-side implicit flow, you can pass 'response_type=id_token+token' and avoid the second call. This will return you an access token in the resulting payload.
If you are attempting server-side authentication, you should pass 'response_type=code' and then make the second call for the access token with the resulting code.
References:
v2.0 Protocols - SPAs using the implicit flow
v2.0 Protocols - OAuth 2.0 Authorization Code Flow
I am trying to do Facebook authentication in same window of my web application's login page.
I am using following code when user clicked login button to go to authentication page.
function loginUsingOAUTH()
{
top.location = 'https://graph.facebook.com/oauth/authorize?client_id=839846246064537&scope=email&redirect_uri=http://www.olcayertas.com/testqa/result.html';
}
1) After authentication Facebook redirects me to my redirect url and returns a parameter "code".
At this point I want to access Facebook user information but I don't know how to do that.
What is this "code" parameter for?
2) Is there any other way to access user information?
3) Do you have any other advice facebook authentication with same window login?
Thank you in advance for your help
When you get the code you should make a server side request to get an access token and than pass the access token to user. It is explained in Facebook Developer page:
Exchanging code for an access token
To get an access token, make an HTTP GET request to the following
OAuth endpoint:
GET https://graph.facebook.com/v2.3/oauth/access_token?
client_id={app-id}
&redirect_uri={redirect-uri}
&client_secret={app-secret}
&code={code-parameter}
This endpoint has some required parameters:
client_id. Your app's IDs
redirect_uri. This argument is required and must be the same as the original request_uri that you used when starting the OAuth login
process.
client_secret. Your unique app secret, shown on the App Dashboard. This app secret should never be included in client-side code or in
binaries that could be decompiled. It is extremely important that it
remains completely secret as it is the core of the security of your
app and all the people using it.
code. The parameter received from the Login Dialog redirect above.
Response
The response you will receive from this endpoint will be returned in
JSON format and, if successful, is
{“access_token”: <access-token>, “token_type”:<type>, “expires_in”:<seconds-til-expiration>}
If it is not successful, you will receive an explanatory error
message.
Currently, I'm working on a web app that requires me to connect to an external API to GET a JSON file.
The API in question that I'm using noun project which requires an Oauth1.0a authentication. Now this project requires me to use Angular.JS to handle JSON data.
But before I can work with the JSON I need to GET it, and this is where things fall apart.
I keep getting the following error on my http://localhost:8080/ when I try to connect with the following code.
The error :
> XMLHttpRequest cannot load
> http://api.thenounproject.com/icons/fish&callback=?&oauth_consumer_key=9c70…891xxxx&oauth_version=1.0&oauth_signature=xxxxx6oeQI0p5U%2Br0xxxxxxx%3D.
> No 'Access-Control-Allow-Origin' header is present on the requested
> resource. Origin 'http://localhost:8080' is therefore not allowed
> access. The response had HTTP status code 403.
> Blockquote
The code :
var oAuth = OAuth({
consumer: {
public: '9c704cb01xxxxxxxxx',
secret: '45b7a8d86xxxxxxxxx'
},
signature_method: 'HMAC-SHA1'
});
var app = angular.module('nounProject', []);
app.controller('apiController', function(){
console.log("check");
var request_data = {
url: 'http://api.thenounproject.com/icons/fish&callback=?',
method: 'GET'
};
// var token = {
// public: 'f5fa91bedfd5xxxxxxxxxx',
// secret: '84228963d5e8xxxxxxxxxx'
// };
$.ajax({
url: request_data.url,
type: request_data.method,
data: oAuth.authorize(request_data)
}).done(function(data) {
console.log(data);
});
});
The library I use to access OAuth in JavaScript is the following: https://github.com/ddo/oauth-1.0a#client-side-usage-caution (by DDO)
Can anyone guide me in the right direction, or has a better way to OAuth connect to an API with Angular.JS?
Thanks in advance!
The right way is client <-> server <-> oauth services
All the oauth steps should be in your server side.
Why? The simple answer is you can't hide your secret consumer/token at your client side.
I was having the same problem with getting client-side to work, the original is here No Authentication Pop up with Tumblr Like <a> link: but I'll just repost it for ease..
Found an answer!
So let me break it down for you all.. I am just going to run down all the issues and caveats that were discovered while I was hacking away at the Tumblr API. In most cases you will not find any of these answers on the inter webs. If you do, they most likely will just be my answers to my own questions that I posted to the Forums.
A Tumblr Application is defined by any page template either hosted by Tumblr or not that will be using the Tumblr API. Applications must be registered with Tumblr at: https://www.tumblr.com/oauth/apps
All Tumblr Applications upon creation are given a set of keys for accessing the Tumblr API. OAuth Consumer Key aka API Key Secret Key
The Tumblr API is divided mainly into two different types of methods. The third being “Tagged” which is for pulling tagged posts from the Blog or the User.
“Blog Methods” which only require the submission of the Consumer Key. “User Methods” which require a full OAuth signed request which meets the OAuth 1.0a Protocol. The “User Likes” returns a maximum of 50 records at a time. This is not documented in the Tumblr API docs.
Currently the Tumblr API documentation directs developers to use one of the many open source API clients. However, all these clients seem to be Server Side applications. For providers, such as Tumblr, which support only OAuth1 or OAuth2 with Explicit Grant, the authentication flow needs to be signed with a secret key that may not be exposed in the browser.
HelloJS gets round this problem by the use of an intermediary webservice defined by oauth_proxy. This service looks up the secret from a database and performs the handshake required to provision an access_token. In the case of OAuth1, the webservice also signs subsequent API requests.
HelloJS - http://adodson.com/hello.js/ is the only client-side Oauth library that was available and free. There are many services out there that charge on a per-api hit basis to serve as a proxy. The HelloJS OAuth Proxy is available at: https://auth-server.herokuapp.com/
Login to the OAuth Proxy is done using one of the following social account credentials: Google, Windows Live, Facebook, or Yahoo. OAuth Proxy serves as a secure “man in the middle” allowing for the “Secret Key” to be securely stored while still allowing for Client-Side OAuth authentication.
HelloJS features a special Tumblr Module - http://adodson.com/hello.js/demos/tumblr.html
HelloJS utilizes the new Javascript Promises asynchronous functions specification - https://www.promisejs.org/
Javascript Promises have some unique rules when it comes to passing objects received from an asynchronous AJAX call. With everything is done in the callback. What jQuery calls a promise is in fact totally different to what everyone else calls a promise. Hope this helps for future Tumblr integrations.
John
I am trying to send app-generated request using either JS SDK or graph API but I am not successful and desperate. Issue is that when I am sending request to currently logged user, everything is ok, but when I try to send to different user (even this user already authorized my app) I receive OAuth exception "#2 User can't send this request: Unknown error", sometimes "Failed to send any app requests".
My app has Request 2.0 enabled and is authorized with publish_stream, read_stream and user_about_me permissions. Same error messages I described are shown even in Graph API explorer.
Exactly same issue is described here using JS SDK:
Sending an App Generated Request with the JavaScript SDK
... and here using Graph API:
Posting app generated apprequest to other facebook users in Java
Please help.
If you want send a request to a user, you should POST to the Graph API '/user_id/apprequests' using an App Access Token (https://developers.facebook.com/docs/authentication/#applogin). This call is to design to be executed server-side as you don't want to share your App Access Token:
curl -F 'access_token=APP_ACCESS_TOKEN' \
-F 'message=From the app to the user.' \
https://graph.facebook.com/USER_ID/apprequests
The same can be achieve using the User Access Token from the recipient (USER_ID) only:
curl -F 'access_token=USER_ACCESS_TOKEN' \
-F 'message=From the app to the user.' \
https://graph.facebook.com/USER_ID/apprequests
In the JS SDK, if no Access Token field is added, the default Access Token will be of the logged in user. Knowing that, the above call which send the a request to the logged in user, will be:
FB.api('/me/apprequests', 'POST', {message: 'From the app to the user.'});
The first call can also be done with the JS SDK, by adding the App Access Token in the parameters. However, this is a DO NOT USE case as you don't want to share your App Access token client-side.