メインコンテンツへスキップ

始める前に

TikTokがソーシャル接続として使えるようにアプリケーションを構成するには、まず以下が必要になります。
  1. TikTokの開発者アカウント
  2. ユーザー認証にAuth0を使うアプリケーションのあるAuth0アカウント
  3. TikTokのアプリケーションレビュープロセスに使う独自の利用規約ページのURL
  4. ローカル環境にインストール済みのNode.jsとngrok

​
TikTokを構成する

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

​
Auth0を構成する

カスタム接続を作成して、TikTokインスタンスをAuth0と関連付ける必要があります。
  1. ［Auth0 Dashboard］>［Authentication（認証）］>［Social（ソーシャル）］に移動します。
  2. ［Create Connection（接続を作成する）］ を選択します。
  3. ページの最後までスクロールし、 ［Create Custom（カスタムの作成）］ をクリックします。
  4. 以下を入力して、 新しいカスタムソーシャル接続 を作成します。
    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が割り当てるクライアントシークレット
  5. ［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));
}
  1. ［Create（作成）］ をクリックします。
7.［Dashboard］>［Applications（アプリケーション）］>［Applications（アプリケーション）］に移動して、TikTok接続に使用したいアプリケーションを選択します。
  1. ［Connections（接続）］ タブでTikTokトグルを有効にします。

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

TikTokはclient_idではなく、client_keyパラメーターを使用するため、認証時にはを使ってclient_keyパラメーターを渡す必要があります。 Management APIを使用するには、アクセストークンを生成する必要があります。
  1. ［Auth0 Dashboard］>［Applications（アプリケーション）］>［APIs（API）］に移動して、 ［Auth0 Management API］ を選択します。
  2. ［API Explorer］ タブを選択します。
  3. ［Create & Authorize Test Application（テストアプリケーションを作成して認可する）］ を選択します。
  4. 提供されたトークンをコピーします。
  5. Auth0 Management API Explorerに移動します。プライベートウィンドウを開く必要があるかもしれません。
  6. 右上にある ［Set API Token（APIトークンの設定）］ をクリックします。
    Screenshot of Set API Token for TikTok
  7. トークンを貼り付けて、 ［Set Token（トークンの設定）］ を選択します。
これで、Management APIを使用して、Auth0テナントが構成できるようになります。

​
client_keyフィールドを構成する

  1. 接続取得メソッドを使用して、optionsオブジェクトの値を取得します。以下は、応答オブジェクトの例です。
{
  "options": {
    "client_id": "",
    "client_secret": "",
    "scope": "user.info.basic"
  }
}
2.upstream_paramsオブジェクトにclient_keyフィールドを指定して追加します。 
{
  "options": {
    "client_id": "",
    "client_secret": "",
    "scope": "user.info.basic",
    "upstream_params": { 
      "client_key": { "value": "<Client Key from TikTok>" } 
    }
  }
}
3.接続更新メソッドの本文にoptionsオブジェクトを含めて使用します。Auth0がclient_key=<value>パラメーターをTikTokの認可エンドポイントに送信します。

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

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

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

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