ソーシャルログイン
アプリケーションでは、ソーシャルネットワークのアカウントを使用したユーザー認証を実装することができます。ユーザーの最初のログインがソーシャルネットワーク経由の場合、新しいアカウントが自動的に作成されます。ユーザーは、ユーザー名やメールアドレスなどのデータを入力する必要がありません。
ソーシャルネットワークを利用した認証の実装には、2つの方法があります:
- Webベース認証。この場合、アプリケーションはブラウザでフォームを開き、選択したソーシャルネットワークを介して認証を完了させます。このオプションは、モバイルとデスクトップの両方のアプリケーションに適しています。
- ネイティブ認証。この場合、認証はユーザーのデバイス上のソーシャルネットワークアプリケーションを介して実行されます。このオプションは、モバイルアプリケーションにのみ適しています。
ソーシャルログインは、アプリケーションの主要な認証方法として、または代替の認証方法として使用することができます。
代替の認証方法としてソーシャルログインを使用する場合、以下の条件を満たすと、ソーシャルネットワークのアカウントは自動的に既存のユーザーアカウントに紐付けられます:
- ユーザー名/メールアドレスとパスワードでサインアップしたユーザーが、ソーシャルネットワークアカウントを介してアプリケーションにログインしました。
- ソーシャルネットワークでは、メールアドレスを返します。
- ソーシャルネットワーク上のユーザーのメールアドレスと、アプリケーションでサインアップに使用したメールアドレスが一致します。
ソーシャルネットワークアカウントの手動リンクを実装することもできます。
ハウツー
SDKは、ソーシャルログインのために以下のプロバイダーをサポートしています:
- 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
ウェブサービスによる認証を設定するには:
- アプリケーションのインターフェースに、ソーシャルネットワーク経由の認証のボタンを追加します。
- アドミンページでログインプロジェクトにソーシャルコネクションをセットアップします。
- アプリケーション側で認証ロジックを実装します。
エクソーラアドミンページでログインプロジェクトのソーシャルコネクションを設定します
- アドミンページでプロジェクトを開きます。
- サイドメニューで「ログイン」をクリックします。
- ログインプロジェクトのパネルで「構成する」をクリックします。
- 「認証」ブロックに移動し、「ソーシャルログイン」セクションを選択します。
- ユーザーがアプリケーションへのサインアップやログインに使用できるソーシャルネットワークを接続します:
- ソーシャルネットワークに接続するには、⚙ アイコンをクリックし、接続するを選択します。
- 複数のソーシャルネットワークを一度に接続するには、必要なペインを選択します(枠線が緑色になる)。それで、管理ドロップダウンメニューから、接続するを選択します。
- 利用可能なすべてのソーシャルネットワークを接続するには、すべて選択をクリックします。それで、管理ドロップダウンメニューから、接続するを選択します。
アプリケーション側で統合する
- Loginライブラリから
startSocialAuth
メソッドを呼び出します。 onActivityResult
メソッドで、LoginライブラリからfinishSocialAuth
メソッドを呼び出します。
ネイティブ認証は、ユーザーがモバイルデバイスに設定されたソーシャルネットワークアカウントを介してアプリケーションにログインすることを可能にします。
ユーザーが初めてログインすると、ソーシャルネットワーキングアプリケーションが起動し、ユーザー認証の許可を求めます。その後は、ユーザーが何もしなくても自動的に認証が行われます。
現在、SDKは以下のソーシャルネットワーク経由のネイティブ認証を実装しています:
ネイティブ認証を設定するには:
- アプリケーションのインターフェースに、ソーシャルネットワークを介した認証のためのボタンを追加します。
- ソーシャルネットワークの開発者アカウントでアプリケーションの設定を行います:
- Facebookによる認証の場合:
- 登録して、新しいアプリケーションを作成します。
- Facebook開発者アカウントで、アプリケーションページを設定します。
- Googleによる認証の場合:Google API Consoleでプロジェクトを設定します。
- WeChatによる認証の場合:
- 登録して、新しいアプリケーションを作成します。
- 審査のためにアプリケーションを提出してください。
- QQによる認証の場合:
- 登録して、新しいアプリケーションを作成します。
- 審査のためにアプリケーションを提出してください。
- Facebookによる認証の場合:
- エクソーラ側でソーシャルネットワークによる認証を設定します:
- FacebookとGoogleの場合は、アドミンページでソーシャルコネクションを設定します。
- WeChatとQQの場合は、カスタマーサクセスマネージャーまでお問い合わせるか、csm@xsolla.comに電子メールを送信してください。
- ソーシャルネットワークによる認証用ライブラリをインストールします。これを行うには、アプリケーションの
build.gradle
ファイルを開き、依存関係セクションに次の行を追加します。ここで、<version_number>
はライブラリの必要なバージョンです:- Facebookによる認証の場合:
- groovy
implementation 'com.xsolla.android:login-facebook:<version_number>'
- Googleによる認証の場合:
- groovy
implementation 'com.xsolla.android:login-google:<version_number>'
- WeChatによる認証の場合:
- groovy
implementation 'com.xsolla.android:login-wechat:<version_number>'
- Googleによる認証の場合:
- groovy
implementation 'com.xsolla.android:login-qq:<version_number>'
- Loginライブラリを以下のパラメータで初期化します:
facebook_id
— Facebook開発者アカウントのアプリIDgoogle_id
— Google API ConsoleからウェブアプリケーションのクライアントIDwechat_id
— WeChat開発者アカウントのアプリIDqq_id
— QQ開発者アカウントのアプリID
OAuth 2.0での認証時にライブラリを初期化する例:
- kotlin
val loginConfig = LoginConfig.OauthBuilder()
.setProjectId("login-project-id")
.setOauthClientId("oauth2-client-id")
.setSocialConfig(XLogin.SocialConfig(
facebookAppId = "facebook_id",
googleServerId = "google_id",
wechatAppId = "wechat_id",
qqAppId = "qq_id"
))
.build()
XLogin.init(applicationContext, loginConfig)
- WeChatによる認証の場合、アプリケーションコードを変更します:
WXEntryActivity
クラスを<your_package_name>.wxapi
パッケージに追加します。<your_package_name>
はアプリケーションのパッケージ名:
- kotlin
package <your_package_name>.wxapi
import android.app.Activity
import android.os.Bundle
import com.tencent.mm.opensdk.modelbase.BaseReq
import com.tencent.mm.opensdk.modelbase.BaseResp
import com.tencent.mm.opensdk.openapi.IWXAPI
import com.tencent.mm.opensdk.openapi.IWXAPIEventHandler
import com.tencent.mm.opensdk.openapi.WXAPIFactory
import com.xsolla.android.login.util.WechatUtils
class WXEntryActivity : Activity(), IWXAPIEventHandler {
private lateinit var iwxapi: IWXAPI
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
iwxapi = WXAPIFactory.createWXAPI(this, WechatUtils.wechatAppId, false)
iwxapi.handleIntent(intent, this)
finish()
}
override fun onReq(req: BaseReq?) {
}
override fun onResp(resp: BaseResp) {
WechatUtils.wechatResult = resp
}
}
AndroidManifest.xml
ファイルに次の要素を追加します:
- kotlin
<activity
android:name="<your_package_name>.wxapi.WXEntryActivity"
android:exported="true"
android:launchMode="singleTask" />
Facebook開発者アカウントでアプリケーションページをセットアップする
- Facebook開発者アカウントのプロジェクト設定に移動します。
- 設定>基本に移動します。
- プラットフォームを追加するをクリックし、Androidを選択します。
- 、Google Playのパッケージ名フィールドでのAndroidアプリケーションのパッケージ名を指定します。
- クラス名フィールドでのデフォルトのアクティビティの完全修飾クラス名を指定します。
- キーハッシュフィールドでハッシュキーを生成し、指定します。
- 変更を保存するをクリックします。
さらにネイティブ認証の設定を行うには、設定 > 基本セクションのプロジェクト設定にあるアプリIDとアプリシークレットが必要です。
Google API Consoleでプロジェクトをセットアップする
- Google API Consoleに移動します。
- 新しいプロジェクトをクリックします。
- プロジェクト名と場所を指定して保存するをクリックします。
- 作成したプロジェクトに移動してサイドメニューでのOAuth同意画面をクリックします。
- 外部オプションを選択して作成するをクリックします。
- 必要なパラメータを指定して、保存をクリックします。サイドメニューで
- 資格情報をクリックします。
- Androidアプリ用のOAuth 2.0クライアントを作成します:
- 資格情報を作成するをクリックして、OAuthクライアントIDを選択します。
- アプリケーションタイプフィールドでAndroidを指定します。
- 名称を指定します。
- パッケージ名フィールドであなたのAndroidアプリケーションのパッケージ名を指定します。
- SHA-keyを取得します。
- SHA-1証明書のフィンガープリントフィールドで前の手順で生成されたSHAキーを指定します。
- 作成するをクリックします。
- OKをクリックします。
- Webアプリケーション用のOAuth 2.0クライアントを作成します:
- 資格情報を作成するをクリックして、OAuthクライアントIDを選択します。
- アプリケーションタイプフィールドでウェブアプリケーションを指定します。
- 名称を指定します。
- 許可されたリダイレクトURIセクションでURIを追加するをクリックして、
https://login.xsolla.com/api/social/oauth2/callback
URIを指定します。 - 作成するクリックします。
- OKクリックします。
さらにネイティブ認証の設定を行うには、ウェブアプリケーションのクライアントIDの設定にあるクライアントIDとクライアントシークレットが必要です。
エクソーラアドミンページでログインプロジェクトのソーシャルコネクションを設定します
- アドミンページでプロジェクトを開きます。
- サイドメニューで「ログイン」をクリックします。
- ログインプロジェクトのパネルで「構成する」をクリックします。
- 「認証」ブロックに移動し、「ソーシャルログイン」セクションを選択します。
- ソーシャルネットワークを設定するには、ソーシャルネットワークカードで、タイトルの右にある⚙アイコンをクリックし、接続を選択します。
アプリケーション側で統合する
- Loginライブラリから
startSocialAuth
メソッドを呼び出します。 onActivityResult
メソッドで、LoginライブラリからfinishSocialAuth
メソッドを呼び出します。
お役立ちリンク
最終更新日: 2024年7月31日誤字脱字などのテキストエラーを見つけましたか? テキストを選択し、Ctrl+Enterを押します。