How to get Google API access:

ASP.Net application

In the code below, first set your Client ID and Redirect URI. I have provided an example to show the logged in username and profile image, you can use it in any other way also. In the function getUserInfo(), you can get the results as username, email and and so on.

jQuery Link: jQuery.js

  1. <HTML>
  2. <Head>
  3. <script src="jquery.js" temp_src="jquery.js" type="text/javascript"></script>
  4. <script language="javascript" type="text/javascript">
  5. var OAUTHURL = 'https://accounts.google.com/o/oauth2/auth?';
  6. var VALIDURL = 'https://www.googleapis.com/oauth2/v1/tokeninfo?access_token=';
  7. var SCOPE = 'https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email';
  8. var CLIENTID = '132264420893-na047nu1sif8dn1p6qaug895feu2lqbp.apps.googleusercontent.com';
  9. var REDIRECT = 'http://localhost/googleplus/Test.aspx';
  10. var LOGOUT = 'http://accounts.google.com/Logout';
  11. var TYPE = 'token';
  12. var _url = OAUTHURL + 'scope=' + SCOPE + '&client_id=' + CLIENTID + '&redirect_uri=' + REDIRECT + '&response_type=' + TYPE;
  13. var acToken;
  14. var tokenType;
  15. var expiresIn;
  16. var user;
  17. var loggedIn = false;
  18. function login()
  19. {
  21. var win = window.open(_url, "windowname1", 'width=800, height=600');
  22. var pollTimer = window.setInterval(function () {
  23. try
  24. {
  25. console.log(win.document.URL);
  26. if (win.document.URL.indexOf(REDIRECT) != -1)
  27. {
  28. window.clearInterval(pollTimer);
  29. var url = win.document.URL;
  30. acToken = gup(url, 'access_token');
  31. tokenType = gup(url, 'token_type');
  32. expiresIn = gup(url, 'expires_in');
  33. win.close();
  34. validateToken(acToken);
  35. }
  36. }
  37. catch (e)
  38. {
  40. }
  41. }, 500);
  42. }
  43. function validateToken(token)
  44. {
  45. $.ajax(
  46. {
  47. url: VALIDURL + token,
  48. data: null,
  49. success: function (responseText)
  50. {
  51. getUserInfo();
  52. loggedIn = true;
  53. $('#loginText').hide();
  54. $('#logoutText').show();
  55. },
  56. dataType: "jsonp"
  57. });
  58. }
  59. function getUserInfo()
  60. {
  61. $.ajax({
  62. url: 'https://www.googleapis.com/oauth2/v1/userinfo?access_token=' + acToken,
  63. data: null,
  64. success: function (resp)
  65. {
  66. user = resp;
  67. console.log(user);
  68. $('#uName').text('Welcome ' + user.name);
  69. $('#imgHolder').attr('src', user.picture);
  70. },
  71. dataType: "jsonp"
  72. });
  73. }
  74. //credits: http://www.netlobo.com/url_query_string_javascript.html
  76. function gup(url, name)
  77. {
  78. namename = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  79. var regexS = "[\\#&]" + name + "=([^&#]*)";
  80. var regex = new RegExp(regexS);
  81. var results = regex.exec(url);
  82. if (results == null)
  83. return "";
  84. else
  85. return results[1];
  86. }
  87. function startLogoutPolling()
  88. {
  89. $('#loginText').show();
  90. $('#logoutText').hide();
  91. loggedIn = false;
  92. $('#uName').text('Welcome ');
  93. $('#imgHolder').attr('src', 'none.jpg');
  94. }
  95. </script>
  96. </Head>
  97. <body>
  98. <a href='#' onClick='login();' id="loginText"'> Google Plus </a>
  99. <a href="#" temp_href="#" style="display:none" id="logoutText" target='myIFrame' onclick="myIFrame.location='https://www.google.com/accounts/Logout'; startLogoutPolling();return false;"> Click here to logout </a>
  100. <iframe name='myIFrame' id="myIFrame" style='display:none'></iframe>
  101. <div id='uName'></div>
  102. <img src='' id='imgHolder'/>
  103. </body>
  104. </HTML>