Cannot POST - handling form POST from an external site

All, Our site needs to handle a login form on an external third party site - totally unrelated from our Vue.js/Quasar built site. Submitted form elements are a username and password. The external site is doing a POST to a page on our site.

In my routes.js I’m defining

{
path: ‘/siteLogin’,
name: ‘Site Login’,
component: () => import(‘components/home/siteLogin’),
props: (route) => ({
params: route.params
})
}
But it’s not working. I’m getting a ‘cannot /POST’ message in the browser.

I’d like to get to the params field from within siteLogin.vue and do the login/etc with the username/password.

So the big question is how can I get to the form POST parameters (username, password) from within a Vue.js component/page?

Any help would be appreciated.

Thanks, Jeff.

How is the actual flow?

As far as I understand, your site relies on an authentication mechanism from an external site. Is that correct?

Or is it the other way around? An external site wants to connect to your site?

From what you are writing things aren’t clear for me.

Perhaps you draw a simple flow? :wink:

@ThomasJunk

A user visits an external website where there is a login form. They enter their username and password in the login form and press submit. The form code on the external website is:

<form id=“loginForm” method=“post” action=“http://www.mysite.com/siteLogin” onsubmit=“return setParamStatus();”>
<input type=“text” autocomplete=“off” id=“userid” name=“userid” size=“23” maxlength=“18” placeholder=“Username”>
<input type=“password” id=“password” name=“password” size=“23” maxlength=“18” placeholder=“Password”>
<input type=“image” src="./loginButton.jpg" width=“97” height=“31” alt=“Sign in” id=“submitBtn”>
</form>

I can’t figure out a way for vue-router to get the userid and password parameters to the siteLogin.vue component within our site.

The third party site isn’t doing the authentication/login, that will happen from within our site given the userid and password.

Make Sense?

At least, I get the flow:

Foreign site -> Your site. :wink:

And what is behind this URI?

What if you use something like axios?
You could do something like:

data = {user:'userid', password:'password'};
axios.post('http://www.mysite.com/siteLogin', data);

Hope this helps

siteLogin.vue - a Vue component.

ralvez - I don’t have control of the third party site. I need to figure out how to recieve the results of a form post from a third party site and pass it thru the vue router to a vue component.

Yes. I understand. But I have used the same approach to send and receive data from a site that while is not 100% the same, it uses the same concept.
In your case what you would need to do is give your axios a variable name and then have vue read the result of that variable.
You may even use POSTMAN (is a free app) to see what tipe of message you get from the site. In my case, for example, the external site replies with a json object with the “userid” if login was successful and null if it is not.
You may get something different but using postman you can take a look at what exactly you get. Perhaps you only get a code 200, and that’s fine too because it tell you the login was successful.
Something like this should work:

    data = {user:'userid', password:'password'};
    response = axios.post('http://www.mysite.com/siteLogin', data);

response would have the result of your post message.

R.

The external site is not doing the login/authentication. The external site is simply doing a form submit with the form-data in the request body to mysite.com/siteLogin where the router directs the request to siteLogin.vue, but it isn’t working. I can’t do any coding on the external site side.

The point is: How is that supposed to work?

Regardless how you turn it, there is only communication between their page and your backend effectively.

OK. I think I get what you are doing.
You are injecting a from from an external provider into your site and then in your site you want a component to use the data from that form.
I have never done something like that BUT the first thing I would ask then is: are you sure your problem is not because of CORS issues?
What is the error you get in your browser’s developer console?

R.

No CORS issue, no messages in the developer console. Thanks for your attention to this - it’s appreciated.

Well… given the scenario if I was in your situation I would create a simple form (does not have to be pretty, just functional) and remove the injected form from the 3rd. party site.
Then try to see if submitting from that form works as expected. If it does not, then there are other problems you may need to work out. If it does you may need to contact the vendor of external form and ask for advice on the matter.

R.

Any luck solving this issue? Right now I’m having same problem with a third party website.

Basically my VueJs site redirects to a third party to do some currency transactions which is handle by a third party. then when the transactions its done, the third party website redirects to my VueJS site calling a URL with a POST call and sending some information that I need to retrieve in order to show the result of the transaction.

Basically this is the workflow.

VueJs Site -> Redirect to third party site -> third party redirects to VueJs site calling the URL as a POST with data -> . Vuejs should accepts this POST call and handle the response.

Now when third party redirects to my VueJs site, instead of loading my components I get a plain page with Cannot POST /mylandingResponseUrl .

@hdcastro, have you managed to resolve this issue? I’m having exactly the same problem

We too! How receive a post callback?!

Just like an idea (don’t kick me, please).
Before redirect to external site (with opening a new page)
create EventSource("url/to/your/backend") and wait until external site posts to your server and your server sends the message back.