How To Login With Google Plus In MVC

Let’s first establish what the purpose of the code is, in the first place.

For this article, the purpose of the code is how to Sign in / Login with Google Plus in MVC application.
,
Step 1

In the first step, you need to create an empty MVC application.

1. On the File menu, click New Project.
2. In the New Project dialog box, under Project types, expand Visual C#, and then click Web. In the Name box, type "DemoGPlusAPI", then click on OK.
3. Now, in the dialog box, click on "MVC" under ASP.NET 4.5.2 Templates, Then, click on "Change Authentication" which stays on the center-right side. Then, select "No Authentication".

Step 2

For Sign in / Login with Google Plus, first of all, we need to create an app in our Google account & then we need client_id and secret_key of that app. So, here we go for creating an app in Google account.

1. Log in Google Developer Console for creating an app.
   
2. Click on "Library" which lies in left side navigation or click on "Enable API" which stays at the top navigation.
   
   
   
   
3. Select "Google+ API" under Social APIs.
   
   
   
   
4. Click on "Enable" on top navigation.
   
   
   
   
5. Select "Go To Credentials" on right side. 
   
   
   
   
6. Select "Web browser (JavaScript)" for "Determines" which settings you'll need to configure. Select "User Data" for the data that you would be accessing. Then, click on "What credentials do I need?"
   
   
   
   
7. Finally, it's time to create an app for OAuth 2.0 client ID. Give your preferred app name. Provide your Origin URL & Redirect URL, then click on "Create client ID".
   
   
   Redirect URL
   It means that after executing the request, trigger will redirect to this URL.
   
   Origin URL
   The URL which contains the request. For Origin URL, right click on your project "DemoGPlusAPI" and select "Web". Then, copy your Project URL.
   
   
8. Now, click on "Download" so that you can get your Client ID and Client Secret.
   
   
   

Step 3

Now, its time for implementation.

1. Create an ActionMethod as below. 
   

   public ActionResult Index() {
       return View();
   }

2. Paste the below code in your View.
   

   @ {
       ViewBag.Title = "Google Plus API";
   } < div class = "row" > < h2 > Google + Login / Sign in < /h2> < br / > < button class = "btn btn-danger"
   id = "googleplus" > Google + API < /button> < br / > < /div>
   @section Scripts { < link href = "https://fonts.googleapis.com/css?family=Roboto"
       rel = "stylesheet"
       type = "text/css" > < script src = "https://apis.google.com/js/api:client.js" > < /script> < script >
           var googleUser = {};
       var startAppA = function() {
           gapi.load('auth2', function() {
               //Retrieve the singleton for the GoogleAuth library and set up the client.
               auth2 = gapi.auth2.init({
                   client_id: '1047328192927-jch54k8ecj884h0ahfr685b9e10u23kd.apps.googleusercontent.com',
                   secret_key: 'UCtG15hTOnTKzsPKsI8rMQ0X',
                   cookiepolicy: 'single_host_origin',
               });
               attachSignin(document.getElementById('googleplus'));
           });
       };
   
       function attachSignin(element) {
           auth2.attachClickHandler(element, {}, function(googleUser) {
               debugger;
               $(".se-pre-con").show();
               console.log(googleUser);
               var profiles = googleUser.getBasicProfile();
               var ReturnUrl = 'http://localhost:58066/Home/ReturnURL';
               //Crate A Bunch Of Object for Search
               var objData = {
                   Email: profiles.getEmail(),
                   LastName: profiles.getFamilyName(),
                   FirstName: profiles.getGivenName(),
                   GoogleID: profiles.getId(),
                   ProfileURL: profiles.getName(),
               };
               $.ajax({
                   type: "POST",
                   url: '@Url.Action("ReturnURL", "Home")',
                   data: objData,
                   datatype: "json",
                   success: function(data) {
                       alert("Successfully Done");
                   }
               });
               $(".se-pre-con").hide();
           }, function(error) {
               alert(JSON.stringify(error, #ff0000, 2));
           });
       } < /script> < script > startAppA(); < /script>
   }

3. Create a JsonResult Method.
   

   [HttpPost]
   public JsonResult ReturnURL(string Email, string FirstName, string LastName, string GoogleID, string ProfileURL) {
       //Do your code for Signin or Signup
       return Json(true, JsonRequestBehavior.AllowGet);
   }