Social Login
This procedure 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 smooth integration.
Key Features
1. Native SDK Integration: Uses respective native SDKs for login instead of webview.
2. Supports Facebook and Google Logins: Apple login is supported only on iOS.
3. Plugins Available: WordPress and Shopify plugins are available for easy integration.
Configuring Social Login in Your App
1. Add Social Login
Click on "Add" button to add Social Login. Once you add, it will appear in Add-ons menu.
2. Social Login Configuration
After adding the add-on, you will see the settings option in the section.
- Enable Facebook Login: Select this option to enable Facebook login.
- Enable Google Login: Select 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
1. 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);
}
});2. 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);
}
});3. 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 your changes and Rebuild your app to see the changes are in action, after configuring the Social Login settings and integrating the necessary code. 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.