Write a React application with Google authentication calling a Restful API
The Google Authentication API allows users to sign in to your application using their Google account. When you use this API, you can get information about the user’s Google account, such as their name, email address, and profile picture. You can also use the API to verify that the user is signed in to your application.
To use the Google Authentication API, you need to first set up a project in the Google Developers Console. After you create your project, you need to enable the Google+ API for your project. To do this, go to the APIs & auth > APIs page in the Developers Console and search for the Google+ API. Then, click the Enable API button.
Once the API is enabled, you can then set up your application to use the Google Authentication API. To do this, you need to add the following code to your HTML:
<script src=”https://apis.google.com/js/client:platform.js?onload=start" async defer></script>
This code loads the Google Authentication API JavaScript library. The library provides a convenient way to sign in to your application using a Google account.
Next, you need to add a button to your HTML that will allow users to sign in to your application using their Google account. To do this, add the following code to your HTML:
<div id=”g-signin2" data-onsuccess=”onSignIn”></div>
This code adds a button to your HTML that will trigger the Google Authentication API sign-in flow. When the user clicks the button, they will be prompted to sign in to their Google account. Once they sign in, the onSignIn function will be called.
Next, you need to write the onSignIn function. This function will be called when the user signs in to your application using their Google account. The function will receive a GoogleUser object as a parameter. This object contains information about the user’s Google account, such as their name, email address, and profile picture.
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.
}
Finally, you need to add some CSS to style the sign-in button. Add the following CSS to your HTML:
#g-signin2 {
width: 200px;
height: 50px;
}
This CSS will make the sign-in button the correct size.
Now that you have set up your application to use the Google Authentication API, you can use the API to make RESTful calls to the Google+ API. For example, you can use the API to get information about the currently signed-in user’s Google+ profile. To do this, you need to add the following code to your HTML:
<script>
function getProfile() {
var profile = gapi.client.plus.people.get({
‘userId’: ‘me’
});
profile.execute(function(resp) {
console.log(resp);
});
}
</script>
This code uses the Google+ API to get information about the user’s Google+ profile. The profile is returned as a JSON object, which you can then use to render the user’s profile information in your application.
