Set up Snapchat as an Identity Provider

Last updated on November 23, 2023

概要​

このガイドは、検証済みの Snapchat デベロッパーが Snapchat アカウントを AccelByte Gaming Services (AGS) に接続することを支援するためのものです。場合によっては、ここに記載されていない Snapchat サービス内の追加機能を設定する必要があります。Snapchat サービスの設定の詳細については、Snapchat 担当者にお問い合わせいただき、また直接 Snapchat のドキュメントを確認されることをお勧めします。

AccelByte デベロッパーパートナーマネージャーからリクエストできる機密ガイド資料をご用意しています。

目標​

AccelByte Game SDK を使用して、ゲームの Snapchat 認証方法を有効化する。

前提条件​

  • Snapchat デベロッパーアカウントを所有している必要があります。
  • デベロッパーアカウント下の組織を所有している必要があります。
  • Unreal Engine を使用している場合は、UE バージョン 4.27 または 5.0 をインストールする必要があります。
  • 認証を設定し、権限を管理するための AccelByte 管理者ポータルアカウントを所有しておきます。
  • まだ設定していない場合は、プレイヤーポータルとランチャーのパブリッシャーの名前空間を設定します。次に、ゲームに対し、ゲームの名前空間を設定します。
  • プレイヤーポータルを所有しておきます。
  • AccelByte Game SDK をインポートしたUnityまたはUnrealゲームプロジェクトを所有しておきます。
  • 最新版の AccelByte Unity SDK またはUnreal SDK を所有しておきます。
  • AccelByte IAM クライアントに精通しておきます。

Snapchat Kit アプリの設定​

Snap Kit アプリの作成​

Snapchat デベロッパーアカウントで Snap Kit アプリを作成します。最初のアプリの設定ガイド の指示に従ってください。

Snap Login Kit をアクティベートする​

Snapchat Kit アプリで Snap Login Kit をアクティベートし、OAuth の［Redirect URI (リダイレクト URI)］にドメイン URL (たとえば、https://demo.accelbyte.io) を入力します。Login Kit の詳細については、Login Kit の概要 を参照してください。

Snapchat のゲームログインの設定​

ゲームでの Snapchat ログインを設定するには、次の手順を使用します。これでプレイヤーは Snapchat アカウントを使用してゲームにサインインできます。

  1. AccelByte 管理者ポータルにログインし、［Game Namespace (ゲームの名前空間)］を選択し、［User Management (ユーザー管理)］サイドバーの下にある［Login Method (ログイン方法)］をクリックし、右側の［+ Add New (+新規を追加)］ボタンをクリックします。 AccelByte Admin Portal Login

  2. ［Snapchat］ボタンをクリックします。 Snapchat

  3. ［Client ID (クライアントID)］に Snap Kit クライアント ID を入力し、［Client Secret (クライアントの秘密)］に Snap Kit のクライアントの秘密を入力し、［Redirect URI (リダイレクト URI)］に Snapchat Login Kit OAuth リダイレクト URI を入力します。 Snapchat Create Configuration

  4. 詳細ページにリダイレクトされます。その時点でアクティベートすると使用できます。 。 Activate Snapchat

IAM クライアントの作成​

IAM クライアントとは、ターゲットプラットフォームでリリースしたいゲームクライアントのことです。IAM クライアントを使用すると、ゲームクライアントは適切な権限を使用して、保護されている AGS リソースへのアクセスを要求できます。

特定の SDK プラットフォーム(XBox/Steam/PlayStation など)でゲーム用の IAM クライアントを既にお持ちの場合は、新しい IAM クライアントを作成する必要はありません。Snapchat はゲームをビルドするためのプラットフォームではないため、既存の IAM クライアントを使用できます。IAM クライアントの詳細については、こちらのドキュメントhttps://docs.accelbyte.io/guides/access/iam-client.htmlを参照してください。

  1. ［Platform Configurations (プラットフォーム設定)］に移動し、次に［IAM Clients (IAM クライアント)］に移動します。

    IAM clients

  2. ［+ Create New (+新規作成)］ボタンをクリックして、新しい IAM クライアントを作成します。

    Create IAM client

    a. ［Client Type (クライアントタイプ)］には［Confidential (機密)］と入力します。［Confidential type (機密タイプ)］を使用することを強くお勧めします。なぜなら、AccelByte Gaming Services リソースにアクセスするために、場合によっては後でこの IAM クライアントにいくつかの権限を追加する必要があり、その場合［Public (公開)］タイプを使用していると適切なセキュリティが利用できないためです。

    b. ［Secret (秘密)］を入力します。許容される形式で秘密を自分で入力するか、［Generate Client Secret (クライアントの秘密を作成)］をクリックすると、秘密鍵を生成できます。

    この作成ステップの後、クライアントの秘密は表示されません。必ずその値をコピーして保存してください。ゲームの設定時に必要になります。

    c. ［Client Name (クライアント名)］を入力します。<game name> <target platform>といった特定の名前を名付けることができます。

    d. 特定のゲームの名前空間を選択します。

    e. ［Scopes (スコープ)］はデフォルトのままでかまいません。

    f. ［Redirect URI (リダイレクト URI)］は、ゲームクライアントビルド用なので、http://127.0.0.1を入力します。

    g. ［Target Audience (ターゲットオーディエンス)］は空白のままでかまいません。

    h. ［BASE URI (ベース URI)］も空白のままでかまいません。

    i. IAM クライアントは［Description (説明)］フィールドに記述できます。

    j. SDK 設定の［Platform Input (プラットフォーム入力)］とは、ゲームをビルドするためのターゲットプラットフォームを意味します。

    k. ［Advanced Configuration (高度な設定)］は、二要素認証や有効期限の上書きなどの追加機能で構成されています。これはゲームクライアントビルド用なので、デフォルト/無効のままでかまいません。

    IAM client configuration

    IAM client configuration

    注記

    クライアント ID は既に生成されていて、コピーできます。後ほどゲームをビルドする際に、SDK 設定でクライアント ID を使用できます。

  3. ［Client Detail (クライアントの詳細)］ページにリダイレクトされます。必要に応じて権限を設定してください。権限の詳細については、IAM クライアントの権限についてのドキュメントを参照してください。

    IAM Client detail

    IAM Client detail

ゲーム内ログイン手順​

ゲームエンジンごとに設定が異なります。利用可能なタブからゲームエンジンを選択してください。

Unrealゲーム内ログインの統合​

AccelByte SDK でサインインするように Snapchat ゲームを統合すると、プレイヤーは Snapchat 認証情報を使用してゲームにログインできます。

Unrealの準備と設定​

Snapchat は UE4 の統合をサポートしていません。したがって、ウェブログインを使用し、SnapChat Auth からログインコードをトークンとして取得して、AccelByte にログインするよう実装します。同様に Snapchat アカウントも AccelByte アカウントにリンクされ、デフォルトではヘッドレスアカウントになります。

参照：[https://docs.snap.com/snap-kit/login-kit/Tutorials/web] (https://docs.snap.com/snap-kit/login-kit/Tutorials/web)

依存関係の追加​

最初に 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" });

}

AccelbyteUe4Sdk を<YourProject>.Target.csと<YourProjectEditor>.Target.csの内部に追加します。

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" } );
}

Snapchat のUnreal Engine プロジェクトの設定​

DefaultEngine.ini ファイル内で、Accelbyte 認証情報を DefaultEngine.ini のこの部分に追加してください。

[/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://demo.accelbyte.io"
IamServerUrl="https://demo.accelbyte.io/iam"
PlatformServerUrl="https://demo.accelbyte.io/platform"

[SnapChatConfig]
SnapChatClientId=<SnapChatClientId>

Unrealサンプルコードの実装​

次のステップとして、以下のサンプルコードを使用してゲームの Snapchat 認証方法を実装する方法を説明します。

  1. BluePrint で WebBrowser アイテムをログインコンテナとして作成します。

  2. ログイン Snapchat URL：https://accounts.snapchat.com/accounts/oauth2/authを読み込みます。

    以下の認証パラメータを追加します。

    1. redirect_uri：ログインが完了したときの RedirectURL。リダイレクトすると、BaseURL がゲームに入力した値に戻るからです (FRegistry::Settings.BaseUrl)。また、BaseUrl の値を Snapchat デベロッパーポータルのリダイレクト URI 設定に入力して、ホワイトリストに登録します。
    2. response_type：値を "code" とします。
    3. scope：値を権限スコープとします。 \
https://auth.snapchat.com/oauth2/api/user.display_nameユーザーの Snapchat 表示名へのアクセスを許可します
https://auth.snapchat.com/oauth2/api/user.bitmoji.avatarユーザーの Bitmoji アバターへのアクセスを許可します。これはユーザーが切り替え可能です
https://auth.snapchat.com/oauth2/api/user.external_idユーザーの外部 ID へのアクセスを許可します。これを使ってユーザーをアプリケーションにオンボードできます
void UAccelByteAuth::SnapChatLogin()
{
    FString SnapChatClientId;
    GConfig->GetString(TEXT("SnapChatConfig"), TEXT("SnapChatClientId"), SnapChatClientId, GEngineIni);
    FString RedirectUri = FRegistry::Settings.BaseUrl;
    FString Scope = TEXT("https://auth.snapchat.com/oauth2/api/user.display_name https://auth.snapchat.com/oauth2/api/user.bitmoji.avatar https://auth.snapchat.com/oauth2/api/user.external_id");

    FString Url = FString::Printf(TEXT("https://accounts.snapchat.com/accounts/oauth2/auth?client_id=%s&redirect_uri=%s&response_type=%s&scope=%s"),
        *FGenericPlatformHttp::UrlEncode(SnapChatClientId),
        *FGenericPlatformHttp::UrlEncode(RedirectUri),
        TEXT("code"),
        *FGenericPlatformHttp::UrlEncode(Scope));

    WBrowser_SnapChatAuth->LoadURL(Url);
    WBrowser_SnapChatAuth->OnUrlChanged.AddUniqueDynamic(this, &UAccelByteAuth::AccelByteLoginWithSnapChat);
}

void UAccelByteAuth::AccelByteLoginWithSnapChat(const FText& NewUrl)
{
    FString Url = NewUrl.ToString();
    FString RedirectUri = FRegistry::Settings.BaseUrl;
    FString LoginCode = TEXT("");

    if (Url.Contains(RedirectUri))
    {
        LoginCode = FGenericPlatformHttp::GetUrlParameter(Url, TEXT("code")).GetValue();
    }

    if (!LoginCode.IsEmpty()) 
    {
    FRegistry::User.LoginWithOtherPlatform(EAccelBytePlatformType::SnapChat, LoginCode, FVoidHandler::CreateWeakLambda(this, [this]()
        {
        // Handle Success Login
        }), 
FCustomErrorHandler::CreateWeakLambda(this, [](int32 ErrorCode, const FString& ErrorMessage, const FJsonObject& ErrorJson)
        {
            // Handle Error Login
        }));

    // Close Login Page (Hide WebBrowser)
    }
}

このサンプルコードをプロジェクトに追加したら、プロジェクトをコンパイル、ビルド、実行します。以上です。

サンプルコードのテスト​

以下の画像は、Snapchat アカウントを使用して当社のテストアプリに正常にログインしたことを示しています。 Unreal Code Testing

に最終更新

On this page