Social login

Social login can be your application’s primary or alternative authentication method.

If the user’s first login is via a social network, a new account is created automatically.

If you use social login as an alternative authentication method, the social network account automatically links to an existing user account if the following conditions are met:

  • A user who signed up with a username/email address and password logged into your application via a social network account.
  • A social network returns an email address.
  • User email address in a social network is the same as the email address used for sign-up in your application.

How-tos

Learn about advanced setups from our how-tos.

How to connect native Xsolla SDK for Android to your project

You can use native Xsolla SDK for Android to implement features, such as social login and returning to applications after purchase for mobile applications.

To connect the native SDK to a Cocos Creator project, follow the steps below:

  1. Generate a project for Android Studio.
  2. Connect the Xsolla SDK for Android to the project.
  3. Set up the project in Android Studio.
  4. Initialize the Xsolla SDK for Android on the Cocos Creator side.

Generate project for Android Studio

  1. In the Cocos Creator editor, go to Project > Build in the main menu. If the application wasn’t built for platforms before, a window for creating a new configuration for build will open. If the editor already has build configurations, click New Build Task to create a new configuration.
  2. In the New Build Configuration window, make the following changes:

    1. In the Platform field, select Android from the list of available build platforms.
    2. In the APP ABI field, specify arm64-v8a (recommended). If you plan to run a mobile application on an emulator, then specify x86.
    3. In the Target API Level field, specify android-28 or newer.

  1. Click Build.

As a result, a project for Android Studio is generated in the <CocosProjectPath>/build/android/proj directory. Files that are used for all Android builds are generated in the <CocosProjectPath>/native/engine/android directory.

Connect Xsolla SDK for Android to project

  1. Add custom Activities from Xsolla SDK to the source code. To do that:
    1. Copy and replace the existing files from the <CocosProjectPath>/extensions/xsolla-commerce-sdk/native/android/Activities folder to the <CocosProjectPath>/native/engine/android/app/src/com/cocos/game folder.
    2. Open the <CocosProjectPath>/native/engine/android/app/AndroidManifest.xml file with any text editor and add the following lines to the list of activities:

Copy
Full screen
Small screen
<activity
android:name="com.cocos.game.XsollaNativeAuthActivity"
android:configChanges="orientation|screenSize"
android:theme="@android:style/Theme.NoTitleBar"/>
<activity
android:name="com.cocos.game.wxapi.WXEntryActivity"
android:exported="true"
android:theme="@android:style/Theme.NoTitleBar"/>

  1. Add the Xsolla SDK libraries for Android as dependencies to your project’s build settings:
    1. In Android Studio, open your project’s build.gradle file.
    2. Add the following lines to the dependencies section:

Copy
Full screen
Small screen
implementation 'com.xsolla.android:login:1.2.1'
implementation 'com.xsolla.android:login-facebook:1.2.1'
implementation 'com.xsolla.android:login-google:1.2.1'
implementation 'com.xsolla.android:login-wechat:1.2.1'
implementation 'com.xsolla.android:login-qq:1.2.1'

    1. For the changes to take effect, run the Sync Now command.

Android Studio will download the corresponding libraries, and you can use its methods in the project.

Set up project in Android Studio

  1. In Android Studio, open your project from the <CocosProjectPath>/build/android/proj directory.
  2. Add the AndroidX native libraries required for the Xsolla SDK for Android to work:
    1. In the gradle.properties file, add the following lines:

Copy
Full screen
Small screen
android.useAndroidX=true
android.enableJetifier=true

    1. For the changes to take effect, run the Sync Now command.

Initialize Xsolla SDK for Android on the Cocos Creator side

Before you use any of the Xsolla SDK for Android features, you need to initialize the SDK. To do this, add an initialization script to the project using the IDE or by copying the file to the project directory.

In Cocos Creator, calls to native Java methods are made in TypeScript using the built-in reflection mechanism.

In the Cocos Creator project, you should call the xLoginInit method to initialize the Xsolla SDK.

Example of initialization script:

Copy
Full screen
Small screen
if(sys.platform.toLowerCase() == 'android') {
    jsb.reflection.callStaticMethod("com/cocos/game/XsollaNativeAuth", "xLoginInit",
        "(Ljava/lang/String;Ljava/lang/String;Ljava/lang/String;Ljava/lang/String;Ljava/lang/String;Ljava/lang/String;Ljava/lang/String;)V",
        Xsolla.settings.loginId, Xsolla.settings.clientId.toString(), "https://login.xsolla.com/api/blank",
        this.facebookAppId, this.googleAppId, this.wechatAppId, this.qqAppId);

}
}

Note
You should call the initialization script at the start of the application, for example, in the start method of a component attached to the scene.
Was this article helpful?
Thank you!
Is there anything we can improve? Message
We’re sorry to hear that
Please explain why this article wasn’t helpful to you. Message
Thank you for your feedback!
We’ll review your message and use it to help us improve your experience.
Hide

How to set up social login on Android devices

In mobile applications, you can implement social login by opening an authorization form inside the application. To do this, connect the native Xsolla SDK for Android to the Cocos Creator project. Using this library, you can open a social network authorization form in a custom WebView and receive a user token if login succeeds. In this case, the user does not need to leave the mobile application.

To add authorization through social networks in mobile applications:

  1. Connect native Xsolla SDK for Android to your project.
  2. Start authorization and processing of its results:

    1. Implement a UI for social login in your application (for example, the Sign in with Google button on the login page).
    2. In accordance with the logic of the application, implement a call of the authSocial native method. This method takes the name of the social network as a parameter.

Example of starting social login:

Copy
Full screen
Small screen
NativeUtil.authSocial(socialNetworkName);

    1. On the Cocos Creator side, subscribe to the successful authorization event. This event is generated at the scene level by native Activity that handles the authorization result. Once authorization is successful, call the handleSuccessfulSocialAuth handler method, which takes an object with the user’s token. This object can be used to further work with the Xsolla API.

Subscription example:

Copy
Full screen
Small screen
director.getScene().on(Events.SOCIAL_AUTH_SUCCESS, this.handleSuccessfulSocialAuth, this );

Note
From native scripts, the callback methods in Cocos Creator should be called from the game thread.

    1. Subscribe to login error and login cancellation events with a call to the necessary handler methods.

Was this article helpful?
Thank you!
Is there anything we can improve? Message
We’re sorry to hear that
Please explain why this article wasn’t helpful to you. Message
Thank you for your feedback!
We’ll review your message and use it to help us improve your experience.
Hide

How to connect native Xsolla SDK for iOS to your project

You can use native Xsolla SDK for iOS to implement features, such as social login and returning to applications after purchase for mobile applications.

To connect the native SDK to a Cocos Creator project, follow these steps:

  1. Generate a project for Xcode.
  2. Connect the Xsolla SDK for iOS to the project.
  3. Set up the project in Xcode.

Generate project for Xcode

  1. In the Cocos Creator editor, go to Project > Build in the main menu. If the application wasn’t built for platforms before, a window for creating a new configuration for build will open. If the editor already has configurations to build, click New Build Task to create a new configuration.
  2. In the New Build Configuration window, make the following changes:

    1. In the Platform field, select iOS from the list of available build platforms.
    2. In the Developer Team section, specify your developer profile.

  1. Click Build.
  2. In the main menu, go to File > Project Settings.
  3. In the Build System field, specify New Build System.

As a result, a project for Xcode is generated in the <CocosProjectPath>/build/iOS/proj directory. Files that are used for all iOS builds, are generated in the <CocosProjectPath>/native/engine/ios directory.

Connect Xsolla SDK for iOS to project

Add connector scripts for the Xsolla SDK libraries to the source code. To do this:

  1. Copy files from the <CocosProjectPath>/extensions/xsolla-commerce-sdk/native/ios/Scripts folder to the <CocosProjectPath>/native/engine/ios folder.
  2. Open the <CocosProjectPath>/native/engine/ios/CMakeLists.txt file with any text editor and add the following lines to the PROJ_SOURCES list:

Copy
Full screen
Small screen
    ${CMAKE_CURRENT_LIST_DIR}/XsollaUtils.h
    ${CMAKE_CURRENT_LIST_DIR}/XsollaUtils.mm
    ${CMAKE_CURRENT_LIST_DIR}/XsollaNativeUtils.mm
    ${CMAKE_CURRENT_LIST_DIR}/XsollaSDKLoginKitObjectiveC-Bridging-Header.h

    Set up project in Xcode

    1. In Xcode, open your project from the <CocosProjectPath>/build/ios/proj directory.
    2. Connect the frameworks from the Xsolla SDK to the project. To do this:

      1. Go to project settings.
      2. Select the target with the name of your project.
      3. Go to the General > Embedded Content section and click on the + icon.
      4. In the window that appears, select Add Other > Add Files from the drop-down list.
      5. Select all the framework folders in the <CocosProjectPath>/extensions/xsolla-commerce-sdk/native/ios/Frameworks directory and click Open.

    Was this article helpful?
    Thank you!
    Is there anything we can improve? Message
    We’re sorry to hear that
    Please explain why this article wasn’t helpful to you. Message
    Thank you for your feedback!
    We’ll review your message and use it to help us improve your experience.
    Hide

    How to set up social login on iOS devices

    In mobile applications, you can implement social login by opening an authorization form inside the application. To do this, you need to connect the native Xsolla SDK for iOS to the Cocos Creator project. Using this library, you can open a social network authorization form in a pop-up Safari tab and receive a user token if login succeeds. In this case, the user does not need to leave the mobile application.

    To add authorization through social networks in the mobile application:

    1. Connect native Xsolla SDK for iOS to your project.
    2. Start authorization and processing of its results:

      1. Implement a UI for social login in your application (for example, the Sign in with Apple button on the login page).
      2. In accordance with the logic of the application, implement a call of the authSocial native method. This method takes the name of the social network as a parameter.

    Example of starting social login:

    Copy
    Full screen
    Small screen
    NativeUtil.authSocial(socialNetworkName);
    

      1. On the Cocos Creator side, subscribe to the successful authorization event. This event is generated at the scene level by a snippet of TypeScript-code that handles the authorization result. Once authorization is successful, call the handleSuccessfulSocialAuth handler method, which takes an object with the user’s token. This object can be used to further work with the Xsolla API.

    Subscription example:

    Copy
    Full screen
    Small screen
    director.getScene().on(Events.SOCIAL_AUTH_SUCCESS, this.handleSuccessfulSocialAuth, this );
    

    Note
    From native scripts, the callback methods in Cocos Creator should be called from the game thread.

      1. Subscribe to login error and login cancellation events with a call to the necessary handler methods.

    Was this article helpful?
    Thank you!
    Is there anything we can improve? Message
    We’re sorry to hear that
    Please explain why this article wasn’t helpful to you. Message
    Thank you for your feedback!
    We’ll review your message and use it to help us improve your experience.
    Hide
    Last updated: August 1, 2022

    Found a typo or other text error? Select the text and press Ctrl+Enter.

    Report a problem
    We always review our content. Your feedback helps us improve it.
    Provide an email so we can follow up
    Thank you for your feedback!