How To Login With Google Plus In MVC

Ankit Kanojia

10y35.7k19100Article

API LoginGoogle Plus

19 Comments

Join the conversation! Your thoughts help the community grow.

Ankit Kanojia6y ago
Thank you so much Gaurang Mistry
Ankit Kanojia6y ago
Thank you so much Rushabh Patel
Ankit Kanojia6y ago
Thank you so much ahmed khattab
Ankit Kanojia6y ago
Thank you so much Amodu Bashir
Ankit Kanojia6y ago
Thank you so much eslam akrm
Ankit Kanojia6y ago
Thank you so much manav pandya
eslam akrm7y ago
Nice work sir, but I want to get the name of login user and I want to know that the user is login or not ?
Amodu Bashir8y ago
Nice work sir...... please have you done anything on facebook login?
Amodu Bashir8y ago
Nice work .....please have you actually done anything on facebook login
ahmed khattab9y ago
I got this errorThe following sections have been defined but have not been rendered for the layout page "~/Views/Shared/_Layout.cshtml": "Scripts".Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
Gaurang Mistry10y ago
Good Demo bro. Really very helpful.
Rushabh Patel10y ago
Good work Suchit Khunt I need same thing for microsoft login. Please share if you can
Ankit Kanojia10y ago
Hii Manav Pandya.. Currently i am working on that.. in short time you get that all..
Manav Pandya10y ago
If possible i need Login demo with Linkedin and Facebook posting sir
- Ankit Kanojia10y ago
  Here is the link for Login with linkedIN.. http://www.c-sharpcorner.com/article/how-to-login-with-linkedin-in-mvc/
- Ankit Kanojia10y ago
  Http://www.c-sharpcorner.com/article/how-to-login-with-linkedin-in-mvc/
- Manav Pandya10y ago
  Thank you very much sir Suchit Khunt for that demo
Manav Pandya10y ago
I will try and lets se what happened
Manav Pandya10y ago
Thanks for sharing sir @Suchit Khunt

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.

On the File menu, click New Project.
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.
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.

Log in Google Developer Console for creating an app.
Click on "Library" which lies in left side navigation or click on "Enable API" which stays at the top navigation.
Select "Google+ API" under Social APIs.
Click on "Enable" on top navigation.
Select "Go To Credentials" on right side.
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?"
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.
Now, click on "Download" so that you can get your Client ID and Client Secret.

Step 3

Now, its time for implementation.

Create an ActionMethod as below.
1. public ActionResult Index() {
2. return View();
3. }
Paste the below code in your View.
1. @ {
2. ViewBag.Title = "Google Plus API";
3. } < div class = "row" > < h2 > Google + Login / Sign in < /h2> < br / > < button class = "btn btn-danger"
4. id = "googleplus" > Google + API < /button> < br / > < /div>
5. @section Scripts { < link href = "https://fonts.googleapis.com/css?family=Roboto"
6. rel = "stylesheet"
7. type = "text/css" > < script src = "https://apis.google.com/js/api:client.js" > < /script> < script >
8. var googleUser = {};
9. var startAppA = function() {
10. gapi.load('auth2', function() {
11. //Retrieve the singleton for the GoogleAuth library and set up the client.
12. auth2 = gapi.auth2.init({
13. client_id: '1047328192927-jch54k8ecj884h0ahfr685b9e10u23kd.apps.googleusercontent.com',
14. secret_key: 'UCtG15hTOnTKzsPKsI8rMQ0X',
15. cookiepolicy: 'single_host_origin',
16. });
17. attachSignin(document.getElementById('googleplus'));
18. });
19. };
21. function attachSignin(element) {
22. auth2.attachClickHandler(element, {}, function(googleUser) {
23. debugger;
24. $(".se-pre-con").show();
25. console.log(googleUser);
26. var profiles = googleUser.getBasicProfile();
27. var ReturnUrl = 'http://localhost:58066/Home/ReturnURL';
28. //Crate A Bunch Of Object for Search
29. var objData = {
30. Email: profiles.getEmail(),
31. LastName: profiles.getFamilyName(),
32. FirstName: profiles.getGivenName(),
33. GoogleID: profiles.getId(),
34. ProfileURL: profiles.getName(),
35. };
36. $.ajax({
37. type: "POST",
38. url: '@Url.Action("ReturnURL", "Home")',
39. data: objData,
40. datatype: "json",
41. success: function(data) {
42. alert("Successfully Done");
43. }
44. });
45. $(".se-pre-con").hide();
46. }, function(error) {
47. alert(JSON.stringify(error, #ff0000, 2));
48. });
49. } < /script> < script > startAppA(); < /script>
50. }
Create a JsonResult Method.
1. [HttpPost]
2. public JsonResult ReturnURL(string Email, string FirstName, string LastName, string GoogleID, string ProfileURL) {
3. //Do your code for Signin or Signup
4. return Json(true, JsonRequestBehavior.AllowGet);
5. }