Facebook Sign Up/Log In

Users can log in/register the system through their Facebook account

API Usage Instructions

Before calling the API, please ensure you have thoroughly read the relevant API documentation. Below are specific instructions for different login methods:

一、Setting Up Facebook Login Configuration

For more detailed steps, please refer to the Facebook developer documentation: Facebook Developer Documentation

Before using the Facebook JavaScript SDK, you need to register as a Facebook developer and create an application. The specific steps are as follows:

1. Visit the Facebook Developer Platform: Log in to the Facebook Developer Platform using your Facebook account.

2. Create a New App: Go to the "My Apps" page, click the "Create App" button, enter the app name and contact email, and select the app category.

3. Obtain the App ID and App Secret: After successful creation, go to the "Settings" page to get the Client ID (Client ID) and Client Secret (Client Secret).

4. Configure Allowed Domains for JavaScript SDK: Add the current page domain to the "Allowed Domains for JavaScript SDK" (local domains cannot be configured).

5. Enable "Login with JavaScript SDK": Turn on the configuration switch for "Login with JavaScript SDK."

6. Configure the Client ID and Client Secret in the White Label Management Backend.

二、Retrieve Third-Party Login Configuration Information

Call the third-party configuration API to obtain the ClientId registered in the first step.

Request Parameters:

{
    // Third-party source: Supported third-party login sources
    // Optional values include: google, facebook, twitter, telegram, apple, metamask, separated by commas
    "thirdSource": "google,facebook"  // Example: using Google and Facebook login
}

Response Structure:

{
    // Third-party source: Supported third-party login sources, e.g., "google", "facebook", "twitter", "telegram", "apple", "metamask"
    "thirdSource": "facebook",  // Example: using Facebook login

    // Client ID: The unique identifier for the third-party application
    "clientId": "abcesddff",    // Example: your application's client ID on Facebook

    // Developer Account: The developer's email associated with the third-party source
    "developerAccount": "[email protected]" // Example: developer's email address
}

三、Login Code Implementation

1.Import the Facebook JavaScript SDK:

Include the Facebook JavaScript SDK in your HTML page using the following method:

<script>
    // Initialize the Facebook SDK
    window.fbAsyncInit = function () {
        FB.init({
            appId: clientId, 
            cookie: true,     // Enable cookies for server access to the session
            xfbml: true,      // Parse social plugins on the webpage
            version: 'v12.0'  // The version of the Graph API being used
        });
    };

    // Load the Facebook SDK
    (function (d, s, id) {
        var js; 
        var fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) { return; }
        js = d.createElement(s); 
        js.id = id;
        js.src = 'https://connect.facebook.net/en_US/sdk.js'; 
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>

Replace appId with the clientId returned from the third-party login configuration API.

2. Initiate Login Authorization and Obtain Access Token

After importing the Facebook JavaScript SDK, implement user login and access token retrieval as follows: Call the FB.login() method: Use this method in an interactive scenario to allow users to log in with their Facebook account and authorize.

Handle user login status: In the callback function, check the login status. If the login is successful, retrieve the access token and proceed with further actions.

Complete Implementation Code Example:

const login = () => {
    FB.login(function (response) {
        console.log(response); // Output login response

        if (response.status === 'connected') {
            // User successfully logged into your webpage and Facebook
            const accessToken = response.authResponse.accessToken; // Retrieve access token
            
            // After login is complete, call handling logic
            facebookVerify({accessToken});
        } else {
            // User is not logged into your webpage or login status is uncertain
            console.log('User is not logged in or has not authorized the application');
        }
    }, { scope: 'public_profile,email' }); // Requested permissions
};

3. Facebook Access Token Verification: Call the Facebook third-party login verification API.

Request Parameters:

{
    // Channel source: Supported channel types, e.g., "h5", "pc"
    "channelSource": "h5",  // Example: indicates from H5 end

    // User authorization information: provided as a JSON string, e.g., containing accessToken
    "accessToken": "accessToken"  // Example: replace with the actual accessToken
}

Response Structure:

{
    // Next operation action: Supported action types, such as "login", "bind", "register"
    "action": "login",  // Example: indicates the user is performing a login operation

    // User's email returned by the third party
    "email": "[email protected]",  

    // Reason for verification failure (if any)
    "failReason": "Invalid credentials", 

    // User's phone number returned by the third party
    "phone": "[phone]", 

    // Verification result: indicates whether verification was successful, true for success, false for failure
    "result": true,  // Example: indicates verification success

    // Third-party login source: Supported sources, e.g., "google", "facebook", "twitter"
    "thirdSource": "facebook",  

    // Verification token: token for identity verification
    "token": "exampleToken123",

    // Third-party user ID: unique identifier for the user on the third-party platform
    "userId": "thirdPartyUserId",

    // Third-party authorization credential: credential for accessing third-party APIs
    "authToken": "authToken123" 
}

4. Complete Login/Register: Based on the information returned in the previous step, call the third-party login or registration API.

const facebookVerify = (data: UserService.LoginVerifyRes) => {
    // Retrieve action type, failure reason, and third-party source
    let { action, failReason, thirdSource } = data;

    // Handle different processes based on action type
    if (action === 'register') {
        // Registration operation
        register(data);
    } else if (action === 'login') {
        // Login operation
        login(data); 
    } else if (action === 'bind') {
        // Binding operation
        login(data);
    } else {
        // Operation is not as expected, show failure reason
        Toast.error(failReason);
    }
};

Through the above steps, you can successfully integrate Facebook login functionality and obtain the user's authorized Access Token. If you encounter issues during integration, please check the network connection or the configuration of your Facebook application to ensure all steps are correctly followed. For more information, please refer to the Facebook developer documentation.