ソーシャルログイン
アプリケーションでは、ソーシャルネットワークのアカウントを使用したユーザー認証を実装することができます。ユーザーの最初のログインがソーシャルネットワーク経由の場合、新しいアカウントが自動的に作成されます。ユーザーは、ユーザー名やメールアドレスなどのデータを入力する必要がありません。
ソーシャルネットワークを利用した認証の実装には、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
ウェブサービスによる認証を設定するには:
- アプリケーションのインターフェースに、ソーシャルネットワーク経由の認証のボタンを追加します。
- パブリッシャーアカウントでログインプロジェクトにソーシャルコネクションをセットアップします。
- アプリケーション側で認証ロジックを実装します。
エクソーラアドミンページでログインプロジェクトのソーシャルコネクションを設定します
- パブリッシャーアカウントであなたのプロジェクトを開きます。
- サイドメニューでログインをクリックします。
- ログインプロジェクトのパネルで構成するをクリックします。
- ナビゲーションページで、認証ブロックに移動し、ソーシャルログインセクションを選択します。
- ユーザーがアプリケーションへのサインアップやログインに使用できるソーシャルネットワークを接続します:
- ソーシャルネットワークに接続するには、⚙ アイコンをクリックし、接続するを選択します。
- 複数のソーシャルネットワークを一度に接続するには、必要なペインを選択します(枠線が緑色になる)。それで、管理ドロップダウンメニューから、接続するを選択します。
- 利用可能なすべてのソーシャルネットワークを接続するには、すべて選択をクリックします。それで、管理ドロップダウンメニューから、接続するを選択します。
アプリケーション側で統合する
ソーシャルログインボタンをクリックした際に、以下のロジックを実装します:
- デスクトップアプリケーションの場合:
GetSocialNetworkAuthUrl
SDKメソッドを使用して、新規登録/ログインページのURLを取得します。BrowserHelper.Instance.InAppBrowser
メソッドを使用して、サインアップ/ログインページをブラウザで開きます。- URL変更イベントにサブスクライブします。そのためには、
BrowserHelper.Instance.InAppBrowser.AddUrlChangeHandler(OnUrlChanged)
コールバックを追加します。 - ユーザー認証に成功した後のページURLの変化を追跡します。
- アクティブページのURLから認証コードを取得します。これを行うには、
ParseUtils.TryGetValueFromUrl()
SDKヘルパーメソッドを使用できます。 ExchangeCodeToToken
SDKメソッドを使用して認証コードをトークンに交換し、エクソーラサーバーへのリクエストで使用します。
このロジックの実装例は、デモプロジェクトのAssets/Xsolla.Demo/Login/Scripts/Login/Auth/SocialAuth.cs
スクリプトにあります。
ソーシャルログインは、外部のブラウザでは利用できません。SDKには、デスクトップアプリケーション用にエクソーラによって開発された組み込みブラウザが含まれています。エクソーラの組み込みブラウザ、またはURLの変更を追跡できる別の組み込みブラウジングソリューションのいずれかを使用できます。
- Androidアプリケーションの場合:
AndroidSDKSocialAuthHelper
クラスのオブジェクトを作成します。PerformSocialAuth
メソッドを呼び出し、次のパラメータをメソッドに渡します:SocialProvider
— ソーシャルネットワークの名前onSuccess
— s成功したユーザー認証のコールバックonCancelled
— ユーザーが認証コールバックをキャンセルするonError
— エラーコールバック
onSuccess
コールバックがtoken
パラメータで返すトークンを取得し、それをエクソーラサーバーへのリクエストで使用します。
Assets/Xsolla.Demo/Login/Scripts/Login/Auth/AndroidSocialAuth.cs
スクリプトにあります。- iOSアプリケーションの場合:
IosSDKSocialAuthHelper
クラスのオブジェクトを作成します。PerformSocialAuth
メソッドを呼び出し、次のパラメータをメソッドに渡します:SocialProvider
— ソーシャルネットワークの名前onSuccess
— s成功したユーザー認証のコールバックonCancelled
— ユーザーが認証コールバックをキャンセルするonError
— エラーコールバック
onSuccess
コールバックがLoginOAuthJsonResponse
オブジェクトのaccess_token
フィールドに返すトークンを取得し、エクソーラサーバーへのリクエストで使用します。
Assets/Xsolla.Demo/Login/Scripts/Login/Auth/IosSocialAuth.cs
スクリプトにあります。ネイティブ認証は、ユーザーがモバイルデバイスに設定されたソーシャルネットワークアカウントを介してアプリケーションにログインすることを可能にします。
ユーザーが初めてログインすると、ソーシャルネットワーキングアプリケーションが起動し、ユーザー認証の許可を求めます。その後は、ユーザーが何もしなくても自動的に認証が行われます。
現在、SDKは以下のソーシャルネットワーク経由のネイティブ認証を実装しています:
ネイティブ認証を設定するには:
- アプリケーションのインターフェースに、ソーシャルネットワークを介した認証のためのボタンを追加します。
- Android用のUnityプロジェクトビルドを作成します。
- ソーシャルネットワークの開発者アカウントでアプリケーションの設定を行います:
- Facebookによる認証の場合:
- 登録して、新しいアプリケーションを作成します。
- Facebook開発者アカウントで、アプリケーションページを設定します。
- Googleによる認証の場合:Google API Consoleでプロジェクトを設定します。
- WeChatによる認証の場合:
- 登録して、新しいアプリケーションを作成します。
- 審査のためにアプリケーションを提出してください。
- QQによる認証の場合:
- 登録して、新しいアプリケーションを作成します。
- 審査のためにアプリケーションを提出してください。
- Facebookによる認証の場合:
- エクソラ側でソーシャルネットワークによる認証を設定します:
- FacebookとGoogleの場合は、パブリッシャーアカウントでソーシャルコネクションを設定します。
- WeChatとQQの場合は、あなたのアカウントマネージャーをお問い合わせてください。
- Unityプロジェクトのアセットを設定します。
- アプリケーション側で認証ロジックを実装します。
Android用Unityプロジェクトビルドを作成する
- Unityプロジェクトに移動します。
- メインメニューで
File > Build settings をクリックします。 Platform パネルでAndroid をクリックします。Build をクリックします。
ネイティブ認証の設定に関する詳細については、以下のものが必要です:
File > Build settings でAndroid プラットフォームを選択後、Inspector パネル内のPackage Name フィールドで見つかったパッケージ名。- Androidクラス名 — アプリケーションの名前空間(例:
com.domain.appname.activity
)を含む、主活動のクラス名。クラス名はAndroidManifest.xml
で確認することができます。主活動のタグには、アクションandroid.intent.action.MAIN
とカテゴリーandroid.intent.category.LAUNCHER
を持つintent-filter
タグが必要です。 - Androidハッシュキー。OpenSSLで取得することができます。
Facebook開発者アカウントでアプリケーションページをセットアップする
- Facebook開発者アカウントのプロジェクト設定に移動します。
- 設定 > 基本に移動します。
- プラットフォームを追加をクリックし、Androidを選択します。
- Google Playパッケージ名フィールドでUnityプロジェクトのパッケージ名を指定します。
- クラス名フィールドでUnityプロジェクトのAndroidクラス名を指定します。
- キーハッシュフィールドでUnityプロジェクトのハッシュキーを指定します。
- 変更内容を保存をクリックします。
さらにネイティブ認証の設定を行うには、設定 > 基本セクションのプロジェクト設定にあるアプリIDとアプリシークレットが必要です。
Google API Consoleでプロジェクトをセットアップする
- Google API Consoleに移動します。
- 新しいプロジェクトをクリックします。
- プロジェクト名と場所を指定して保存するをクリックします。
- 作成したプロジェクトに移動してサイドメニューでのOAuth同意画面をクリックします。
- 外部オプションを選択して作成するをクリックします。
- 必要なパラメータを指定して、保存をクリックします。サイドメニューで
- 資格情報をクリックします。
- Unityアプリ用のOAuth 2.0クライアントを作成します:
- 資格情報を作成をクリックして、OAuthクライアントIDを選択します。
- アプリケーションタイプフィールドでAndroidを指定します。
- 名前を指定します。
- パッケージ名フィールドでUnityプロジェクトのパッケージ名を指定します。
- SHA-1証明書のフィンガープリントフィールドでUnityプロジェクトのAndroidハッシュキーを指定します。
- 作成をクリックします。
- OKをクリックします。
- Webアプリケーション用のOAuth 2.0クライアントを作成します:
- 資格情報を作成するをクリックして、OAuthクライアントIDを選択します。
- アプリケーションタイプフィールドでウェブアプリケーションを指定します。
- 名称を指定します。
- 許可されたリダイレクトURIセクションでURIを追加するをクリックして、
https://login.xsolla.com/api/social/oauth2/callback
URIを指定します。 - 作成するクリックします。
- OKクリックします。
さらにネイティブ認証の設定を行うには、ウェブアプリケーションのクライアントIDの設定にあるクライアントIDとクライアントシークレットが必要です。
エクソーラアドミンページでログインプロジェクトのソーシャルコネクションを設定します
- パブリッシャーアカウントであなたのプロジェクトを開きます。
- サイドメニューでログインをクリックします。
- ログインプロジェクトのパネルで構成するをクリックします。
- ナビゲーションページで、認証ブロックに移動し、ソーシャルログインセクションを選択します。
- ソーシャルネットワークを設定するには、ソーシャルネットワークカードで、タイトルの右にある⚙アイコンをクリックし、接続を選択します。
Unityプロジェクトのアセットをセットアップする
- Unityプロジェクトに移動します。
- メインメニューで
Window > Xsolla > Edit Settings をクリックします。 - アプリケーションIDを指定します:
Facebook App ID フィールドでのFacebook開発者アカウントからアプリIDを指定します。Google server ID フィールドでのGoogle API ConsoleからウェブアプリケーションのクライアントIDを指定します。WeChat App ID フィルドでAppIDをWeChatアプリケーションの設定から指定します。QQ App ID でAppIDフィルドをQQアプリケーションの設定から指定します。
アプリケーション側で統合する
ソーシャルログインボタンをクリックした際に、以下のロジックを実装します:
- Androidアプリケーションの場合、
AndroidSDKSocialAuthHelper
のインスタンスを作成し、PerformSocialAuth
メソッドを呼び出します。実装例は、デモプロジェクトのAssets/Xsolla.Demo/Login/Scripts/Login/Auth/AndroidSocialAuth.cs
スクリプトで提供されています。
- iOSアプリケーションの場合、
IosSDKSocialAuthHelper
のインスタンスを作成し、PerformSocialAuth
メソッドを呼び出します。実装例は、デモプロジェクトのAssets/Xsolla.Demo/Login/Scripts/Login/Auth/IosSocialAuth.cs
スクリプトで提供されています。
お役立ちリンク
最終更新日: 2023年10月10日誤字脱字などのテキストエラーを見つけましたか? テキストを選択し、Ctrl+Enterを押します。