vue-authenticate icon indicating copy to clipboard operation
vue-authenticate copied to clipboard

What does the post request do after auth success ?

Open GF-Huang opened this issue 5 years ago • 7 comments

image

GF-Huang avatar Jun 03 '19 05:06 GF-Huang

It is a step where you exchange code for token on your backend to keep entire flow secure.

dgrubelic avatar Jun 05 '19 21:06 dgrubelic

@dgrubelic can I do that with my AJAX function in frontend project? because I need to add somethings data in the AJAX request, I don't want to auto redirect to backend :(

JasonXDDD avatar Jun 20 '19 08:06 JasonXDDD

I am having troubles with that part too and where I fail. What I don' really get is I set

this.$auth.authenticate(provider).then(res => {
  console.log(res);
});

but I actually never reach the callback. I was also thinking that this might be to address my backend (and seems to be set with the URL key in the providers. Is there a way to actually skip this as I was hoping to develop my backend after finishing the frontend

relief-melone avatar Jul 07 '19 17:07 relief-melone

@relief-melone URl key in provider is for sending request to backend. When user successfully login with social provider, it's auth-code and other data will be sent to your backend on defined URL.

Which then must be validated by your backend(and get exchanged/converted) and return valid access_token for your backend service.

jd-solanki avatar Sep 25 '19 07:09 jd-solanki

@dgrubelic Your plugin is doing great. However, I have one question.

I have authenticate method for social login as below.

        authenticate: function(provider) {
            this.$auth.authenticate(provider, { provider: provider })
            .then(function (response) {
                if(response.data.token_data){
                    console.log("success - Got code from provider & managed to created data for exchanging");
                    // localStorage.setItem("token", response.data.token_data)
                   // window.location = "/dash"
                  
                   // Convert auth-code 
                   return axios.post("http://localhost:8000/auth/get-access-token", response.data.token_data, { headers: {'Content-Type': 'application/json'} })
                   // return axios.get("https://programming-quotes-api.herokuapp.com/quotes/random")

                }
            })
            .then(res => {
              console.log("response received");
              console.log(res);
            })
            .catch(function(error) {
              console.log(error.response);
            });
        }

In above method. When I make post request it always send some headers which I haven't defined. vue-auth

That second post request which I chained is for converting social-token with access_token.

Why 401: Because it sends headers with bearer in my post request which result in 401(Even if I define custom header as shown in my code).

What I am looking for: Can I remove those headers when I send post request to my backend.

If there's any better approach please let me know.

~ Thanks

jd-solanki avatar Sep 25 '19 07:09 jd-solanki

@jd-0001 Did you look at this? https://github.com/dgrubelic/vue-authenticate#custom-request-and-response-interceptors

RichardNobel avatar Sep 25 '19 09:09 RichardNobel

Maybe this answer helps :)

eklieme avatar Jan 12 '22 16:01 eklieme