TikTokのカスタムソーシャル接続を作成する

Before you start

TikTokがソーシャル接続として使えるようにアプリケーションを構成するには、まず以下が必要になります。

TikTokの開発者アカウント
ユーザー認証にAuth0を使うアプリケーションのあるAuth0アカウント
TikTokのアプリケーションレビュープロセスに使う独自の利用規約ページのURL
ローカル環境にインストール済みのNode.jsとngrok

TikTokを構成する

アプリケーションのソーシャルログインとして、TikTokを使用することができます。TikTokの開発者アカウントにアクセスして構成するには、以下を行います。

TikTok Developerで［Manage apps（アプリ管理）］を選択します。
［Connect an app（アプリを接続）］を選択します。
［Configuration（構成）］セクションに、アプリケーションのアイコン、アプリケーション名と説明を追加します。
［Platforms（プラットフォーム）］で、アプリケーションの種類を選択します。
1. Webアプリケーションの場合には、有効なURLを追加します。
2. Androidの場合には、Androidのパッケージ名、Play StoreのURLとアプリケーションの署名を追加します。
3. iOSの場合には、App StoreのURLとバンドルIDを追加します。
［Product（プロダクト）］メニューから［Add Product（プロダクトの追加］を選択します。
［Login Kit（ログインキット）］を選択します。
［TikTok API］を選択します。
［Product（プロダクト）］セクションに、サービス利用規約ページのURL、プライバシーポリシーページのURLとログインキットへのリダイレクトドメインを追加します。リダイレクトドメインであるAuth0ドメインは、［Dashboard］>［Applications（アプリケーション）］>［Applications（アプリケーション）］に移動して、［Settings（設定）］タブで確認できます。例：dev-test-1.us.auth0.com
［Save Changes（変更の保存）］を選択します。そして、［Submit for review（審査に提出）］を選択します。
アプリケーションのステータスが［Staging（ステージング）］から［Production（運用）］に変わるまで待ちます。TikTokがアプリケーションを審査して、ステータスが更新されるまでには数時間かかることがあります。

Auth0を構成する

カスタム接続を作成して、TikTokインスタンスをAuth0と関連付ける必要があります。

［Auth0 Dashboard］>［Authentication（認証）］>［Social（ソーシャル）］に移動します。
［Create Connection（接続を作成する）］を選択します。
ページの最後までスクロールし、［Create Custom（カスタムの作成）］をクリックします。
以下を入力して、新しいカスタムソーシャル接続を作成します。
1. Name（名前）：TikTok
2. Authorization URL（認可URL）：TikTokのAuthorization URL https://www.tiktok.com/auth/authorize/
3. Token URL（トークンURL）：最終的にはこれが使用するプロキシになります。Use a placeholder URL（プレースホルダーURLを使用する）：https://example.com
4. スコープ：user.info.basic
5. クライアントID：TikTokが割り当てるクライアントキー
6. クライアントシークレット：TikTokが割り当てるクライアントシークレット
［Fetch User Profile Script（ユーザープロファイルスクリプトの取得）］を構成して、TikTokのuser_info endpointからプロファイル情報を取得できるようにします。属性をAuth0の正規化ユーザープロファイルにマッピングします。
Auth0では、user_id属性のみが求められます。これは、TikTokのunion_idに対応します。

function fetchUserProfile(accessToken, context, cb) {
  const axios = require('axios@0.22.0');
  const userInfoEndpoint = 'https://open.tiktokapis.com/v2/user/info?fields=union_id';
  const headers = { 'Authorization': 'Bearer ' + accessToken };

  axios
    .get(userInfoEndpoint, { headers })
    .then(res => {
      if (res.status !== 200) {
        return cb(new Error(res.data));
      }

      const profile = {
        user_id: res.data.user.union_id,
      };

      cb(null, profile);
    })
    .catch(err => cb(err));
}

Was this helpful?

6.［Create（作成）］をクリックします。

7.［Dashboard］>［Applications（アプリケーション）］>［Applications（アプリケーション）］に移動して、TikTok接続に使用したいアプリケーションを選択します。

8.［Connections（接続）］タブでTikTokトグルを有効にします。

Management APIでカスタムパラメーターをTikTokに渡す

TikTokはclient_idではなく、client_keyパラメーターを使用するため、認証時にはManagement APIを使ってclient_keyパラメーターを渡す必要があります。

Management APIを使用するには、アクセストークンを生成する必要があります。

［Auth0 Dashboard］>［Applications（アプリケーション）］>［APIs（API）］に移動して、［Auth0 Management API］を選択します。
［API Explorer］タブを選択します。
［Create & Authorize Test Application（テストアプリケーションを作成して認可する）］を選択します。
提供されたトークンをコピーします。
Auth0 Management API Explorerに移動します。プライベートウィンドウを開く必要があるかもしれません。
右上にある［Set API Token（APIトークンの設定）］をクリックします。
トークンを貼り付けて、［Set Token（トークンの設定）］を選択します。

これで、Management APIを使用して、Auth0テナントが構成できるようになります。

client_keyフィールドを構成する

接続取得メソッドを使用して、optionsオブジェクトの値を取得します。以下は、応答オブジェクトの例です。

{
  "options": {
    "client_id": "",
    "client_secret": "",
    "scope": "user.info.basic"
  }
}

Was this helpful?

2.upstream_paramsオブジェクトにclient_keyフィールドを指定して追加します。

{
  "options": {
    "client_id": "",
    "client_secret": "",
    "scope": "user.info.basic",
    "upstream_params": { 
      "client_key": { "value": "<Client Key from TikTok>" } 
    }
  }
}

Was this helpful?

3.接続更新メソッドの本文にoptionsオブジェクトを含めて使用します。Auth0がclient_key=<value>パラメーターをTikTokの認可エンドポイントに送信します。

アクセストークンを要求する

Authentication APIの/tokenエンドポイントに要求を送信して、アクセストークンまたはIDトークンを取得する際には、カスタムパラメーターは渡せません。トークンエンドポイントへの要求を代理し、環境内のプロキシエンドポイントを使ってプログラムでclient_keyパラメーターを追加する必要があります。

TikTokの統合プロキシをデプロイする

GitHubリポジトリにあるサンプルコードを使ってREADMEの指示に従い、依存関係をインストールしてから、開発サーバーを起動します。
1. 例のサーバーには、1つのPOST経路として/proxy/tokenがあります。サーバーはhttp://localhost:3333で実行されています。
TikTok Developerのセットアップで使用するプロキシエンドポイントをコピーします。プロキシエンドポイントは次のようになります：https://405a-104-129-13b-250.ngrok.io/proxy/token
TikTok Developerで、ソーシャル接続の構成に戻ります。https://example.comに設定したトークンURLを更新し、プロキシURLを入力します。

構成を保存したら、ユーザーがTikTokを使ってログインできるようになります。