I am using laravel as a backend and vuejs as a front end. I have created plan an product using the paypal end points on the backend. When I put the paypal button inside vue and click it. It throws me this error.
paypal.Buttons({
createSubscription: function(data, actions) {
return actions.subscription.create({
plan_id: "plan-id"
});
},
onApprove: function(data, actions) {
alert(
"You have successfully created subscription " + data.subscriptionID
);
}
})
.render("#paypal-button-container");
Make sure you use direct HTTPS API calls to implement the Subscriptions API.
The PayPal-PHP-SDK 's use of billing plans is old and not compatible with the latest versions of the subscriptions API. You should not use the PayPal-PHP-SDK for anything, it is obsolete at this point (use the Checkout-PHP-SDK for regular, non-Subscription payments, and direct HTTPS API calls for the Subscriptions API).
You can test this with command-line curl or Postman calls first, to make sure it works, and then implement the necessary PHP function to do a direct HTTPS API call with the oauth token
Related
I am creating a webhook handler (within aws lambda) for my shopify app.
Note: I'm using eventbridge to receive webhooks, but i believe the concept is the same.
When a customer creates a new order this webhook will be called, and from within my webhook handler i would like to make an authenticated request to the Nodejs #shopify/shopify-api Admin API.
My question is, what is the best way to do this?
For example, how do i use the details from the webhook event to create a session which i can then use to make requests to the Admin API?
eg;
const product = await shopify.rest.Product.find({session, id: '7504536535062'});
product.title = 'A new title';
await product.save({
update: true,
});
the webhook comes from a store! So you know the *.myshopify.com
you saved an access token with the same store name in your DB
So now you can use the access token against the store, to make API calls within the scope of permissions granted when the store installed the App.
I'm currently working on a personal project which involves a Quarkus REST API as a back-end, Keycloak as OpenId Connect Provider and a Vue app as front-end. I just can't wrap my head around how to make these three components play well together for user authentication while maintaining proper security.
According to draft v8 of OAuth 2.0 for Browser-Based Apps, the SPA shouldn't be the one to keep the access and (possibly) refresh tokens because they are hard to store securely in such a scenario. That means, the back-end must be acting as the Relying Party, initiating the OIDC Authorization Code Flow. I'd then either keep a session cookie with my SPA (which I'd prefer not to do, to keep the API stateless), or store the tokens inside a Secure, SameSite, HttpOnly cookie.
The approach is what I’m trying to accomplish, so far with little success.
Prototype implementation
My Quarkus app uses the quarkus-oicd extension.
The way I understand it, I have to add the following configuration to Quarkus' application.properties:
quarkus.oidc.application-type=web-app
quarkus.oidc.client-id=myClientId
quarkus.oidc.credentials.secret=********
quarkus.oidc.auth-server-url=http://127.0.0.1:8082/auth/realms/myRealm
The application-type=web-app being what tells Quarkus that it is responsible for initiating the authorization code flow. The alternative would be service, in which case Quarkus only validates bearer tokens the client sends to the API.
The API is running on port 8081 and only exposes a single sample resource:
#Path("/hello")
#Authenticated
public class ReactiveGreetingResource {
#GET
#Produces(MediaType.TEXT_PLAIN)
public String hello() {
return "Hello RESTEasy Reactive";
}
}
This simple Vue component is meant as a proof-of-concept:
// FetchComponent.vue
<template>
<div>
<button v-on:click="fetchFromBackend">Fetch</button>
<p><b>Output:</b>{{ message }}</p>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
data() {
return {
message: "Click the button to fetch.",
};
},
methods: {
fetchFromBackend(): void {
this.message = "Waiting...";
fetch("http://localhost:8081/hello", {
credentials: "include",
})
.then((resp) => {
console.log(resp);
if (resp.redirected) {
window.location.assign(resp.url);
} else {
return resp.text().then((text) => (this.message = text));
}
})
.catch((reason) => (this.message = "Caught error: " + reason));
},
},
});
</script>
<style></style>
Desired outcome
I'd have expected that the call to the back-end without a valid token gets redirected to Keycloak's authentication page. The user would then enter their credentials, be logged in and redirected back to the SPA with an auth code. It calls the API again. On the back-channel, Quarkus exchanges the auth code against a token and forwards it to the client in form of a cookie. This cookie would be used to authenticate the user for any further API calls.
Actual outcome
When the back-end is called without a valid token, it redirects to Keycloak's login page, as expected. Apparently, though, there is simply no way to navigate to the redirected URL from JS. The fetch specification states: "Redirects (a response whose status or internal response’s (if any) status is a redirect status) are not exposed to APIs. Exposing redirects might leak information not otherwise available through a cross-site scripting attack." The redirect: 'manual' option in a fetch request is somewhat of a red herring. It doesn't do what one would expect and it certainly doesn't allow me access to the redirect URL.
What happens instead is that the browser transparently follows the redirect and tries to fetch the login URL. That doesn't work at all. It results in a CORS error, because Keycloak doesn't set the relevant headers (and I suppose it shouldn't, because this isn't how it's supposed to work).
I have no clue how to proceed from here but I presume that the answer is extremely obvious to more experienced people.
As a closing remark I'd like to add that this architecture wasn't the result of a very well-informed decision making process. I chose it mostly because:
Quarkus: Java is currently my primary language at my job
Keycloak: I wanted to try my hand at proper externalized IAM and SSO for a while now. This seemed a good opportunity.
Vue: I wanted something to train my JS skills and which would look good on my resume. Any of the current batch of hot SPA frameworks would have fit the bill.
So, any answers along the lines of "that's a terrible setup, just don't do it, try X instead" are definitely also welcome, even though I'd still love to solve this puzzle as a matter of pride.
I have a client that wants to be able to create xero invoices from a custom backend plugin that I have created in WordPress. I understand the xero api docs and what data to pass to the api to create a new invoice but I have to somehow authenticate the user so that they can send data to the api. So far I have created my xero app with a client id and client secret which I believe is required to help authenticate the api request.
But how can I authenticate the api request?
If I do simple request like this it fails:
jQuery(document).ready(function ($) {
$.ajax({
url: 'https://api.xero.com/connections',
error = (res) => {
console.log(res);
},
success = (res) => {
console.log(res);
}
});
});
I'd first recommend using the official xero PHP sdk, however I'm not sure if you are able to import packages to Wordpress like this. I've done some wordpress but I know there are some limitations with importing certain external libraries.
https://github.com/XeroAPI/xero-php-oauth2
However as an alternate solution, theres a recent blogpost on using a raw OAuth2.0 library to connect to XeroAPI manually though. This might set you on the right direction!
https://medium.com/#sid.maestre/use-php-to-connect-with-xero-31945bccd037
I'm trying to setup a manual flow for Facebook login, as per the docs at: https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow/
I've got my test Facebook app working as expected, i.e., I can login using a private web browser window fine. The URL I'm using is:
https://facebook.com/v3.3/dialog/oauth?client_id=<app_id>&display=popup&response_type=token&redirect_uri=https://www.facebook.com/connect/login_success.html
Now within my React-Native app, I'm using react-native-inappbrowser-reborn to present a SFAuthenticationSession on iOS. As per their docs (at https://www.npmjs.com/package/react-native-inappbrowser-reborn), I'm doing the following:
const redirectUri = "https://www.facebook.com/connect/login_success.html"
const url = "https://facebook.com/v3.3/dialog/oauth?client_id="+appId+"&display=popup&response_type=token&redirect_uri=https://www.facebook.com/connect/login_success.html"
InAppBrowser.isAvailable()
.then(() => {
InAppBrowser.openAuth(url, redirectUri, {
// iOS Properties
dismissButtonStyle: 'cancel',
// Android Properties
showTitle: false,
enableUrlBarHiding: true,
enableDefaultShare: true,
})
.then((response) => {
// Only gets to this point if user explicitly cancels.
// So this does not trigger upon successful login.
})
// catch handlers follow
Using the above, my app correctly open up an in-app browser and I can login fine using a test user for my test app. Upon successful login though, I don't get redirected back to the .then completion handler. It just stays in the in-app browser view and I see the same message from Facebook that I see when logging in using a web browser. It says something like "Success. Please treat the url the same as you would a password", or something like that.
I may be missing something here, but I thought the purpose of passing redirectUri as an argument to openAuth was so that upon redirection to that URI, the completion handler would be triggered.
Question: How do I redirect back to the completion handler upon login success?
I think that you already have a solution but thought it might be useful for someone else facing this issue. If you don't have a solution so far follow my instructions:
You can't directly redirect back to your application using deep link, since Facebook will not call a link `like myapplicationname://mycustompath´. It's only possible to call links using the https-protocol (https://...).
The solution I'd suggest you to use is to redirect using your own API (Facebook -> Your API -> Deep Link Redirection). You will understand why this is required in the most of the real world applications at the end of the instructions.
Starting from your react-native app call the authorize endpoint of Facebook with a redirection to your application and set the global deeplink of your app as redirect uri.
InAppBrowser.close();
InAppBrowser.openAuth("https://graph.facebook.com/oauth/authorize?client_id=YOURCLIENTID&redirect_uri=https://YOURDOMAIN:PORT/auth/facebook", "{YOURAPPSDEEPLINKNAME}://{SOMEPATHYOUWANTTOEND}")
.then((response) => {
handleAuthorized(response, LOGINTYPE.FACEBOOK);
});
Now after login you'll be redirected to your API with the authorization code token as query parameter (e.g. https://YOURDOMAIN:PORT/auth/facebook?code=AVERYLONGCODESENTBYFACEBOOK)
Using this code token from the query parameter, you make another API Call to get the access_token for the user
{GET}: https://graph.facebook.com/v15.0/oauth/access_token?client_id=YOUR_CLIENT_ID&redirect_uri=https://YOURDOMAIN:PORT/auth/facebook&client_secret=YOUR_CLIENT_SECRET&code=AVERYLONGCODESENTBYFACEBOOK
Facebook's API will send you an answer as JSON with the access_token inside.
You can make another call using the access token of the user, to get the userId and the username
{GET}: https://graph.facebook.com/me?access_token=ACCESS_TOKEN_SENT_BY_FACEBOOK_IN_PREVIOUS_GET_REQUEST.
If you need the e-mail address for the user you have to make another call. Make sure you'd set the permission to read the e-mail address for your app on the developer portal of facebook.
The following request will return you the id, name and the email of the user
{GET}: https://graph.facebook.com/USERIDFROMPREVIOUSREQUEST?fields=id,name,email&access_token=ACCESSTOKEN
I think you want to save all these information to a database and create a session in order to keep the user logged in and therefore all the requests described will be useful for you in a real application.
After doing all the backend stuff, you're ready for the redirection using deep link. To do that, set a meta-tag to redirect the inappbrowser to your application:
<meta http-equiv="refresh" content="0; URL={YOURAPPSDEEPLINKNAME}://{SOMEPATHYOUWANTTOEND}" />
I'm new to Shopify,
I have to develop shopify app API using It's Shopify API in laravel 5.
I have created app in my Development store, but when I am trying to install it on store it's giving authentication error.
As per documentation when user click on install app it redirects to the application callback url with access code as 'code' parameter in url string.
by using this code we need to call verify request method to generate permanent Access Token.
When I'm trying to do this shopify is redirecting me to the callback url but there is no 'code' in list.
I have set callback url in my app which is my localhost url converted by ngrok url (http://36481603.ngrok.io) by using this url I am redirecting user to my API controller where I have below code...
$sh = App::make('ShopifyAPI');
try
{
$verify = $sh->verifyRequest(Input::all());
if ($verify)
{
$code = Input::get('code');
$accessToken = $sh->getAccessToken($code);
}
else
{
// Issue with data
}
}
catch (Exception $e)
{
echo '<pre>Error: ' . $e->getMessage() . '</pre>';
}
Please provide if there is a step-by-step documentation for new app development in shopify.
Thanks in advance.
By using this code we need to call verify request method to generate permanent Access Token..
I dont think you are right in this context, the verify request method does not generate access token but verifies the validity of the request.
Anytime anyone clicks on your app to install your app shopify appends four items to the query string which are code, signature, shop, timestamp.
You need to construct a url with the shop url to obtain the access token which in this case i dont know whether you are doing it write with your encapsulated method.
eg. $url = "https://{$shop}/admin/oauth/access_token".
And sending your apikey as client_id, api_secret as client_secret, and the code you obtained from the url as code to form and send as a post request to shopify to obtain the access token.