Social login

In your application, you can implement user authentication using their account in social networks. If the user’s first login is via a social network, a new account is created automatically. The user doesn't need to enter a username, email address, or other data.

There are two ways to implement authentication through social networks:

  • Web-based authentication. In this case, the application opens a form in the browser to complete authentication via the selected social network. This option is suitable for both mobile and desktop applications.
  • Native authentication. In this case, authentication is performed via the social network application on the user’s device. This option is only suitable for mobile applications.

Note
To authenticate users of your iOS application using their Apple ID, Face ID, or Touch ID, implement web-based authentication. In this case, the SDK methods use native libraries for iOS.

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

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.
  • The user’s email address in a social network matches the email address used to sign up in your application.

You can also implement manual linking of a social network account.

How-tos

Learn about advanced setups from our how-tos.
Expand all
Collapse all

How to set up web-based authentication via social networks

SDK supports the following providers for social login:

  • Amazon
  • Apple
  • Baidu
  • Battle.net
  • Discord
  • Facebook
  • GitHub
  • Google
  • Kakao
  • LinkedIn
  • MSN
  • Mail.ru
  • Microsoft
  • Naver
  • Odnoklassniki
  • PayPal
  • QQ
  • Reddit
  • Steam
  • Twitch.tv
  • Twitter
  • VK
  • Vimeo
  • WeChat
  • Weibo
  • Xbox Live
  • Yahoo
  • Yandex
  • YouTube

To set up authentication through web services:

  1. In the application interface, add buttons for authentication via social networks.
  2. Set up social connections for a Login project in Publisher Account.
  3. Implement authentication logic on the application side.

Set up social connections for Login project in Xsolla Publisher Account

Notice
In Publisher Account, ensure the Classic login and Social login option are selected for the Login project that you use in your application. You can change the login method later by clicking the Change Login method link. Previously saved settings will not be lost.

  1. Open your project in Publisher Account.
  2. In the side menu, click Login.
  3. Click Configure in the pane of a Login project.
  4. On the navigation page, go to the Authentication block and select the Social login section.

  1. Connect social networks that users can use to sign up and log into the application:

    • To connect a social network, click the ⚙ icon and select Connect.

    • To connect several social networks at once, select the required panes (their borders will turn green). Then, from the Manage drop-down menu, select Connect.

    • To connect all available social networks, click Select all. Then, from the Manage drop-down menu, select Connect.

Note
Xsolla's Application ID and secret key are used for authentication by default. If your application is set up using a developer account of the social provider, you can specify your own Application ID and secret key. Detailed instructions for locating the Application ID and secret are available in the social network card settings in Publisher Account.

Integrate on application side

Implement the following logic when clicking the social login button:

  1. Open the sign-up/login page using the AuthenticateViaSocialNetwork SDK method.
  2. Subscribe to the SuccessCallback, ErrorCallback, and CancelCallback events.
  3. Get the token from the LoginData parameter or by calling the GetLoginData method and use it in requests to the Xsolla servers.

Note
Upon successful authentication, the SuccessCallback function returns an authorization token in the LoginData parameter. The token is cached locally in the GetLoginData method.

An example of the implementation of this logic is available in the BP_LoginController blueprint of the demo project.

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 native authentication via social networks

Native authentication allows players to log in to your application via installed applications that use social network accounts. Currently, SDK has implemented native authentication via the following social networks:

  • Google
  • Facebook
  • WeChat
  • QQ

To configure native authentication:

  1. In the application interface, add buttons for authentication via social networks.
  2. Create your Unreal Engine project build for Android.

Note
For further native authentication configuration you will need the package name of your Android application found in the Edit > Project Settings > Platforms > Android section in the Android Package Name ('com.YourCompany.Project' [PROJECT] is replaced with project name) field.

  1. Configure the application in the developer account for the social network:
    1. For authentication via Facebook:
      1. Register and create a new application.
      2. Set up the application page in your Facebook developer account.
    2. For authentication via Google, set up the project in Google API Console.
    3. For authentication via WeChat:
      1. Register and create a new application.
      2. Submit the application for review.
    4. For authentication via QQ:
      1. Register and create a new application.
      2. Submit the application for review.

  1. Set up authentication via social networks on the Xsolla side:
    1. For Facebook and Google, set up social connections in Publisher Account.
    2. For WeChat and QQ, contact your Account Manager.
  2. Set up the SDK for your Unreal Engine project.
  3. Implement authentication logic on the application side.

Set up application page in your Facebook developer account

  1. Go to project settings in the Facebook developer account.
  2. Go to Settings > Basic.
  3. Click Add Platform and select Android.
  4. Specify the package name of your Android application in the Google Play Package Name field.
  5. Specify a fully qualified class name of the Activity in the Class Name field (default value is com.epicgames.ue4.GameActivity).
  6. Generate a hash key and specify it in the Key Hashes field.
  7. Click Save Changes.

For further native authentication configuration, you will need:

  • App ID and App Secret found in project settings in Settings > Basic section.
  • Client token found in project settings in the Settings > Advanced > Security section.

Set up project in Google API Console

  1. Go to Google API Console.
  2. Click New Project.
  3. Specify Project name and Location and click Save.
  4. Go to the created project and click OAuth consent screen in the side menu.
  5. Select External option and click Create.
  6. Specify the necessary parameters and click Save.
  7. Click Credentials in the side menu.
  8. Create an OAuth 2.0 client for your Android app:

    1. Click Create credentials and select OAuth client ID.
    2. Specify Android in the Application type field.
    3. Specify Name.
    4. Specify package name of your Android application in the Package name field.
    5. Get the SHA-key.
    6. Specify SHA-key generated in the previous step SHA-key in the SHA-1 certificate fingerprint field.
    7. Click Create.
    8. Click OK.

  1. Create an OAuth 2.0 client for the web application:
    1. Click Create credentials and select OAuth client ID.
    2. Specify Web application in the Application type field.
    3. Specify Name.
    4. Click Add URI in the Authorized redirect URIs section and specify https://login.xsolla.com/api/social/oauth2/callback URI.
    5. Click Create.
    6. Click OK.

For further native authentication configuration, you will need Client ID and Client Secret found in settings of the Client ID for the web application.

Set up social connections for Login project in Xsolla Publisher Account

Notice
In Publisher Account, ensure the Classic login and Social login option are selected for the Login project that you use in your application. You can change the login method later by clicking the Change Login method link. Previously saved settings will not be lost.

  1. Open your project in Publisher Account.
  2. In the side menu, click Login.
  3. Click Configure in the pane of a Login project.
  4. On the navigation page, go to the Authentication block and select Social login section.

  1. To set up a social network, go to the social network card, click the ⚙ icon to the right of the title, and select Connect.

Note
To use social network authorization, in the social network card settings, specify the Application ID and secret of the application in your project. The Application ID and secret are available from the developer account of the social provider. Detailed instructions for locating the Application ID and secret are available in the social network card settings in Publisher Account.

Set up SDK for Unreal Engine project

  1. Go to your Unreal Engine project.
  2. Go to Settings > Project Settings > Plugins > Xsolla Settings > Android.
  3. Specify the application ID:
    1. Specify the App ID from the Facebook developer account in the Facebook App Id field.
    2. Specify the Client token from the Facebook developer account in the Facebook Client Token field.
    3. Specify the Client ID for a web application from the Google API Console in the Google App Id field.
    4. Specify the AppID from the WeChat application settings in the We Chat App Id field.
    5. Specify the AppID from the QQ application settings in the QQ App Id field.

Integrate on application side

When clicking the social login button, implement the LaunchNativeSocialAuthentication method call. An implementation example is provided in the BP_LoginController controller’s AuthenticateViaSocialNetwork method in the demo project.

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

Useful links

Social login: basic setup Social login (tutorial)
Last updated: May 18, 2023

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!