iOS

The purpose of this article is to explain how to set up WhatsApp authentication so that your project can use the Player Network login authentication service to login via the WhatsApp channel.

Prerequisites

1. Configure the app on the Meta Developer platform

1. Register an Account

caution

Please use a developer account registered in a WhatsApp supported region (outside Mainland China). Developer accounts registered in Mainland China currently cannot apply for WhatsApp development permissions.

Before configuring the platform for your app, please register a Meta developer account.

1. Register for an account at Facebook and follow the prompts to complete account authentication (Email or cell phone authentication).

2. Activate a developer account at Meta for Developers.

   

3. Agree to the agreement and continue.

   

4. Complete the cell phone verification.

   

5. Confirm Email.

   

6. Complete the registration.

   

2. Create a Meta business portfolio

Before configuring the platform for your app, please create a Meta business portfolio.

1. Go to business.facebook.com and login with your Meta developer account.

2. Click the drop-down menu below Home in the upper left, then click Create a business portfolio.

3. Please enter the portfolio name.This name should match the company or organization's public name as it will be displayed on Meta.The portfolio name must not contain special characters.

   

4. Click Create to complete the creation.

3. Create an Application

1. Login to Meta developer account, go to My Apps, and click Create App in the upper right corner.

   

2. Fill out basic information:

   • App name - Application name.
   • App contact email - The primary contact email for receiving notifications from Meta about the application.

   

3. On the Add Use Case page, select Other, then click Continue.

   

4. Set the application type to Business, then click Continue.

   

5. On the Detail page, confirm the application name and email, then choose the corresponding business portfolio (or select it later), and click Create app.

note

Business asset portfolio can choose the same company verification method as the Facebook channel app.

6. App creation succeeded.

4. Configure Application

caution

There may be no entry for WhatsApp configuration here. This usually happens when your developer account does not have WhatsApp development permissions.Verified that only developer accounts registered in WhatsApp supported regions (outside Mainland China) have WhatsApp development permissions. Developer accounts registered in Mainland China currently cannot apply for WhatsApp development permissions.

1. After creating the application, click the Add Product button in the left sidebar of the application dashboard, then in the right section under Add a Product to Your App, find WhatsApp and click the Settings button on the WhatsApp card to complete the addition.

   

2. After clicking Settings in the previous step, you'll be redirected to the WhatsApp product configuration page. Simply click Continue here.

   

3. On the Quick Start page, click Test the API:

   

5. Create system user token

For long-term testing or production environment use, you need to use a system user token. Please refer to Process for creating a system user token.

1. Refer to the above link section Generate system user access token to create a system user, select Employee for user identity; after creation, follow the illustration in the link to grant user permissions for both the app and the relevant WhatsApp account.

2. After authorization, click "Generate token" and choose an app in the popup window. Set the token to never expire.

After selecting the following three permissions in the authorization window, click Generate token to create it

• business_management
• whatsapp_business_management
• whatsapp_business_messaging

caution

The passcode is shown only once. Please make sure to save it. If lost, you can only generate a new one.

6. Configure WebHook

1. Configure the WebHook callback address in WhatsApp.

   Configure the callback address and verification token provided by Player Network, then click verify and save.

2. Configure the message types to be received by WebHook in WhatsApp.

   You need to subscribe to messages

7. Deeplink Redirect Configuration

The WhatsApp login feature involves Deeplink redirection. Every business integrating WhatsApp channel must configure Deeplink links in the backend. The current rule: xxxxx represents the domain provided by the business party, https://xxxxxxxx/whatsapp?info=cccccccccccc. After domain assignment, the redirection file needs to be configured.

The configuration file is as follows:

• https://xxxxxxxxxx/apple-app-site-association
• https://xxxxxxxxxx/.well-known/apple-app-site-association

To learn how to generate the apple-app-site-association file, refer to DeepLink

8. Add official WhatsApp number

note

需准备海外未注册过WhatsApp的手机号，手机号需长期维护保证可用。

• It is recommended for a business to apply for 2 commercial numbers, one for development testing and one for production use.
• Reason: account isolation, prevents sending messages to production users during testing; WhatsApp callback address can only be configured once. If the callback address is set for the production environment, the commercial number cannot be used in test environment.

1. Configure and add a new official number in the console

• Fill in WA Business Profile

  • WhatsApp Business display name: The sender's name displayed to players
  • Timezone: Mainly affects the time for billing and data analysis. It is recommended to choose GMT +8:00 or to match your project.
  • Category: It is recommended to choose Other. Selecting Gaming will result in a registration failure for WhatsApp.

  

• Add number and verify

  

• After completing verification, you will enter the review phase. You can view the review status on the WhatsApp Manager page.

  

2. Complete the Registration operation via API call. The official number can only be used after registration is completed.

• Refer to the official guide

• API invocation method (contact the business interface attendant for team assistance):

  • To complete creation of the phone number: After applying for a new number, you need to use the Facebook API to perform the Register operation.

    curl 'https://graph.facebook.com/v24.0/{wa phone number ID}/register' -H 'Content-Type: application/json' -H 'Authorization: Bearer {token}' -d '{"messaging_product": "whatsapp", "pin": "{wa phone number 2fa pin}"}'

  • Associate the phone number with the Facebook APP: After Register, you need to use the Facebook API to perform the subscribed_apps operation.

9. Others

WhatsApp ad billing request link

1. Not settled together with Facebook ad delivery costs, WhatsApp independent billing request link

2. Settled together with Facebook ad delivery costs, request link

Set credit limit

It is necessary to contact the Meta Account Manager to assign a credit limit to the Business Manager (BM), or the project may add an available credit card on its own.If a credit limit needs to be assigned, please contact the Facebook Account Manager for assistance.

2. Get Player Network Console login account.
3. Create a new project for your game or join an existing one.
4. Download SDK.
5. Integrate the SDK.
6. Add WhatsApp as the login authentication method for business in Player Network Console.

Step 1: Configure SDK for WhatsApp Login

1. Open the project INTLConfig.ini file:

   INTLConfig.ini

   [INTL environment]
   # WARNING: You should change this URL to the production environment when you release your project.
   INTL_URL = https://test.intlgame.com
   GAME_ID = {INTL_GAME_ID}
   SDK_KEY = {INTL_SDK_KEY}
   [INTL Log]
   LOG_LEVEL = 1
   LOG_CONSOLE_OUTPUT_ENABLE = 1
   LOG_FILE_OUTPUT_ENABLE = 1
   LOG_ENCRYPT_ENABLE = 0
   LOG_COMPRESS_ENABLE = 0
   [WhatsApp]
   WHATSAPP_LOGIN_HOST = {INTL_WHATSAPP_LOGIN_HOST}
   WHATSAPP_LOGIN_PATH = {INTL_WHATSAPP_LOGIN_PATH}
   WHATSAPP_SERVICE_ID = {INTL_WHATSAPP_SERVICE_ID}

   • Set the SDK backend environment INTL_URL to https://test.intlgame.com.
   • Replace {INTL_GAME_ID} and {INTL_SDK_KEY} with the GAME_ID and SDK_KEY values assigned by Player Network Console.
   • Set LOG_LEVEL = 1, LOG_CONSOLE_OUTPUT_ENABLE = 1, LOG_FILE_OUTPUT_ENABLE = 1, LOG_ENCRYPT_ENABLE = 0, and LOG_COMPRESS_ENABLE = 0 to output console logs and log files without encryption or compression.
   • Replace {INTL_WHATSAPP_LOGIN_HOST} with the domain name for WhatsApp authorization Deeplink redirection.
   • Replace {INTL_WHATSAPP_LOGIN_PATH} with the path for WhatsApp authorization Deeplink redirection.
   • Replace {INTL_WHATSAPP_SERVICE_ID} with the WhatsApp business number.

Step 2: Add WhatsApp Login

Player Network checks application login status before launching the app login process.

• If the WhatsApp application is installed, Player Network will open the WhatsApp application for login.
• If the WhatsApp application is not installed, the Player Network login page will not show the WhatsApp channel login option.

1. Register login-related callbacks.

Unity

// Add callbacks
public void AddAuthObserver()
{
    INTLAPI.AddAuthResultObserver(OnAuthResultEvent);
}

public void AddAuthBaseObserver()
{
    INTLAPI.AddAuthBaseResultObserver(OnAuthBaseResultEvent);
}

// Remove callbacks
public void RemoveAuthObserver()
{
    INTLAPI.RemoveAuthResultObserver(OnAuthResultEvent);
}

public void RemoveAuthBaseObserver()
{
    INTLAPI.RemoveAuthBaseResultObserver(OnAuthBaseResultEvent);
}

// Process the INTLAuthResult callback
public void OnAuthResultEvent(INTLAuthResult ret)
{
    Debug.Log($"MethodID: {ret.MethodId}");
    
    string methodTag = "";
    if (authRet.MethodId == (int)INTLMethodID.INTL_AUTH_LOGIN)
    {
        methodTag = "Login";
    }
    else if (authRet.MethodId == (int)INTLMethodID.INTL_AUTH_BIND)
    {
        methodTag = "Bind";
    }
    else if (authRet.MethodId == (int)INTLMethodID.INTL_AUTH_AUTOLOGIN)
    {
        methodTag = "AutoLogin";
    }
    else if (authRet.MethodId == (int)INTLMethodID.INTL_AUTH_QUERY_USER_INFO)
    {
        methodTag = "QueryUserInfo";
    }
    else if (authRet.MethodId == (int)INTLMethodID.INTL_AUTH_GET_AUTH_RESULT)
    {
        methodTag = "GetAuthResult";
    }
}

// Process the AuthBaseResult callback
public void OnAuthBaseResultEvent(INTLBaseResult ret)
{
    Debug.Log($"MethodID: {ret.MethodId}");
    
    string methodTag = "";
    if (ret.MethodId == (int)INTLMethodID.INTL_GET_WHATSAPP_SIG)
    {
        methodTag = "RequestWhatsAppSignature";
    }
}

Unreal Engine

C++ Event Handling (above v1.15)

//configure AuthResult callback
FINTLAuthEvent authEvent;
authEvent.AddUObject(this, &OnAuthResult_Implementation);
UINTLSDKAPI::SetAuthResultObserver(authEvent);
// Remove AuthResult callbacks
UINTLSDKAPI::GetAuthResultObserver().Clear();

//configure AuthBaseResult callback
FINTLAuthBaseEvent authBaseEvent;
authBaseEvent.AddUObject(this&OnAuthBaseResult_Implementation);
UINTLSDKAPI::SetAuthBaseResultObserver(authBaseEvent);
// Remove AuthBaseResult callbacks
UINTLSDKAPI::GetAuthBaseResultObserver().Clear();

void OnAuthResult_Implementation(FINTLAuthResult ret)
{ 
    UE_LOG(LogTemp, Warning, TEXT("MethodID: %d"), ret.MethodId);
}

void OnAuthBaseResult_Implementation(FINTLAuthBaseResult ret)
{ 
    UE_LOG(LogTemp, Warning, TEXT("MethodID: %d"), ret.MethodId);
}

Unreal Event Handling

void OnAuthResult_Implementation(FINTLAuthResult ret)
{ 
    UE_LOG(LogTemp, Warning, TEXT("MethodID: %d"), ret.MethodId);
}

void OnAuthBaseResult_Implementation(FINTLAuthBaseResult ret)
{ 
    UE_LOG(LogTemp, Warning, TEXT("MethodID: %d"), ret.MethodId);
}

2. Invoke the AutoLogin interface to log in automatically.

Unity

INTLAPI.AutoLogin();

Unreal Engine

UINTLSDKAPI::AutoLogin();

3. If automatic login fails, call the RequestWhatsAppSignature interface to obtain the WhatsApp redirection request and carry the code.

Unity

INTLAPI.RequestWhatsAppSignature(string ExtraJson);

Unreal Engine

// taking Facebook as example
UINTLSDKAPI::RequestWhatsAppSignature(const FString extraJson);

4. Send an authorization request to the WhatsApp business number. After receiving the deeplink click, which contains authorization info, redirect back to the project and call the LoginForLI interface to login.

Unity

INTLAPI.LoginForLI(INTLChannel.WhatsApp,"",ExtraJson);

Unreal Engine

UINTLSDKAPI::LoginForLI(EINTLLoginChannel::WhatsApp,"",extraJson);

5. Synchronize the client's authentication status with the project backend and await the final validation result.

If you encounter issues during integration, see FAQs.