Integrate Login with Phone button in Unity

To seamlessly integrate the "Login with Phone" web view into your Unity project, follow these essential steps:

1. 1. Get API Key
2. 2. Download Unity Package
3. 3. Import Unity Package
4. 4. Locate and Place Prefab
5. 5. Open & Configure Script
6. 6. JWT Authentication Configuration

2. Download Unity Package

Navigate to the following link to download the required Unity package:

Download phone.email.unitypackage

3. Import Unity Package:

• Open your Unity project.
• Click on 'Assets' in the top menu.
• Select 'Import Package' -> 'Custom Package.'
• Choose the downloaded phone.email.unitypackage file.
• Confirm the import settings and click 'Import' to integrate the package into your project.

4. Locate and Place Prefab:

• After successful import, find the prefab at the following location:
  Assets/Prefab/SignInWithPhoneButton.prefab
• 
• Drag and drop this prefab onto your Unity canvas for convenient placement.

5. Open and Configure Script:

• Locate the script named WebViewManager attached to the GameObject.
• Open the script in your preferred code editor.
• Search for the variable named PHONE_COUNTRY_CODE.
• Insert the values obtained during the API Key acquisition into the variables MERCHANT_PHONE_NUMBER and PHONE_COUNTRY_CODE for proper configuration.

View on GitHub Copy

 public class WebViewManager : MonoBehaviour
        {
            // ...
            private const string PHONE_COUNTRY_CODE = "+XX"; // Please add country code here
            private const string MERCHANT_PHONE_NUMBER = "XXXXXXXXXX"; // Please add phone number here

            private string deviceId = "";
            private string url = "";
            // ...
        } 

6. JWT Authentication Configuration:

• Search for uiDecodedMobileNumber in the WebViewManager script.
• In this section, handle JWT (JSON Web Token) authentication.
• After the user successfully enters the verification code, a JWT is generated and sent back to the Unity Android app as a custom scheme with the parameter named "phtoken".
• To decode this JWT, use the API KEY obtained in the previous step to retrieve the user's phone number.
• On the merchant's side, the script verifies the JWT for authenticity. If valid, the user gains access to their account on the merchant's platform.

View on GitHub Copy

 public case GpmWebViewCallback.CallbackType.Scheme:
    Debug.Log($"Scheme: {data}");

    if (error == null)
    {
        if (data.Contains("phoneemail"))
        {
            GpmWebView.Close();

            // Extract parameters from the custom scheme URL
            Dictionary parameters = GetUrlParameters(data);

            // Check if the parameters contain 'phtoken'
            if (parameters.ContainsKey("phtoken"))
            {
                // This is your extracted JWT
                string jwtValue = parameters["phtoken"];

                // Decode JWT and parse JSON
                string parsedJWT = DecodeJwtPayload(jwtValue);

                if (parsedJWT != null)
                {
                    // Parsing JSON
                    UserData userData = JsonUtility.FromJson(parsedJWT);

                    // Update UI
                    uiDecodedMobileNumber.text = $"{userData.country_code}{userData.phone_no}";
                }
                else
                {
                    Debug.LogError("Failed to decode JWT payload.");
                }
            }
            else
            {
                Debug.LogError("Parameter 'phtoken' not found in the custom scheme URL.");
            }
        }
    }
    else
    {
        Debug.LogError($"Failed to handle custom scheme. Error: {error}");
    }
    break;