Twitch をアイデンティティプロバイダーとして設定する
注釈:本資料はAI技術を用いて翻訳されています。
概要
このガイドは、認証済みの Twitch デベロッパーが Twitch アカウントを AccelByte Gaming Services (AGS) に接続する際の手引きとなることを目的としています。ここに記載されていない追加機能を Twitch サービス内で設定する必要がある場合もあります。Twitch サービスの設定に関する詳細については、Twitch の担当者に直接お問い合わせいただくとともに、Twitch の公式ドキュメントを確認することをお勧めします。
このガイドは一般公開を目的としており、機密保持の観点から限定的な情報のみを記載しています。まずは機密版の完全なガイドを参照することをお勧めします。ガイドのコピーを入手するには、担当の AccelByte テクニカルプロデューサーにお問い合わせください。
目標
- AccelByte Game SDK を使用して、ゲームで Twitch 認証方式を有効にする。
- AccelByte Player Portal を使用して、パブリッシャーの Web サイトで Twitch 認証方式を有効にする。
前提条件
Web ログイン統合
- 認証済みの Twitch アカウントとデベロッパー向け Twitch アクセス権が必要です。
- 認証の設定と権限管理を行うための AccelByte Admin Portal アカウント。
- Player Portal および Launcher 用のパブリッシャー Namespace。
- Player Portal。
Web ログイン統合は現在 AGS Public Cloud では利用できず、AGS Private Cloud でのみサポートされています。
インゲームログイン統合
- 認証済みの Twitch アカウントとデベロッパー向け Twitch アクセス権が必要です。
- 認証の設定と権限管理を行うための AccelByte Admin Portal アカウント。
- ゲーム Namespace。
- 最新バージョンの AccelByte Game SDK をインポートした Unity または Unreal のゲームプロジェクト。
- AGS Identity and Access Management (IAM) クライアントに関する知識。
Twitch アプリの設定
Twitch デベロッパー組織のセットアップ(任意)
Twitch デベロッパー組織をセットアップします。組織の登録と管理ガイド の手順に従ってください。
Twitch 2FA の有効化
Twitch アカウントで 2FA を有効にします。二要素認証の設定ガイド の手順に従ってください。
アプリケーションの登録
Twitch デベロッパーコンソールでアプリケーションを登録します。アプリの登録ガイド の手順に従ってください。
Twitch デベロッパーコンソールでの設定に問題がある場合は、カスタマーサポートに連絡して AccelByte からガイドを入手してください。
Twitch ログイン方式の設定
Web ログイン
以下の手順に従って、Player Portal で Twitch ログインを設定します。これにより、プレイヤーは Twitch アカウントを使用して Player Portal にサインインできるようになります。
-
AGS Admin Portal で、パブリッシャー Namespace に移動します。
-
サイドバーメニューで Foundations > 3rd Party Integrations > Auth & Account Linking に移動します。
-
Auth & Account Linking ページで、+ Add New ボタンをクリックします。

-
ログイン方式のオプション一覧から Twitch を選択します。

-
Twitch アプリの認証情報でログイン設定を入力します。Client ID には Twitch のクライアント ID を、Client Secret には Twitch のクライアントシークレットを入力し、Redirect URI には Twitch ログインのリダイレクト URI である
<BaseURL>/iam/v3/platforms/twitch/authenticateを入力します(BaseURL はご利用のドメインアドレスです。例: https://development.accelbyte.io)。
-
詳細ページにリダイレクトされます。あとは設定を有効化するだけで使用できるようになります。

試してみる
パブリッシャー Namespace で Twitch ログイン方式をすでに設定していることを確認してください。
-
Player Portal に移動し、Login をクリックします。

-
Twitch をクリックします。アイコンが見つからない場合は、More login options をクリックしたうえで Login with Twitch をクリックします。

-
Twitch アカウントの認証情報でログインします。

現在、プレイヤーは既存の AccelByte アカウントに Twitch アカウントをリンクするか、新しいアカウントにリンクするかを求められます。AccelByte では、プレイヤーがヘッドレスアカウントで Player Portal に直接ログインできるように、これを設定可能にする取り組みを進めています。
インゲームログイン
-
AGS Admin Portal で、ゲーム Namespace に移動します。
-
サイドバーメニューで Foundations > 3rd Party Integrations > Auth & Account Linking に移動します。
-
Auth & Account Linking ページで、+ Add New ボタンをクリックします。

-
ログイン方式のオプション一覧から Twitch を選択します。

-
Twitch アプリの認証情報でログイン設定を入力します。Client ID には Twitch のクライアント ID を、Client Secret には Twitch のクライアントシークレットを入力し、Redirect URI には BaseURL ドメインを入力します(BaseURL はご利用のドメインアドレスです。例: https://development.accelbyte.io)。

-
詳細ページにリダイレクトされます。あとは設定を有効化するだけで使用できるようになります。

Twitch 用の IAM クライアントの作成
IAM クライアントは、対象プラットフォームでリリースしたいゲームクライアントを表すものです。
特定の SDK プラットフォーム(例: Xbox、Steam、Playstation)向けにゲームの IAM クライアントを既に作成している場合は、新しい IAM クライアントを作成する必要はありません。Twitch はゲームを構築するプラットフォームではないため、既存の IAM クライアントを使用できます。IAM クライアントの詳細については、アプリケーションのアクセス制御を管理する の記事を参照してください。
インゲームログイン統合
各ゲームエンジンでの設定方法は異なります。以下のタブから使用しているゲームエンジンを選択してください。
- Unreal Engine Instructions
- Unity Engine Instructions
Unreal Engine のインゲームログイン統合
Unreal の準備と設定
依存関係の追加
まず、AccelbyteUe4Sdk というパブリック依存モジュールを追加する必要があります。この依存モジュールは、Unreal Engine 内で AccelByte SDK プラグインを使用してプロジェクトを統合するために必要です。
public ABThirdPartyLogin(ReadOnlyTargetRules Target) : base(Target)
{
PCHUsage = PCHUsageMode.UseExplicitOrSharedPCHs;
PublicDependencyModuleNames.AddRange(new string[] { "Core", "CoreUObject", "Engine", "InputCore" , "AccelByteUe4Sdk", "Slate", "SlateCore" });
PrivateDependencyModuleNames.AddRange(new string[] { "Json", "HTTP" });
}
<YourProject>.Target.cs および <YourProjectEditor>.Target.cs 内に AccelbyteUe4Sdk を追加します。
public ABThirdPartyLoginTarget( TargetInfo Target) : base(Target)
{
Type = TargetType.Game;
DefaultBuildSettings = BuildSettingsVersion.V2;
ExtraModuleNames.AddRange( new string[] { "ABThirdPartyLogin", "AccelByteUe4Sdk" } );
}
public ABThirdPartyLoginEditorTarget( TargetInfo Target) : base(Target)
{
Type = TargetType.Editor;
DefaultBuildSettings = BuildSettingsVersion.V2;
ExtraModuleNames.AddRange( new string[] { "ABThirdPartyLogin", "AccelByteUe4Sdk" } );
}
Twitch ログイン用の Unreal Engine プロジェクト設定
DefaultEngine.ini ファイル内に、AccelByte の認証情報を追加してください。
[/Script/AccelByteUe4Sdk.AccelByteSettings]
ClientId=<Your Client_Id>
ClientSecret=<Your Client_Secret>
Namespace=<Your Namespace>
PublisherNamespace=<Your Publisher Namespace>
RedirectURI="http://127.0.0.1"
BaseUrl="https://prod.gamingservices.accelbyte.io"
IamServerUrl="https://prod.gamingservices.accelbyte.io/iam"
PlatformServerUrl="https://prod.gamingservices.accelbyte.io/platform"
Unreal サンプルコードの実装
次のステップでは、以下のサンプルコードを使用してゲームに Twitch 認証方式を実装する方法を紹介します。
- ログインコンテナとして、Blueprint 内に WebBrowser アイテムを作成します。
- Twitch ログイン URL をロードし、以下の認証パラメータを追加します。
- redirect_uri: ログイン完了時のリダイレクト URL。リダイレクト先はゲームに戻るため、値には BaseURL (ApiClient->Settings->BaseUrl) を入力します。また、ホワイトリストに登録するため、Twitch デベロッパーポータルの Redirect Uri 設定にも同じ BaseUrl の値を入力してください。
- response_type: 値には "code" を入力します。
- scope: 値には権限スコープを入力します。
スニペットで使用されている AccelByteOnlineSubsystemPtr を取得するには、このガイドに従ってください。
auto ApiClient = AccelByteOnlineSubsystemPtr->GetApiClient(TEXT("YOUR_KEY"));
auto UserApi = ApiClient->GetUserApi().Pin();
void UAccelByteAuth::TwitchLogin()
{
FString TwitchClientId;
GConfig->GetString(TEXT("TwitchClientId"), TwitchClientId, GEngineIni);
FString RedirectUri = TEXT("YOUR_TWITCH_REDIRECTURI");
FString Scope = TEXT("user:read:email");
FString Url = FString::Printf(TEXT("https://id.twitch.tv?client_id=%s&redirect_uri=%s&response_type=%s&scope=%s"),
*FGenericPlatformHttp::UrlEncode(TwitchClientId),
*FGenericPlatformHttp::UrlEncode(RedirectUri),
TEXT("code"),
*FGenericPlatformHttp::UrlEncode(Scope));
WBrowser_LoginAuth->LoadURL(Url);
WBrowser_LoginAuth->OnUrlChanged.AddUniqueDynamic(this, &UAccelByteAuth::AccelByteLoginWithTwitch);
}
void UAccelByteAuth::AccelByteLoginWithTwitch(const FText& NewUrl)
{
FString Url = NewUrl.ToString();
FString RedirectUri = ApiClient->Settings->BaseUrl;
FString LoginCode = TEXT("");
if (Url.Contains(RedirectUri))
{
LoginCode = FGenericPlatformHttp::GetUrlParameter(Url, TEXT("code")).GetValue();
}
if (!LoginCode.IsEmpty())
{
UserApi->LoginWithOtherPlatform(AccelByte.Models.PlatformType.Twitch, LoginCode, FVoidHandler::CreateWeakLambda(this, [this]()
{
// ログイン成功時の処理
}),
FErrorHandler::CreateWeakLambda(this, [](int32 ErrorCode, const FString& ErrorMessage)
{
// ログイン失敗時の処理
}));
// ログインページを閉じる(WebBrowser を非表示にする)
}
}
Twitch 認証における platform_token は Auth/Login Code です。
このサンプルコードをプロジェクトに追加したら、プロジェクトをコンパイルし、ビルドして実行します。これで完了です。
サンプルコードのテスト
以下に、サンプルコードが動作し、Twitch を使用してログインできていることを示すスクリーンショットを掲載します。

Unity のインゲームログイン統合
Twitch を AccelByte SDK でのサインインに統合することで、プレイヤーが Twitch の認証情報を使用してゲームにログインできるようになります。
Unity の準備と設定
AccelByte Gaming Services 用の Unity プロジェクト設定
プロジェクトで AccelByte SDK を正しく動作させるには、事前に AccelByte Admin Portal で作成した値を入力し、以下の各手順に従う必要があります。
- Game Client 設定用のファイルを AccelByteSDKConfig.json という名前で作成します。
- AccelByteSDKConfig.json ファイルをコピーし、Unity プロジェクトディレクトリの Assets/Resource ディレクトリに追加します。
- ゲームの情報に基づいて AccelByteSDKConfig.json ファイルを入力します。以下は JSON ファイルの例です。
{
"Default": {
"Namespace": "<Your Game Namespace>",
"UsePlayerPrefs": true,//Player Preferences を使用します
"EnableDebugLog": true,//デバッグログを有効にします
"DebugLogFilter": "Log",//デバッグログの種類
"BaseUrl": "https://prod.gamingservices.accelbyte.io",
"RedirectUri": "http://127.0.0.1",
"AppId": "<Your AppId>",
"PublisherNamespace": "<Your Publisher Namespace>"
}
}
- AccelByteServerSDKConfig.json という名前のファイルを作成し、Unity プロジェクトディレクトリの Assets/Resource ディレクトリに追加します。
- Game Server 設定として使用する以下のコードで AccelByteServerSDKConfig.json を更新します。以下は JSON ファイルの例です。
{
"Default": {
"Namespace": "<Your Game Namespace>",
"BaseUrl": "https://prod.gamingservices.accelbyte.io",
"RedirectUri": "http://127.0.0.1"
}
}
- AccelByteSDKOAuthConfig.json と AccelByteServerSDKOAuthConfig.json という2つのファイルを作成します。これらのファイルはどちらも、Unity プロジェクトディレクトリの Assets/Resources ディレクトリに追加します。これら2つの JSON ファイルの内容は、以下のようになります。
{
"Default": {
"ClientId": "<Your IAM Client ID>",
"ClientSecret": "<Your IAM Client Secret>"
}
}
Unity サンプルコードの実装
次のステップでは、以下のサンプルコードを使用してゲームに Twitch 認証方式を実装する方法を紹介します。
Twitch API を呼び出すためのカスタム SDK を作成する必要があります。以下がその例です。
[SerializeField] Button TwitchLoginButton;
[SerializeField] Text LoginStatus;
[SerializeField] private string clientId = "YOUR_TWITCH_CLIENTID";
[SerializeField] private string clientSecret = "YOUR_TWITCH_CLIENTSECRET";
[SerializeField] private string redirectUri = "YOUR_TWITCH_REDIRECTURI";
[SerializeField] private string authorizationUrl = "https://id.twitch.tv/oauth2/authorize";
[SerializeField] private string tokenUrl = "https://id.twitch.tv/oauth2/token";
string[] scopes = { "user:read:email" };
// AccelByte の Multi Registry 参照
private ApiClient apiClient;
private User user;
};
private const string authUrl =
private async void OnLoginClick()
{
TwitchLoginButton.interactable = false;
LoginStatus.text = "Logging in...";
string scopeStr = string.Join("%20", scopes);
string url = $"{authorizationUrl}?client_id={clientId}&redirect_uri={redirectUri}&response_type=code&scope={scopeStr}";
// デフォルトブラウザで URL を開く
Application.OpenURL(url);
// 認証コードを待機する
string authCode = await GetAuthorizationCode();
Debug.Log($"Twitch auth code: {authCode}");
LoginStatus.text = "Auth Code Received Login In";
}
private async Task<string> GetAuthorizationCode()
{
string authCode = "";
bool receivedAuthCode = false;
// ユーザーが認証プロセスを完了し、認証コードを受け取るまで待機する
float elapsedTime = 0;
float timeout = 10f; // ユーザーが認証プロセスを完了するまで待機する最大時間(秒)
while (!receivedAuthCode && elapsedTime < timeout)
{
authCode = await ListenForAuthorizationCode(redirectUri);
elapsedTime += 1f;
// 認証コードを受け取ったかどうかを確認する
if (!string.IsNullOrEmpty(authCode))
{
receivedAuthCode = true;
}
}
return authCode;
}
private async Task<string> ListenForAuthorizationCode(string redirectUri)
{
string authCode = "";
// リダイレクト URI を監視するための HttpListener インスタンスを作成する
var listener = new HttpListener();
listener.Prefixes.Add(redirectUri);
listener.Start();
// HttpListener でリクエストを受信するまで待機する
var context = await listener.GetContextAsync();
// リクエスト URI から認証コードを抽出する
var requestUri = context.Request.Url;
authCode = HttpUtility.ParseQueryString(requestUri.Query).Get("code");
// 認証コードを表示する HTML ページでリクエストに応答する
var response = context.Response;
var responseString = $"<html><body><h1>Authorization Code: {authCode}</h1></body></html>";
var buffer = Encoding.UTF8.GetBytes(responseString);
response.ContentLength64 = buffer.Length;
var output = response.OutputStream;
await output.WriteAsync(buffer, 0, buffer.Length);
// HttpListener を閉じて認証コードを返す
listener.Close();
return authCode;
}
}
以下のコードは、GetAuthSessionTicket メソッドで取得した認証トークンによるサードパーティプラットフォームログインを処理する AccelByte SDK の一部である LoginWithOtherPlatform を処理します。
var apiClient = AccelByteSDK.GetClientRegistry().GetApi();
var user = apiClient.GetUser();
Result < TokenData, OAuthError > loginResult = null;
user.LoginWithOtherPlatform(PlatformType.Twitch, AuthToken, (Result < TokenData, OAuthError > loginResult) => {
if (loginResult.IsError) {
//エラーが発生した場合、エラーと説明を取得してログに出力する
Debug.Log($ "Login failed : {loginResult.Error.error} Description : {loginResult.Error.error_description}");
//エラーがある場合、それを表示するようにステータステキストを設定する
LoginStatus.text = $ "Login failed : {loginResult.Error.error} Description : {loginResult.Error.error_description}";
} else {
Debug.Log($ "Login successful : {loginResult.Value}");
LoginStatus.text = $ "Success Login Twitch:{loginResult.Value.ToJsonString()}";
}
});
Twitch 認証における platform_token は Auth/Login Code です。
ログインハンドラースクリプトをプロジェクトに追加したら、プロジェクトをコンパイルします。
サンプルコードのテスト
これで、プロジェクトをビルドして実行できます。以下に、コードが動作し、Twitch とテストアプリを使用してログインできていることを示すスクリーンショットを掲載します。
