Creating a Google API Console project and client ID

 

 

Before you can integrate Google Sign-In into your website, you must have a Google API Console project. In the project, you create a client ID, which you need to call the sign-in API.

To create a Google API Console project and client ID, follow these steps:

  1. Go to the Google API Console .
  2. From the project drop-down, select an existing project , or create a new one by selecting Create a new project.

    Note: Use a single project to hold all platform instances of your app (Android, iOS, web, etc.), each with a different Client ID.

  3. In the sidebar under “API Manager”, select Credentials, then select the OAuth consent screen tab.
    1. Choose an Email Address, specify a Product Name, and press Save.
  4. In the Credentials tab, select the New credentials drop-down list, and choose OAuth client ID.
  5. Under Application type, select Web application.
    Register the origins from which your app is allowed to access the Google APIs, as follows. An origin is a unique combination of protocol, hostname, and port.

    1. In the Authorized JavaScript origins field, enter the origin for your app. You can enter multiple origins to allow for your app to run on different protocols, domains, or subdomains. You cannot use wildcards. In the example below, the second URL could be a production URL.
    2. The Authorized redirect URI field does not require a value. Redirect URIs are not used with JavaScript APIs.
    3. Press the Create button.
  6. From the resulting OAuth client dialog box, copy the Client ID . The Client ID lets your app access enabled Google APIs.

Now you can add Google Sign-In to your website.


Now, it’s implementation time :

Step 1 : Create Grails App


grails create-app googleAuth
cd googleAuth

Step 2 : Edit application.js in Asset -> JavaScript directory as:

Step 3 : Edit index.gsp as:

In Body Tag :

In HEAD tag :

Now run the project…

It’s fetch your public data only

To store it in your database please visit Facebook API implementation.

If website theme hides some data then don’t worry.

Download the whole project from here

Thanks, I hope it will help you.

Please subscribe my website…to get more stuff regularly and in real time.

You will find Subscribe form at the footer of this website..