Inicio de sesión mediante redes sociales
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.
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.
Instrucciones
SDK supports the following providers for social login:
- Amazon
- Apple
- Baidu
- Battle.net
- Discord
- GitHub
- Kakao
- MSN
- Mail.ru
- Microsoft
- Naver
- Odnoklassniki
- PayPal
- Steam
- Twitch.tv
- VK
- Vimeo
- Xbox Live
- Yahoo
- Yandex
- YouTube
To set up authentication through web services:
- In the application interface, add buttons for authentication via social networks.
- Set up social connections for a Login project in Publisher Account.
- Implement authentication logic on the application side.
Establecer las conexiones de redes sociales para el proyecto de Login en Cuenta del editor de Xsolla
- Open your project in Publisher Account.
- In the side menu, сlick Login.
- Click Configure in the pane of a Login project.
- On the navigation page, go to the Authentication block and select the Social login section.
- 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.
Integración en el lado de la aplicación
Implement the following logic when clicking the social login button:
- For desktop applications:
- Get the sign-up/login page URL using the
GetSocialNetworkAuthUrl
SDK method. - Open the sign-up/login page in a browser using the
BrowserHelper.Instance.InAppBrowser
method. - Subscribe to the URL change event. To do that, add the
BrowserHelper.Instance.InAppBrowser.AddUrlChangeHandler(OnUrlChanged)
callback. - Track the page URL change after successful user authentication.
- Get the authentication code from the URL of the active page. You can use the
ParseUtils.TryGetValueFromUrl()
SDK helper method to do this. - Exchange the authentication code for a token using the
ExchangeCodeToToken
SDK method and use it in requests to Xsolla servers.
- Get the sign-up/login page URL using the
An example of the implementation of this logic is available in the Assets/Xsolla.Demo/Login/Scripts/Login/Auth/SocialAuth.cs
script of the demo project.
Social login isn’t available for external browsers. The SDK contains a built-in browser developed by Xsolla for desktop applications. You can either use Xsolla’s built-in browser or a different built-in browsing solution that allows you to track URL changes.
- For Android applications:
- Create an object of the
AndroidSDKSocialAuthHelper
class. - Call the
PerformSocialAuth
method and pass the following parameters to the method:SocialProvider
— the name of the social networkonSuccess
— successful user authentication callbackonCancelled
— user cancels authentication callbackonError
— error callback
- Get the token that the
onSuccess
callback returns in thetoken
parameter and use it in requests to the Xsolla servers.
- Create an object of the
Assets/Xsolla.Demo/Login/Scripts/Login/Auth/AndroidSocialAuth.cs
script of the demo project.- For iOS applications:
- Create an object of the
IosSDKSocialAuthHelper
class. - Call the
PerformSocialAuth
method and pass the following parameters to the method:SocialProvider
— the name of the social networkonSuccess
— successful user authentication callbackonCancelled
— user cancels authentication callbackonError
— error callback
- Get the token that the
onSuccess
callback returns in theaccess_token
field of theLoginOAuthJsonResponse
object and use it in requests to the Xsolla servers.
- Create an object of the
Assets/Xsolla.Demo/Login/Scripts/Login/Auth/IosSocialAuth.cs
script of the demo project.Native authentication lets users log in to your application via a social network account configured on a mobile device.
The first time a user logs in, the social networking application is launched and asks for permission to authenticate the user. After that, authentication is performed automatically without requiring the user to do anything.
Currently, SDK has implemented native authentication via the following social networks:
To configure native authentication:
- In the application interface, add buttons for authentication via social networks.
- Create your Unity project build for Android.
- Configure the application in the developer account for the social network:
- For authentication via Facebook:
- Register and create a new application.
- Set up the application page in your Facebook developer account.
- For authentication via Google, set up the project in Google API Console.
- For authentication via WeChat:
- Register and create a new application.
- Submit the application for review.
- For authentication via QQ:
- Register and create a new application.
- Submit the application for review.
- For authentication via Facebook:
- Set up authentication via social networks on the Xsolla side:
- For Facebook and Google, set up social connections in Publisher Account.
- For WeChat and QQ, contact your Account Manager.
- Set up the asset for your Unity project.
- Implement authentication logic on the application side.
Crear compilación de un proyecto de Unity para Android
- Go to your Unity project.
- Click
File > Build settings in the main menu. - Click
Android in thePlatform panel. - Click
Build .
For further native authentication configuration you will need:
- Package name found in the
Package Name field in theInspector panel after selecting theAndroid platform inFile > Build settings . - Android class name — the class name of the main activity, including the namespace of the application (e.g.,
com.domain.appname.activity
). The class name can be found inAndroidManifest.xml
. The main activity’s tag should contain anintent-filter
tag with theandroid.intent.action.MAIN
action and theandroid.intent.category.LAUNCHER
category. - Android hash key. You can get it with OpenSSL.
Establezca la página de la aplicación en su cuenta de desarrollador de Facebook
- Go to project settings in the Facebook developer account.
- Go to Settings > Basic.
- Click Add Platform and select Android.
- Specify package name from your Unity project in the Google Play Package Name field.
- Specify Android class name from your Unity project in the Class Name field.
- Specify Android hash key from your Unity project in the Key Hashes filed.
- Click Save Changes.
For further native authentication configuration, you will need App ID and App Secret found in project settings in Settings > Basic section.
Configurar un proyecto en Google API Console
- Go to Google API Console.
- Click New Project.
- Specify Project name and Location and click Save.
- Go to the created project and click OAuth consent screen in the side menu.
- Select External option and click Create.
- Specify the necessary parameters and click Save.
- Click Credentials in the side menu.
- Create an OAuth 2.0 client for your Unity application:
- Click Create credentials and select OAuth client ID.
- Specify Android in the Application type field.
- Specify Name.
- Specify package name from your Unity project in the Package name field.
- Specify Android hash key from your Unity project in the SHA-1 certificate fingerprint field.
- Click Create.
- Click OK.
- Create an OAuth 2.0 client for the web application:
- Click Create credentials and select OAuth client ID.
- Specify Web application in the Application type field.
- Specify Name.
- Click Add URI in the Authorized redirect URIs section and specify
https://login.xsolla.com/api/social/oauth2/callback
URI. - Click Create.
- 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.
Establecer las conexiones de redes sociales para el proyecto de Login en Cuenta del editor de Xsolla
- Open your project in Publisher Account.
- In the side menu, сlick Login.
- Click Configure in the pane of a Login project.
- On the navigation page, go to the Authentication block and select Social login section.
- To set up a social network, go to the social network card, click the ⚙ icon to the right of the title, and select Connect.
Establecer activo para su proyecto de Unity
- Go to your Unity project.
- Click
Window > Xsolla > Edit Settings in the main menu. - Specify the application ID:
- Specify App ID from the Facebook developer account in the
Facebook App ID field. - Specify Client ID for a web application from the Google API Console in the
Google server ID field. - Specify AppID from the WeChat application settings in the
WeChat App ID field. - Specify AppID from the QQ application settings in the
QQ App ID field.
- Specify App ID from the Facebook developer account in the
Integración en el lado de la aplicación
Implement the following logic when clicking the social login button:
- For Android applications, create an instance of
AndroidSDKSocialAuthHelper
and call thePerformSocialAuth
method. An implementation example is provided in theAssets/Xsolla.Demo/Login/Scripts/Login/Auth/AndroidSocialAuth.cs
script in the demo project.
- For iOS applications, create an instance of
IosSDKSocialAuthHelper
and call thePerformSocialAuth
method. An implementation example is provided in theAssets/Xsolla.Demo/Login/Scripts/Login/Auth/IosSocialAuth.cs
script in the demo project.
Enlaces útiles
¿Has encontrado una errata u otro error de texto? Selecciona el texto y pulsa Ctrl+Intro.