Integrate login with google in Websites with JAVA : Honey Vig Web Developer Ajax,Jquery, ASP, PHP, dotNET

Friday, October 21, 2022

Integrate login with google in Websites with JAVA

This tutorial helps you to integrate login with Google in JAVA websites. This works with the principle of oAuth2.
Here is the step by step process for that,

1. Login to the Google console API https://console.developers.google.com/apis/library
  Get the Client ID and Client secret, For that

1.1 After Login in Click on Credentials
1.2 Then Click on Create

2. Give a project name and Create a Project as shown

3.1 Click Create credentials again to access APIs.
3.2 Click OAuth client ID.

4. Now it will ask for create consent screen, Just click on Configure consent screen

5. Now fill the form below as shown, Just fill the product name only. All others are optional

6.1 Select the Application type as Web Application
6.2 Authorized Javascript origins as http://localhost:8080/. You can put link of your Application or website here. In our test project since we are running it as localhost, I gave here http://localhost:8080
6.3 Now in Authorized redirect URIs put http://localhost:8080/google_login_to_website/success.jsp
Now just click Create

7. Now it will Popup with You client ID and client secret as Shown

8. The project structure in Eclipse is as shown,
Download the project from below and Open in Eclipse.

9. index.jsp
Update the Client ID in the Below Code.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
   <title>Insert title here</title>
   <script src="https://apis.google.com/js/platform.js" async defer></script>
   <meta name="google-signin-client_id" content="COPY YOUR CLIENT ID HERE">
</head>
<body>
   <div class="g-signin2" data-onsuccess="onSignIn" id="myP"></div>
      <img id="myImg"><br>
      <p id="name"></p>
      <div id="status">
   </div>
   <script type="text/javascript">
      function onSignIn(googleUser) {
      // window.location.href='success.jsp';
      var profile = googleUser.getBasicProfile();
      var imagurl=profile.getImageUrl();
      var name=profile.getName();
      var email=profile.getEmail();
      document.getElementById("myImg").src = imagurl;
      document.getElementById("name").innerHTML = name;
      document.getElementById("myP").style.visibility = "hidden";
      document.getElementById("status").innerHTML = 'Welcome '+name+'!<a href=success.jsp?                  
      email='+email+'&name='+name+'/>Continue with Google login</a></p>'
   }
   </script>
   <button onclick="myFunction()">Sign Out</button>
   <script>
      function myFunction() {
      gapi.auth2.getAuthInstance().disconnect();
      location.reload();
   }
   </script>
</body>
</html>

10.success.jsp

 <%
 String name=(String)request.getParameter("name");
 String email=(String)request.getParameter("email");
  %>

<%=name %>

<%=email %>

11. After Running the index.jsp in Local host server. You will get the below screen after successful running.

12. After clicking log in, You will get the login screen,

13. After Successful login, The User info you will get as shown

14. Click on Continue with Google login to get name and email id of user

Honey Vig Web Developer Ajax,Jquery, ASP, PHP, dotNET

Friday, October 21, 2022

Integrate login with google in Websites with JAVA

No comments:

Post a Comment