Monday, 26 September 2016

Login With Google

Here in This Article I am going to explain you how to implement Login with Google in your website. first of all you need to create a new project in Google developers console. https://console.developers.google.com/



Select your existing project. if you haven't created then first of all Create a new Project.

Provide Project Name. I have provided "LoginWithGoogle". click on Create button.
Now Click on Credentials Link on Left Side Menu.
Click On OAuth consent screen Link and Fill the information. finally click on Save button.


It will Redirect you to the Credentials Page. 


Click on Create credentials Button. it'll open a menu. Click on OAuth client ID.



Click on Web application Radio button.



Fill the Information and Click on Create Button. It'll generate Client ID and Client Secret Key.


Finally Click On Save Button. 
Now You have Client ID and Secret Key for your Login with Google functionality.

Now come to your Visual Studio Project.
Create a new MVC Project.

In the Model Folder Create a new Model class.

  public class GoogleDataModel  
   {  
     public string Email_address { get; set; }  
     public string Google_ID { get; set; }  
     public string firstName { get; set; }  
     public string LastName { get; set; }  
     public string fullName { get; set; }  
     public string Client_ID { get; set; }  
     public string Return_url { get; set; }  
     public string userProfilePic { get; set; }  
     public string Gender { get; set; }  
   }  

In the Home Controller add the Client Key and Secret Key.

  public class HomeController : Controller  
   {  
     string clientId = "767676544437878-m5h7tpngqjkch6sr9visngstdu09agic.apps.googleusercontent.com";  
     string clientSecret = "qL78qLvihhfgf9VWT189898fG9";  
     public ActionResult Index()  
     {  
       ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";  
       return View();  
     }  
     public ActionResult GetGoogleAccount()  
     {  
       return View();  
     }  
  ------
  ---------

In the Index View Add the Login Button and Some Javascript Code.

  <input type="button" id="Button1" value="Login With Google" onclick="OpenGoogleLoginPopup();" />  
  
 <script type="text/javascript" language="javascript">  
     var clientId = "767676544437878-m5h7tpngqjkch6sr9visngstdu09agic.apps.googleusercontent.com";  

     function OpenGoogleLoginPopup() {  
       var url = "https://accounts.google.com/o/oauth2/auth?";  
       url += "scope=https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email&";  
       url += "state=%2Fprofile&"  
       url += "redirect_uri=http://localhost:53285/Home/GetGoogleAccount&"  
       url += "response_type=token&"  
       url += "client_id="+clientId;  
       window.location = url;  
     }  
   </script>   

Now, In the GetGoogleAccount View Add the Below Code.

 @{  
   ViewBag.Title = "GetGoogleAccount";  
 }  
 <script type="text/javascript">  
   try {  
     debugger;  
     // First of all, parse the querystring  
     var params = {}, queryString = location.hash.substring(1),regex = /([^&=]+)=([^&]*)/g, m;  
     while (m = regex.exec(queryString)) {  
       params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);  
     }  
     var ss = queryString.split("&")  
     if (ss != undefined) {  
       window.location = "About?" + ss[1];  
       history.pushState("", "", "About");  
     }  
     else  
       window.location = "About";  
   } catch (exp) {  
   }  
 </script>  

Now, In the About Action add the below Code.

  public ActionResult About()  
     {  
       GoogleDataModel model = new GoogleDataModel();  
       if (Request.QueryString["access_token"] != null)  
       {  
         string test = Request.QueryString["access_token"];  
       }  
       if (Request.QueryString["access_token"] != null)  
       {  
         String URI = "https://www.googleapis.com/oauth2/v1/userinfo?access_token=" + Request.QueryString["access_token"].ToString();  
         WebClient webClient = new WebClient();  
         Stream stream = webClient.OpenRead(URI);  
         string b;  
         /*I have not used any JSON parser because I do not want to use any extra dll/3rd party dll*/  
         using (StreamReader br = new StreamReader(stream))  
         {  
           b = br.ReadToEnd();  
         }  
         b = b.Replace("id", "").Replace("email", "");  
         b = b.Replace("given_name", "");  
         b = b.Replace("family_name", "").Replace("link", "").Replace("picture", "");  
         b = b.Replace("gender", "").Replace("locale", "").Replace(":", "");  
         b = b.Replace("\"", "").Replace("name", "").Replace("{", "").Replace("}", "");  
         /*  
         "id": "109124950535374******"  
          "email": "usernamil@gmail.com"  
          "verified_email": true  
          "name": "firstname lastname"  
          "given_name": "firstname"  
          "family_name": "lastname"  
          "link": "https://plus.google.com/10912495053537********"  
          "picture": "https://lh3.googleusercontent.com/......./photo.jpg"  
          "gender": "male"  
          "locale": "en" }   
         */  
         Array ar = b.Split(",".ToCharArray());  
         for (int p = 0; p < ar.Length; p++)  
         {  
           ar.SetValue(ar.GetValue(p).ToString().Trim(), p);  
         }  
         model.Email_address = ar.GetValue(1).ToString();  
         model.Google_ID = ar.GetValue(0).ToString();  
         model.firstName = ar.GetValue(4).ToString();  
         model.LastName = ar.GetValue(5).ToString();  
         model.fullName = model.firstName + " " + model.LastName;  
         model.Gender = ar.GetValue(8).ToString();  
         model.userProfilePic = ar.GetValue(7).ToString();  
         model.userProfilePic = model.userProfilePic.Replace("https", "https:");  
       }  
       return View(model);  
     }  

Add the Code in About.cshtml

 @model LoginWithFbDemo.Models.GoogleDataModel  
 @{  
   ViewBag.Title = "About";  
 }  
   <div id="ClientDetails">  
   <br ><br >  
     @Html.TextBoxFor(x=> x.fullName)  
   @Html.TextBoxFor(x=> x.Email_address)  
   <img id="imgProfile" src="@Model.userProfilePic" style="width:auto"/><br >  
   </div>  

Now you're done. Run the Application.


 Click On Login With Google Button.


Provide the Email Id and Password. Click on Sign In Button.

It'll ask the Permission. Click on Allow button.


It will redirect you to the About Page. You will see your Name, Email Id and Profile Pic.

0 comments:

Post a Comment

Topics

ADO .Net (2) Ajax (1) Angular Js (17) Angular2 (24) ASP .Net (14) Azure (1) Breeze.js (1) C# (49) CloudComputing (1) CMS (1) CSS (2) Design_Pattern (3) DI (3) Dotnet (21) Entity Framework (3) ExpressJS (4) Html (3) IIS (1) Javascript (6) Jquery (9) Lamda (3) Linq (11) Mongodb (1) MVC (48) NodeJS (7) RDLC (1) Report (1) Sql Server (29) SSIS (3) SSRS (2) UI (1) WCF (12) Web Api (10) Web Service (1) XMl (1)