If you are building a web-app, which needs to use OAuth for user authentication across Facebook, Google, Twitter and other social media, testing the app locally, on your development machine, can be a real challenge.
On your local machine, the app URL might look like http://localhost/my_app/login.xxx while in the production environment the URL would be http://my_app.com/login.xxx
Now, when you try to test the OAuth integration, using Facebook (or any other resource server) it will not work locally. Because when you create the facebook app, you need to give the URL where the code will be located. This is different on local and production environment.
So how do you resolve this issue?
One way to resolve this issue is to set up a Virtual Host on your machine, such that your local environment have the same URL as the production code.
To achieve this, following the 4 simple steps:
1. Map your domain name to your local IP address
Add the following line to /etc/hosts file
Now when you request for http://my_app.com in your browser, it will direct the request to your local machine.
2. Activate virtual hosts in apache
Uncomment the following line (remove the #) in /private/etc/apache2/httpd.conf
3. Add the virtual host in apache
Add the following VHost entry to the /private/etc/apache2/extra/httpd-vhosts.conf file
<VirtualHost *:80> DocumentRoot "/Users/username/Sites/my_app" ServerName my_app.com </VirtualHost>
4. Restart Apache
System preferences > “Sharing” > Uncheck the box “Web Sharing” – apache will stop & then check it again – apache will start.
Now, http://my_app.com/login.xxx will be served locally.