Step-by-Step Guide to Social Media Sign-In Integration

byCodepen.tech -
0


Introduction

Step-by-Step Guide to Social Media Sign-In Integration

As online platforms continue to grow, offering social media sign-in integration has become a standard for enhancing user experience. Social media sign-ins allow users to log into your website using credentials from platforms like Google, Facebook, Twitter, or LinkedIn, without having to create a new account. This speeds up the registration process, reduces friction, and increases user engagement. In this step-by-step guide, we will walk you through how to integrate social media sign-ins into your website using popular OAuth providers like Google and Facebook.

What is Social Media Sign-In Integration?

Social Media Sign-In Integration allows users to authenticate themselves on your website using their existing social media credentials. Instead of registering a new account, users can quickly log in through trusted services such as Google, Facebook, Twitter, or LinkedIn. This process is powered by OAuth, an open standard authorization protocol that securely grants users access to resources without sharing their credentials with the website.

Step-by-Step Guide to Implementing Social Media Sign-In Integration

1. Basic HTML Structure for the Sign-In Form

Let’s start by building a basic HTML structure for the sign-in form that will include traditional login fields and buttons for social media sign-in.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Social Media Sign-In</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <div class="container">
    <h2>Sign In</h2>
    <form id="sign-in-form">
      <div class="input-group">
        <label for="username">Username</label>
        <input type="text" id="username" name="username" required>
      </div>

      <div class="input-group">
        <label for="password">Password</label>
        <input type="password" id="password" name="password" required>
      </div>

      <button type="submit">Sign In</button>
    </form>

    <div class="social-sign-in">
      <p>Or sign in with:</p>
      <button id="google-sign-in" class="social-button google">Sign In with Google</button>
      <button id="facebook-sign-in" class="social-button facebook">Sign In with Facebook</button>
    </div>
  </div>

  <script src="scripts.js"></script>
</body>
</html>

Explanation of the HTML Structure:

  1. Traditional Sign-In Form:

    • The form includes fields for a username and password, as well as a submit button for manual sign-in.

  2. Social Media Sign-In Buttons:

    • A separate section with buttons for social media sign-ins, labeled "Sign In with Google" and "Sign In with Facebook." Each button has a specific ID to trigger the respective OAuth flow when clicked.

2. CSS for Styling the Social Sign-In Form

Let’s style the form and buttons for a clean and modern look.


/* styles.css */

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f4f4f4;
  margin: 0;
  font-family: 'Arial', sans-serif;
}

.container {
  background-color: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  width: 320px;
}

h2 {
  text-align: center;
  margin-bottom: 20px;
}

.input-group {
  margin-bottom: 15px;
}

.input-group label {
  display: block;
  margin-bottom: 5px;
}

.input-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  width: 100%;
  padding: 12px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #0056b3;
}

.social-sign-in {
  text-align: center;
  margin-top: 20px;
}

.social-button {
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.google {
  background-color: #db4437;
  color: white;
}

.facebook {
  background-color: #4267b2;
  color: white;
}

.social-button:hover {
  opacity: 0.9;
}

Explanation of the CSS:

  1. Container Styling:

    • The .container class centers the sign-in form with a white background, rounded corners, and a shadow to create a clean design.

  2. Button Styling:

    • Each social sign-in button is styled with unique colors: Google’s button is red (#db4437), and Facebook’s button is blue (#4267b2).
    • The hover effect (opacity: 0.9) gives visual feedback when users interact with the buttons.

3. Integrating Google Sign-In

To integrate Google Sign-In, you will need to register your application with Google, set up an OAuth consent screen, and obtain the credentials for your app.

Step-by-Step Google Sign-In Integration:

  1. Go to the Google Developer Console:

  2. Set Up OAuth 2.0 Credentials:

    • In the APIs & Services section, create OAuth 2.0 credentials by specifying your website's origin and redirect URI.
    • Obtain your Client ID and Client Secret.

  3. Install Google Platform Library:

    • Add the following <script> to your HTML to load the Google platform library:

    <script src="https://apis.google.com/js/platform.js" async defer></script>

  4. Implement Google Sign-In Logic:


    // scripts.js

function onGoogleSignIn(googleUser) {
  const profile = googleUser.getBasicProfile();
  console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
  console.log('Name: ' + profile.getName());
  console.log('Email: ' + profile.getEmail());

  // Send the ID token to your backend for verification
  const id_token = googleUser.getAuthResponse().id_token;
  // Post this token to your backend for verification
}

gapi.load('auth2', function() {
  gapi.auth2.init({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
  });
});

document.getElementById('google-sign-in').addEventListener('click', function() {
  const auth2 = gapi.auth2.getAuthInstance();
  auth2.signIn().then(onGoogleSignIn);
});

Explanation of Google Sign-In:

  • When the user clicks on the Google sign-in button, the gapi.auth2 instance triggers the sign-in flow.
  • The user's profile information and ID token are retrieved, which you can securely send to your backend for authentication.

4. Integrating Facebook Sign-In

To integrate Facebook Sign-In, you will need to register your application with Facebook Developers and obtain your App ID and App Secret.

Step-by-Step Facebook Sign-In Integration:

  1. Create a Facebook App:

    • Visit Facebook for Developers and create a new app.
    • Obtain your App ID and App Secret from the Facebook developer dashboard.

  2. Add the Facebook SDK:

    • Add the Facebook SDK to your HTML page by placing the following script before the closing </body> tag:

    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>

  3. Initialize Facebook SDK and Add Login Logic:


    // scripts.js

window.fbAsyncInit = function() {
  FB.init({
    appId      : 'YOUR_APP_ID',
    cookie     : true,
    xfbml      : true,
    version    : 'v9.0'
  });
};

document.getElementById('facebook-sign-in').addEventListener('click', function() {
  FB.login(function(response) {
    if (response.authResponse) {
      FB.api('/me', { fields: 'name, email' }, function(profile) {
        console.log('Name: ' + profile.name);
        console.log('Email: ' + profile.email);
        // Handle the profile data and proceed with your authentication process
      });
    } else {
      console.log('User cancelled login or did not fully authorize.');
    }
  }, { scope: 'email' });
});

Explanation of Facebook Sign-In:

  • When the user clicks on the Facebook button, the SDK prompts them to log in.
  • Upon successful login, the user’s profile information is retrieved via the Facebook API, and you can use this data to authenticate them in your application.

live preview

See the Pen Step-by-Step Guide to Social Media Sign-In Integration by codepen (@codepen-the-selector) on CodePen.

Conclusion

By integrating social media sign-ins like Google and Facebook, you streamline the user authentication process and make it more convenient for users to access your website. This not only improves user experience but also helps reduce friction in the registration process, increasing engagement and conversions.

Social media sign-in integration is a crucial feature for modern websites that want to offer seamless and secure login options. With the help of OAuth providers like Google and Facebook, you can securely authenticate users and gain valuable profile information.

Tags

You may like these posts

Previous Post Next Post

نموذج الاتصال