I am trying to test OAuth buttons, but they all (Facebook, Twitter, LinkedIn) come back with errors that seem to signal that I can not test or use them from a local URL.
How do people usually work in development with OAuth stuff if they all seem to require a non-dev and non-local connections environments?
Google doesn't allow test auth api on localhost using http://webporject.dev
or .loc
and .etc and google short link that shortened your local url(http://webporject.dev
) also bit.ly
:). Google accepts only url which starts http://localhost/
...
if you want to test google auth api you should follow these steps ...
if you use openserver
go to settings panel and click on aliases tab
and click on dropdown then find localhost
and choose it.
now you should choose your local web project root folder by clicking the next dropdown that is next to first dropdown.
and click on a button called add
and restart opensever.
now your local project available on this link http://localhost/
also you can paste this local url to google auth api to redirect url
field...
You can also use ngrok: https://ngrok.com/. I use it all the time to have a public server running on my localhost. Hope this helps.
Another options which even provides your own custom domain for free are serveo.net and https://localtunnel.github.io/www/
Or you can use https://tolocalhost.com/ and configure how it should redirect a callback to your local site. You can specify the hostname (if different from localhost, i.e. yourapp.local and the port number). For development purposes only.
Another valuable option would be https://github.com/ThomasMcDonald/Localhost-uri-Redirector. It's a very simple html page that redirects to whatever host and port you configure in the UI.
The page is hosted on Github https://thomasmcdonald.github.io/Localhost-uri-Redirector, so you can use that as your OAuth2 redirect url and configure you target host and port in the UI and it will just redirect to your app
I found xip.io which automatically converts a fixed url to a embedded localhost domain.
For example lets say your localhost server is running on 127.0.0.1:8000
You can go to http://www.127.0.0.1.xip.io:5555/
to access this server.
You can then add this address to Oauth configuration for Facebook or Google.
Taking Google OAuth as reference
In your OAuth client Tab
(http://localhost:3000)
to Authorized JavaScript origins URIsIn your OAuth consent screen
mywebsite.com
to Authorized domainsEdit the hosts file on windows or linux Windows C:\Windows\System32\Drivers\etc\hosts
Linux : /etc/hosts
to add 127.0.0.1 mywebsite.com
(N.B. Comment out any if there is any other 127.0.0.1)
You can edit the hosts file on windows or linux Windows : C:\Windows\System32\Drivers\etc\hosts Linux : /etc/hosts
localhost name resolution is handled within DNS itself.
127.0.0.1 mywebsite.com
after you finish your tests you just comment the line you add to disable it
127.0.0.1 mywebsite.com
For Mac users, edit the /etc/hosts
file. You have to use sudo vi /etc/hosts
if its read-only. After authorization, the oauth server sends the callback URL, and since that callback URL is rendered on your local browser, the local DNS setting will work:
127.0.0.1 mylocal.com
Set your local domain to mywebsite.example.com
(and redirect it to localhost) -- even though the usual is to use mywebsite.dev
. This will allow robust automatic testing.
Although authorizing .test
and .dev
is not allowed, authorizing example.com
is allowed in google oauth2.
(You can redirect any domain to localhost in your hosts file (unix/linux: /etc/hosts
))
Why mywebsite.example.com
?
Because example.com
is a reserved domain name. So
not-redirected-by-mistake.example.com
.Source: Stackoverflow.com