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
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:
- Generate a project for Android Studio.
- Connect the Xsolla SDK for Android to the project.
- Set up the project in Android Studio.
- Initialize the Xsolla SDK for Android on the Cocos Creator side.
Generate project for Android Studio
- 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, clickNew Build Task to create a new configuration. - In the
New Build Configuration window, make the following changes:
- In the
Platform field, selectAndroid from the list of available build platforms. - In the
APP ABI field, specifyarm64-v8a (recommended). If you plan to run a mobile application on an emulator, then specifyx86 . - In the
Target API Level field, specifyandroid-28 or newer.
- In the
- 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
- Add custom Activities from Xsolla SDK to the source code. To do that:
- 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. - 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 and replace the existing files from the
- kotlin
<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"/>
- Add the Xsolla SDK libraries for Android as dependencies to your project’s build settings:
- In Android Studio, open your project’s
build.gradle
file. - Add the following lines to the dependencies section:
- In Android Studio, open your project’s
- kotlin
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'
- For the changes to take effect, run the
Sync Now
command.
- For the changes to take effect, run the
Android Studio will download the corresponding libraries, and you can use its methods in the project.
Set up project in Android Studio
- In Android Studio, open your project from the
<CocosProjectPath>/build/android/proj
directory. - Add the AndroidX native libraries required for the Xsolla SDK for Android to work:
- In the
gradle.properties
file, add the following lines:
- In the
- kotlin
android.useAndroidX=true
android.enableJetifier=true
- For the changes to take effect, run the
Sync Now
command.
- For the changes to take effect, run the
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:
- typescript
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);
}
}
start
method of a component attached to the scene.Was this article helpful?
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:
- Connect native Xsolla SDK for Android to your project.
- Start authorization and processing of its results:
- Implement a UI for social login in your application (for example, the
Sign in with Google button on the login page). - 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.
- Implement a UI for social login in your application (for example, the
Example of starting social login:
- typescript
NativeUtil.authSocial(socialNetworkName);
- 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.
- 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
Subscription example:
- typescript
director.getScene().on(Events.SOCIAL_AUTH_SUCCESS, this.handleSuccessfulSocialAuth, this );
- Subscribe to login error and login cancellation events with a call to the necessary handler methods.
Was this article helpful?
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:
- Generate a project for Xcode.
- Connect the Xsolla SDK for iOS to the project.
- Set up the project in Xcode.
Generate project for Xcode
- 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, clickNew Build Task to create a new configuration. - In the
New Build Configuration window, make the following changes:
- In the
Platform field, selectiOS from the list of available build platforms. - In the
Developer Team section, specify your developer profile.
- In the
- Click
Build . - In the main menu, go to
File > Project Settings . - In the
Build System field, specifyNew 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:
- Copy files from the
<CocosProjectPath>/extensions/xsolla-commerce-sdk/native/ios/Scripts
folder to the<CocosProjectPath>/native/engine/ios
folder. - Open the
<CocosProjectPath>/native/engine/ios/CMakeLists.txt
file with any text editor and add the following lines to thePROJ_SOURCES
list:
${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
- In Xcode, open your project from the
<CocosProjectPath>/build/ios/proj
directory. - Connect the frameworks from the Xsolla SDK to the project. To do this:
- Go to project settings.
- Select the target with the name of your project.
- Go to the
General > Embedded Content section and click on the + icon. - In the window that appears, select
Add Other > Add Files from the drop-down list. - Select all the framework folders in the
<CocosProjectPath>/extensions/xsolla-commerce-sdk/native/ios/Frameworks
directory and clickOpen .
Was this article helpful?
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:
- Connect native Xsolla SDK for iOS to your project.
- Start authorization and processing of its results:
- Implement a UI for social login in your application (for example, the
Sign in with Apple button on the login page). - 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.
- Implement a UI for social login in your application (for example, the
Example of starting social login:
- typescript
NativeUtil.authSocial(socialNetworkName);
- 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.
- 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
Subscription example:
- typescript
director.getScene().on(Events.SOCIAL_AUTH_SUCCESS, this.handleSuccessfulSocialAuth, this );
- Subscribe to login error and login cancellation events with a call to the necessary handler methods.
Was this article helpful?
Found a typo or other text error? Select the text and press Ctrl+Enter.