Integrate Login with Phone button in Unity
Introduction
Download Demo AppTo seamlessly integrate the "Login with Phone" web view into your Unity project, follow these essential steps:
1. Get the API Key
To enable the "Login with Phone" feature on your Unity project, start by logging into the Phone Email admin Dashboard at https://admin.phone.email. Within the Profile Details section, you'll find an API key that is essential for subsequent usage.
![phone.email](assets/docs/img/api-key-web.jpg)
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.
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 theWebViewManager
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.
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;
Should you encounter any technical challenges during the integration process, please don't hesitate to reach out to us for assistance.
Contact us WhatsApp Us