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

始める前に

アプリケーションで TikTok をソーシャル接続として使用するよう設定する前に、以下が必要です。
  1. TikTok 開発者アカウント。
  2. ユーザー認証に Auth0 を使用するアプリケーションを含む Auth0 アカウント。
  3. TikTok Application Review Process で必要な利用規約ページの URL。
  4. ローカル環境に Node.js と ngrok がインストールされていること。

​
TikTok を設定する

TikTok をアプリケーションのソーシャルログインとして使用できます。以下の手順で TikTok developer アカウントにアクセスし、設定してください。
  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 と Bundle ID を追加します。
  5. Product メニューで、Add Product を選択します。
  6. Login Kit を選択します。
  7. 続いて、TikTok API を選択します。
  8. Product セクションで、Login Kit に利用規約ページの URL、プライバシーポリシーページの URL、リダイレクトドメインを追加します。リダイレクトドメインは、Dashboard > Applications > Applications の Settings タブにある Auth0 ドメインです。例: 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. New カスタムのソーシャル接続 を作成するため、以下を入力します。
    1. 名前: TikTok
    2. 認可 URL: TikTok の認可 URL https://www.tiktok.com/auth/authorize/
    3. トークンURL: 最終的にここはプロキシになります。プレースホルダー URL として https://example.com を使用します。
    4. スコープ: user.info.basic
    5. クライアントID: TikTok から割り当てられた Client key
    6. クライアントシークレット: TikTok から割り当てられた Client secret
    7. 用途: この接続を認証、Token Vault の Connected Accounts、またはその両方で有効にします。詳しくは、User authentication vs Connected Accounts を参照してください。
  5. Fetch User Profile Script を設定し、TikTok’s user_info endpoint からプロフィール情報を取得します。属性を Auth0 の Normalized User Profile にマッピングします。
    Auth0 で必須なのは user_id attribute のみで、これは 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 をクリックします。
  2. Dashboard > Applications > Applications で、TikTok 接続で使用するアプリケーションを開きます。
  3. Connections タブで、TikTok オプションを有効にします。

​
Management API を使用して TikTok にカスタムパラメーターを渡す

TikTok では client_id ではなく client_key パラメーターを使用するため、認証時に client_key パラメーターを渡すには を使用する必要があります。 Management API を使用するには、 を生成する必要があります。
  1. Auth0 の Dashboard > Applications > APIs に移動し、Auth0 Management API を選択します。
  2. API Explorer タブを選択します。
  3. Create & Authorize Test Application. を選択します。
  4. 表示されたトークンをコピーします。
  5. Auth0 Management API Explorer に移動します。シークレットウィンドウを開く必要がある場合があります。
  6. 左上にある Set API Token を選択します。
    TikTok 用の Set API Token のスクリーンショット
  7. トークンを貼り付けて、Set Token を選択します。
これで、Management API を使用して Auth0 テナントを設定できるようになります。

​
client_key フィールドを設定する

  1. Get a connection メソッドを使用して、options オブジェクトの値を取得します。以下はレスポンスオブジェクトのサンプルです。
{
  "options": {
    "client_id": "",
    "client_secret": "",
    "scope": "user.info.basic"
  }
}
  1. client_key フィールドを含む upstream_params オブジェクトを追加します。
{
  "options": {
    "client_id": "",
    "client_secret": "",
    "scope": "user.info.basic",
    "upstream_params": { 
      "client_key": { "value": "<Client Key from TikTok>" } 
    }
  }
}
  1. options オブジェクトをリクエストボディとして、Update a connection メソッドを使用します。Auth0 は TikTok の認可エンドポイント に client_key=<value> パラメーターを送信します。

​
アクセストークンのリクエスト

Authentication API の /token エンドポイントに対するリクエストにカスタムパラメーターを渡して、アクセストークンまたは を取得することはできません。リクエストは にプロキシし、実行環境内のプロキシエンドポイントで client_key パラメーターをプログラムから追加する必要があります。

​
TikTok統合プロキシをデプロイ

  1. GitHub リポジトリのサンプルコードを使用し、README の手順に従って依存関係をインストールして開発サーバーを起動します。
    1. サンプルサーバーには、POST ルート /proxy/token が 1 つあります。サーバーは 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 でログインできるようになります。