This document provides steps to import Google contacts into a web application using the Google Contacts API and OAuth 2.0 authentication. It outlines setting up a Google project, enabling the Contacts API, and creating OAuth credentials. It then gives examples of calling the API from a PHP backend to retrieve and display contacts, and using JavaScript on the frontend to authorize access and fetch contacts. Additional details are provided on retrieving contact photos and handling common issues.

1. Import Google contacts with PHP or Javascript using
Google Contacts API and OAUTH 2.0

2. Inviting friends to a web application is a key factor to gain more users and traffic.
In this article we will try to give a practical, step by step example on how you can easily import
google contacts to your web application, because even if google offers an api documentation,
it’s always hard to find an example that is not out-dated, that fits in your app without having
headaches and losing precious time.
This tutorial will offer examples for Server Side application (php) but also for Client Side
application (javascript). We will use OAUTH 2.0 authentication and Google Contacts API version
3.0.

3. ● Go to Google Google Developers Console and login with your google account
● If you don’t have already a project, create one
Create a Google application in Google Developers Console for
obtaining your Client id and Client secret.
Step 1

4. ● Go into the newly created project
● In the left menu, go to APIs & auth > APIs
● Search for “Contacts API” and click on it
● Enable the “Contacts API” by hitting the
“Enable API” button

5. ● Go to “Consent screen” if you didn’t set a product name already. In the left menu, go to
APIs & auth > Consent screen
● Configure your “Consent screen” settings

6. ● Create a new OAuth Client ID. In the left menu, go to APIs & auth > Credentials
● Click on “Create a new Client ID”

7. ● For “Application type” select “Web Application” and enter a proper URL for “Authorized javascript
origins” and “Authorized Redirect URIs” and click “Create Client ID”.
a. Note: It’s important that you enter your correct url application or “Authorized Javascript origins”,
something like http://www.example.com.
b. The url that you will enter on “Authorized redirect URIs” , will be the url that google will use to
redirect with your response data. For example, after a user will accept giving credentials to your
application, will be automatically redirected to http://www.example.com/response-callback.php. In
this file you can read the google contacts.
● If everything goes well, you will now able to see your API credentials, Client ID and Client Secret

8. Server side example using PHP
● Download and include “Google APIs Client Library for PHP” in your php application.
We will use a filename “response-callback.php” located in the root application, for the
example below.
● Declare your Google Client ID, Google Client secret and Google redirect uri in php
variables
● Setup new google client
Step 2

9. ● Create a curl function
● Google will redirect back to our URL with a code token parameter, for example:
http://www.example.com/response-callback.php?code=1241254
● For better UX, we store the received code into a session, and redirect back to this url

10. ● Check if we have session with our token code and retrieve all contacts, by sending an
authorized GET request to the following URL :
https://www.google.com/m8/feeds/contacts/default/full
● Upon success, the server responds with a HTTP 200 OK status code and the requested
contacts feed. For more informations about parameters check Google API contacts
documentation

11. ● Create the link that the user will click to import his contacts
● When the user will click on that link he will be asked to allow permissions for your
application
● The user will be automatically redirected to your application, and you can display his
contact list

12. UPDATE: How to import contact photos using Google Contact API
Google documentation about retrieving a contact’s photo.
To retrieve a contact’s photo, send an authorized GET request to the contact’s photo link
URL.
Considering that we already have the contact photo link in our $contacts array above, we
just need to import the photo with a GET request using PHP.
When parsing the contacts in the php foreach, we will retrieve also the image for each
contact. The foreach code will become:

14. Client side example using Javascript
According to Google documentation about “OAuth 2.0 for Client-side Applications” , your
application should always use HTTPS when using client side implementation.
● Include jquery and google client.js
● Authorize access and fetch contacts
Step 2
(alternative)

15. ● Make a button to fire the event
Still having problems importing your contacts using Google API?
Don’t hesitate to post your question
in the Comments section.

16. +40 740 070 011
office@design19.org
design19ro
www.design19.org
https://www.linkedin.com/company/design-19