Google Sign-In manages the OAuth 2.0 flow and token lifecycle, simplifying our integration with Google APIs. A user always has the option to revoke access to an application at any time. Users can see a list of all the apps which they have given permission to access their account details and are using the login API. In this blog post I will discuss how to integrate this API with susi server API to enhance our AAA system. More on Google API here.
How to set up Google Sign-In API for SUSI
Step 1: Configuration
Go to Google developers console and select the project where you deployed your server on google cloud and select SUSI.
After that we need to configure our client name which will be shown on the user consent screen.
After that we need to configure What type of environment we are calling oauth from for example a web server, web client, android or ios platform.
Since we are integrating with the server API we will select web server. Then we need to give the path on which the google API will redirect us after successful validation.
This is the last step, after that we will get our client ID and our server Ids which we will use in the corresponding steps.
We can then download our client configuration file which is of json type format of name credentials.json. We need to download and save this file in our server directory.
After configuration is complete, take note of the client ID that was created. You will need the client ID to complete the next steps. (A client secret is also created, but you need it only for server-side operations).
Step 2: Initialisation
You must include the Google Platform Library on your web pages that integrate Google Sign-In.
src="https://apis.google.com/js/platform.js" async defer>
Step 3: Specify your app’s client ID
Specify the client ID you created for your app in the Google Developers Console with the google-signin-client_id meta element.
replace the <YOUR_CLIENT_ID> with the id we saved at the end of the configuration step.
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
Step 4: Add a Google Sign-In button
To add the Google Sign-In button to SUSI we will use an automatically rendered sign-in button. Google provide us with a simple and easy way to automatically configures itself to have the appropriate text, logo, and colors for the sign-in state of the user and the scopes you request.
To create a Google Sign-In button that uses the default settings, add a div element with the class g-signin2 to your sign-in page:
We also need to Follow Google Branding policies for the sign in button here if we want to manually configure the styling of our sign In button.
Step 5: Fetch profile information of users and store them in our database.
After you have signed in a user with Google using the default scopes, you can access the user’s Google ID, name, profile URL, and email address.
To retrieve profile information for a user, use the getBasicProfile() method.
Code block:
function onSignIn(googleUser) { var profile = googleUser.getBasicProfile(); console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead. console.log('Name: ' + profile.getName()); console.log('Image URL: ' + profile.getImageUrl()); console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present. }
This will give us the profile information of the user which can be securely stored in our database and use it to enhance user experience without violating their privacy policies.
Step 6: To enable users to sign out of SUSI without signing out of Google, we can do it by adding a sign-out button or link to chat.susi.ai. To create a sign-out link, attach a function that calls the GoogleAuth.signOut() method to the link’s onclick event.
<a href="#" onclick="signOut();">Sign out</a> function signOut() { var auth2 = gapi.auth2.getAuthInstance(); auth2.signOut().then(function () { console.log('User signed out.'); }); }
References
Developers.google.com (Google Sign-In for Websites)
Chrome Developers – Youtube (Introduction to Google Sign-In for Websites)
Chrome Developers – Youtube (Google Sign-In for Websites: Authentication with backends)
Chrome Developers – Youtube (Google Sign-In for Websites: Authorization)