Sign Up Users Using LinkedIn And Save User Detail

This article explains how we can allow a user to sign up using LinkedIn and save data of user signing up after successfully sign up.

Introduction
 
This is a simple application which allow user to sign up using his/her LinkedIn Account. And after successfully signing in save some of the user details in the database.
 
Description 
 
For this, we have to perform the following two tasks:
  1. Create a ASP.NET Page.
  2. Create a LinkedIn Application.

Here are the steps to create this application.

Create an ASP.NET Page

Create a blank ASP.NET website, run it and copy its URL.
 
Create a LinkedIn Application 
  • Before moving further you should have a LinkedIn account. If not create it.
  • Visit the following link:  https://www.linkedin.com/developer/apps.
  • Here you will find all your apps if you already have any apps like the following image.


As you see I have an app Test Users.
 
Now click create application and it will look like the following image:
 
See the following image:
 
 

After that it will redirect you to the authentication page and you can find your Client Id(api_key) and Client Secret.
 
On  Default Application Permissions check r-emailAddress if you want to save User EmailId.
 
Go to JavaScript, give your website url, click add and update like the following image:
You can follow this link https://developer.linkedin.com/docs/signin-with-linkedin for more information how to create a LinkedIn Login Button for accessing user details.
  • I have used JavaScript SDK.
  • Below are my codes follow the comments for better understanding.
  • Copy the code in .aspx Page.
  • In  api_key provide your own Client ID.
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head runat="server">  
  3.   
  4.     <title>Linkedin User Details</title>  
  5.     <!-- For Showing Login Button -->  
  6.     <script type="text/javascript" src="//platform.linkedin.com/in.js">  
  7.     api_key: 75zd01h5j2597m   //Add your own Client ID
  8.     authorize: true  
  9.     onLoad: onLinkedInLoad  
  10.     </script>  
  11.     <!-- For Showing Login Button -->  
  12.   
  13.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">  
  14.     </script>  
  15.   
  16.     <!-- For Getting Data and storing in database -->  
  17.     <script type="text/javascript">  
  18.   
  19.         function onLinkedInLoad() {  
  20.             IN.Event.on(IN, "auth", getDetails);  
  21.         }  
  22.         function getDetails() { // Getting required details   
  23.             IN.API.Profile("me")  
  24.                 .fields("firstName", "lastName", "industry", "current-share", "location:(name)", "picture-url", "headline", "summary", "num-connections", "public-profile-url", "distance", "positions", "email-address", "educations", "date-of-birth")  
  25.               .result(displayProfiles)  
  26.               .error(displayProfilesErrors);  
  27.         }  
  28.         function displayProfiles(data) {  
  29.             console.log(data); // See  the log in your browser you can find all the data  
  30.             var details = data.values[0];  
  31.             var user = {};  
  32.             user.FName = details.firstName;  // FName as per my User Class in .cs page   
  33.             user.LName = details.lastName;  
  34.             user.Email = details.emailAddress;  
  35.             user.FunctionalArea = details.industry;  
  36.             $.ajax({ // Ajax call to save user details  
  37.                 type: "Post",  
  38.                 contentType: "application/json; charset=utf-8",  
  39.                 url: "Default.aspx/SaveUser", // Default.aspx is my page  and  SaveUser is my WebMethod.  
  40.                 data: '{objUserdtl: ' + JSON.stringify(user) + '}',  
  41.                 success: function () {  
  42.                     alert("Data Added Successfully.");  
  43.                 }, error: function () {  
  44.                     alert("Some error encountered.");  
  45.                 }  
  46.             });  
  47.         }  
  48.         function displayProfilesErrors(error) {  
  49.             console.log(error);  
  50.         }  
  51.     </script>  
  52.     <!-- For Getting Data and storing in database -->  
  53. </head>  
  54. <body>  
  55.     <form id="form1" runat="server">  
  56.         <div>  
  57.             <!-- For Showing Login Button -->  
  58.             <script type="in/Login">  
  59.                 Login  
  60.             </script>  
  61.             <!-- For Showing Login Button -->  
  62.         </div>  
  63.     </form>  
  64. </body>  
  65. </html>  
Create Table in SQL to save data in the database. I have taken only some columns.
  1. CREATE TABLE [dbo].[Userdetails]
  2. (  
  3.     [UserId] [int] IDENTITY(1,1) NOT NULL,  
  4.     [FName] [varchar](50) NULL,  
  5.     [LName] [varchar](50) NULL,  
  6.     [Email] [varchar](50) NULL,  
  7.     [FunctionalArea] [varchar](50) NULL,  
  8.     [CreatedDateTime] [datetime] NULL  

In my Web.Config I have provided connection string as in the following code snippet:
  1. <connectionStrings>  
  2.    <add name="Linkedin" connectionString="Data Source=local;Initial Catasign-up-users-using-linkedin-and-save-users-detail=Demo;User ID=sa;Password=Admin;" providerName="System.Data.SqlClient" />  
  3.  </connectionStrings> 
My Default.aspx.cs page.
  1. public partial class Default : System.Web.UI.Page  
  2. {  
  3.     public static string Constr = ConfigurationManager.ConnectionStrings["Linkedin"].ConnectionString; // Connection string
  4.     protected void Page_Load(object sender, EventArgs e)  
  5.     {  
  6.   
  7.     }  
  8.     [WebMethod]  
  9.     public static void SaveUser(User objUserdtl) //Save data in Databse using Ajax  
  10.     {  
  11.         try  
  12.         {  
  13.             using (var con = new SqlConnection(Constr))  
  14.             {  
  15.                 using (var cmd = new SqlCommand("INSERT INTO Userdetails VALUES(@Fname,@Lname,@Email,@FunctionalArea,@CreatedDate)"))  
  16.                 {  
  17.                     cmd.CommandType = CommandType.Text;  
  18.                     cmd.Parameters.AddWithValue("@Fname", objUserdtl.FName);  
  19.                     cmd.Parameters.AddWithValue("@Lname", objUserdtl.LName);  
  20.                     cmd.Parameters.AddWithValue("@Email", objUserdtl.Email);  
  21.                     cmd.Parameters.AddWithValue("@FunctionalArea", objUserdtl.FunctionalArea);  
  22.                     cmd.Parameters.AddWithValue("@CreatedDate", DateTime.Now);  
  23.                     cmd.Connection = con;  
  24.                     con.Open();  
  25.                     cmd.ExecuteNonQuery();  
  26.                     con.Close();  
  27.                 }  
  28.             }  
  29.         }  
  30.         catch (Exception ex)  
  31.         {  
  32.             throw;  
  33.         }  
  34.     }  
  35. }  
  36.   
  37. public class User // Taken class for ajax call  
  38. {  
  39.     public int UserId;  
  40.     public string FName;  
  41.     public string LName;  
  42.     public string Email;  
  43.     public string FunctionalArea;  
  44.     public DateTime CreatedDateTime;  

Now if you run the code  you will see the following button:
 
 
On click of this button you will get the following popup window asking for your LinkedIn EmailId and Password:
 
 
 
Give your details and click Allow access.
 
See your console response you will find the details as I am also showing all the data in console.sign-up-users-using-linkedin-and-save-users-detail (data) in Ajax.
 
Now see your database, the data has been added in your database. You can provide your desired condition for not storing multiple times data for same user.
 
Note
  1. I have taken my page as Default.aspx and SaveUser is my method for ajax call. Any change in page name and Method has to change in Ajax.
  2. If you run the attached project it will open my apps that I have created in LinkedIn. I suggest you to create your own.
Hope that helps you.
 
Please add comments you you find any difficulties while building this application.