Google Sign in button not working on server - javascript

I am getting a weird issue. Google sing in button is working fine on my local system (using url: localhost) but it is not working on the server.
It keep giving me error 400 Error: invalid_request
I have added my server url on google console and even verified my URL
I am using example code from here
See my demo here

For use with requests from a web server. This is the path in your
application that users are redirected to after they have authenticated
with Google. The path will be appended with the authorization code for
access. Must have a protocol. Cannot contain URL fragments or relative
paths. Cannot be a public IP address.
Your redirect URI should probably look more like this.
http://ec2-54-175-82-188.compute-1.amazonaws.com/user/auth
When your code runs it has built the following request (Put this in any web browser.)
https://accounts.google.com/o/oauth2/auth?redirect_uri=storagerelay%3A%2F%2Fhttp%2Fec2-54-175-82-188.compute-1.amazonaws.com%3Fid%3Dauth315255&response_type=permission%20id_token&scope=email%20profile%20openid&openid.realm=&client_id=651551554260-60j7jq0i2gjsfm1mm0rh74ie4m80md5i.apps.googleusercontent.com&ss_domain=http%3A%2F%2Fec2-54-175-82-188.compute-1.amazonaws.com&fetch_basic_profile=true&gsiwebsdk=2
If you look at the redirect URI.
storagerelay%3A%2F%2Fhttp%2Fec2-54-175-82-188.compute-1.amazonaws.com%3Fid%3Dauth315255
Its not correct. It should be the page on your website that is designed to handle the authentication.

On the server, try setting the redirect_uri to "postmessage". It should do the magic.

Related

Unable to use Google SSO on server react

I am trying to use Google SSO on a server but the popup for Google SSO doesn't display the google accounts to select for logging in. It works when I test it in my local and am able to login too.
I am using the package react-oauth/google
I have added server details in Credentials via Google Cloud Console. Following are URLs in configurations in Authorized JavaScript origins and Authorized redirect URIs:
http://localhost
http://localhost:9998 ## React app is running on this port
http://example.com:9998 ## Server url can be accessed using domain and port
I am getting 403 error when following url is called https://accounts.google.com/gsi/button:
Following is the error that is shown in cosole
[GSI_LOGGER]: The given origin is not allowed for the given client
Tried clearing cache and hard reload. It doesn't work either.
Does it have something to do with using ports along with domain name?
EDIT: I have also tried creating new credentials.. but that doesn't work either
I had the same issue at work. Does your website have ssl certificate? If not try adding ssl certicate (otherwise google sso won't work without it) and then change the urls in the Authorized JavaScript origins and Authorized redirect URIs with the https url. This should fix the issue. Let me know if it worked :)

React Google Login Error: 400 on mobile devices

I'm using the React Google Login package to authenticate users for my site. It works fine on desktop but when I test it out on mobile I am getting Error 400: redirect_uri_mismatch. I've made sure all my URIs are correct in the API credentials. I'm having a hard time understanding why it will work on desktop but not on mobile.
The redirect_uri_mismatch error message is very common. The redirect uri is used in web applications to tell the server where to return the authorization code to.
When a web application launches the consent screen and the user consents to authorization by defining a redirect uri the authorization sever knows where on your web server the application is able to handle the authorization code exchange step. For it to work properly each redirect uri for your web application must be registered exactly in Google cloud console for your project. This means HTTPS vs HTTP as well as ports and trailing slashes are important. How to fix redirect uri missmatch
True mobile login does not have a redirect uri, Client sided JavaScript applications also do not have a redirect uri they have a JavaScript origin.
Its hard to help you more without seeing your code but you may be mixing things a little.
For a web application you should have configured a web client on Google cloud console, if its back end then you should have a redirect uri, if its client side JavaScript then you should have added a JavaScript origin.
If you have a mobile application android or ios then you should have crated a mobile client. Which would not require a redirect uri.

407 Proxy Authentication Required ( Forefront TMG requires authorization to fulfill the request. Access to the Web Proxy filter is denied. )

I have developed a website which uses Ajax POST using jQuery to a PHP server.
While it works perfectly when accessed from a web browser at home, some of my Ajax requests fail when accessed from a web browser on my day job's corporate network, and I get the following error shown by Firebug: 407 Proxy Authentication Required ( Forefront TMG requires authorization to fulfill the request. Access to the Web Proxy filter is denied. ). Note that Chrome does not show the error but it is still blocked, and IE11 blocks it as well but I haven't been able to view the message using Development Tools due to an unrelated issue (Error in jquery.validate.js in MVC 4 Project with jQuery 1.9).
I have no ability to modify anything on the corporate network, nor is it my desire to do so. My desire is to modify the HTML/JavaScript/Headers which my server provides to eliminate blocking of the request so others do not experience this issue.
What can be done?
This happens when you are using a complete url address in your html or jquery posts
e.g.
action="http://www.example.com/mydir/myfile.php"
Try changing the url reference so that it doesn't include the website address
e.g.
action="/mydir/myfile.php"
This also works when posting with AJAX/jquery
e.g. the code below produces the same error
var url1="http://www.example.com/mydir/myfile.php";
$.post(url1, function(data){alert(data);});
but this code doesn't
var dir1="/mydir/myfile.php";
$.post(dir1, function(data){alert(data);});
It is important to note that when you switch from the complete urls to the directories, you have to define your directory relative to your current file directory.

How to authenticate instagram without redirect url? no server

I am trying to write a client side authentication for instagram, however I want to do so without a redirect uri, i will not be hosting a sever.
https://instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token
the dev api states this is the implicit way, however i cannot find a solution
The short answer is, you cannot do without a redirect uri.
This is how OAuth works. You need at least a uri to receive the access token. The uri could be hosted on localhost using a simple web server though.
Follow the Client-Side (Implicit) Authentication flow.
Use the credentials from the app you registered at the Instagram developer portal.
So change CLIENT-ID and REDIRECT-URI from that url to the credentials of your registered app.
From your app, send the user to that link.
If they accept they will be redirected to the redirect uri (which should be somewhere in your app).
On the page they get redirected, the page will have a hash containing an acces token.
Get that from the url and use it to request data from the instagram api. You will need jsonp for the requests. See an example in action in a similar thread

How to alias a URL?

I'm testing client-side Facebook auth locally.
I'm hitting the error
API Error Description: The specified URL is not owned by the application
because I'm testing locally, what is the best way to work around this and alias the URL so I can keep testing locally?
I'm using a Mac.
Thanks!
In the facebook application you can set a URL in the app tab where the script is being executed. This has to be set if you're working on some external website.
Reason why:
If i was to discover the app id of someones app i cannot start posting feeds and whatnot in it's name. You have to be specific with the URL in the application so it will be granted access.
Edit
To my knowledge you cannot work local with facebook applications when it comes to JavaScript. You can specify the local URL in the facebook api but i don't think it will go trough without giving the same error.
Assuming I understand your question correctly, for this I would use Charles Proxy and make use of its Map Remote functionality.
Changing the url on Facebook to localhost works.

Categories