Integrating Social Login
This guide will help you integrate social login functionality into your app using native SDKs for Facebook and Google. Additionally, it covers the use of the WordPress and Shopify plugins for easy integration.
Key Features
- Native SDK Integration: Uses respective native SDKs for login instead of webview.
- Supports Facebook and Google Logins: Apple login is supported only on iOS.
- Plugins Available: WordPress and Shopify plugins are available for easy integration.
Activating Social Login in Your App
-
Navigate to Settings:
- Go to the settings section of your app.
- Find the option to enable social login in the plugins integration section.
-
Social Login Configuration:
- Enable Facebook Login: Toggle this option to enable Facebook login.
- Enable Google Login: Toggle this option to enable Google login.
Import the JavaScript File
Before starting, import the necessary JavaScript file into your website using the provided link.
Implementing Social Login
Login Commands
Plain JavaScript:
const { facebook, google, apple } = WTN.socialLogin;
// Facebook Login
facebook.login({
callback: function(value) {
console.log(value);
}
});
// Google Login
google.login({
callback: function(value) {
console.log(value);
}
});
// Apple Login (iOS only)
apple.login({
callback: function(value) {
console.log(value);
}
});ES6+:
import {
login as loginFacebook,
logout as logoutFacebook
} from "webtonative/SocialLogin/facebook";
import {
login as loginGoogle,
logout as logoutGoogle
} from "webtonative/SocialLogin/google";
import {
login as loginApple
} from "webtonative/SocialLogin/apple";
// Facebook Login
loginFacebook({
callback: function(value) {
console.log(value);
}
});
// Google Login
loginGoogle({
callback: function(value) {
console.log(value);
}
});
// Apple Login (iOS only)
loginApple({
callback: function(value) {
console.log(value);
}
});Logout Commands
Plain JavaScript:
// Facebook Logout
facebook.logout({
callback: function(value) {
console.log(value);
}
});
// Google Logout
google.logout({
callback: function(value) {
console.log(value);
}
});ES6+:
// Facebook Logout
logoutFacebook({
callback: function(value) {
console.log(value);
}
});
// Google Logout
logoutGoogle({
callback: function(value) {
console.log(value);
}
});Callback Parameter Object
Login:
{
"isSuccess": true,
"accessToken": "EXXXXXQ0iSXpNGVOCMVi000ZAnlslBJIHgXXX2dfkW4HtGLUAuuZCcESjfZXXXQZBZBV",
"userId": "1XXXXXXXXX519425",
"type": "fbLoginToken"
}Login Error:
{
"isSuccess": false,
"error": "Error message for logout",
"type": "fbLoginToken"
}Logout:
{
"isSuccess": true,
"message": "Logout Success",
"type": "fbLogOut"
}Login:
{
"isSuccess": true,
"idToken": "EXXXXXQ0iSXpNGVOCMVi000ZHgXXX2dfkW4HtGLUAuuXXXQZBZBV",
"type": "googleLoginToken"
}Login Error:
{
"isSuccess": false,
"error": "Error message for logout",
"type": "googleLoginToken"
}Logout:
{
"isSuccess": true,
"message": "Logout Success",
"type": "googleLogOut"
}Logout Error:
{
"isSuccess": false,
"error": "Error message for logout",
"type": "googleLogOut"
}Apple
Login:
{
"isSuccess": true,
"idToken": "********",
"code": "***********",
"type": "appleLoginToken",
"firstName": "FirstNameHere",
"lastName": "LastNameHere",
"emailId": "support@webtonative.com"
}Note: Apple only returns the user's information the first time the user authorizes the app. Persist this information from your app; subsequent authorization requests won’t contain this information.
WordPress and Shopify Plugins
WordPress Plugin
A WordPress plugin for social login integration is available. You can find it here (opens in a new tab).
Shopify Plugin
A Shopify plugin for social login integration is available. You can find it here (opens in a new tab).
Save and Rebuild
After configuring the social login settings and integrating the necessary code, save your changes and rebuild your app to see the changes in action. This ensures all configurations are applied correctly and the social login functions as expected.
By following these steps, you will successfully integrate social login functionality into your app, providing users with a seamless and secure way to log in using their social media accounts.
