> ## Documentation Index
> Fetch the complete documentation index at: https://auth0.com/llms.txt
> Use this file to discover all available pages before exploring further.
# TikTokのカスタムソーシャル接続を作成する
> TikTokを使用してカスタムソーシャル接続を作成する方法について説明します。
TikTokがソーシャル接続として使えるようにアプリケーションを構成するには、まず以下が必要になります。
1. [TikTokの開発者アカウント](https://developer.tiktok.com/)
2. ユーザー認証にAuth0を使うアプリケーションのあるAuth0アカウント
3. [TikTokのアプリケーションレビュープロセス](https://developers.tiktok.com/doc/getting-started-faq/)に使う独自の利用規約ページのURL
4. ローカル環境にインストール済みの[Node.js](https://nodejs.org/en/)と[ngrok](https://ngrok.com/)
## 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（アプリケーション）］](http://manage.auth0.com/#/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（ソーシャル）］](http://manage.auth0.com/#/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（ユーザープロファイルスクリプトの取得）］](https://auth0.com/docs/authenticate/identity-providers/social-identity-providers/oauth2#fetch-user-profile-script)を構成して、[TikTokのuser\_info endpoint](https://developers.tiktok.com/doc/tiktok-api-v2-get-user-info/)からプロファイル情報を取得できるようにします。属性をAuth0の正規化ユーザープロファイルにマッピングします。
Auth0では、`user_id`属性のみが求められます。これは、TikTokの`union_id`に対応します。
```javascript lines theme={null}
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));
}
```
6. **［Create（作成）］** をクリックします。
7.[［Dashboard］>［Applications（アプリケーション）］>［Applications（アプリケーション）］](http://manage.auth0.com/#/applications)に移動して、TikTok接続に使用したいアプリケーションを選択します。
8. **［Connections（接続）］** タブでTikTokトグルを有効にします。
## Management APIでカスタムパラメーターをTikTokに渡す
TikTokは`client_id`ではなく、`client_key`パラメーターを使用するため、認証時にはManagement APIを使って`client_key`パラメーターを渡す必要があります。
Management APIを使用するには、アクセストークンを生成する必要があります。
1. [［Auth0 Dashboard］>［Applications（アプリケーション）］>［APIs（API）］](http://manage.auth0.com/#/apis)に移動して、 **［Auth0 Management API］** を選択します。
2. **［API Explorer］** タブを選択します。
3. **［Create & Authorize Test Application（テストアプリケーションを作成して認可する）］** を選択します。
4. 提供されたトークンをコピーします。
5. [Auth0 Management API Explorer](https://auth0.com/docs/api/management/v2)に移動します。プライベートウィンドウを開く必要があるかもしれません。
6. 右上にある **［Set API Token（APIトークンの設定）］** をクリックします。
7. トークンを貼り付けて、 **［Set Token（トークンの設定）］** を選択します。
これで、Management APIを使用して、Auth0テナントが構成できるようになります。
### client\_keyフィールドを構成する
1. [接続取得](https://auth0.com/docs/api/management/v2#!/Connections/get_connections_by_id)メソッドを使用して、optionsオブジェクトの値を取得します。以下は、応答オブジェクトの例です。
```json lines theme={null}
{
"options": {
"client_id": "",
"client_secret": "",
"scope": "user.info.basic"
}
}
```
2.`upstream_params`オブジェクトに`client_key`フィールドを指定して追加します。
```json lines theme={null}
{
"options": {
"client_id": "",
"client_secret": "",
"scope": "user.info.basic",
"upstream_params": {
"client_key": { "value": "" }
}
}
}
```
3.[接続更新](https://auth0.com/docs/api/management/v2#!/Connections/patch_connections_by_id)メソッドの本文に`options`オブジェクトを含めて使用します。Auth0が`client_key=`パラメーターを[TikTokの認可エンドポイント](https://developers.tiktok.com/doc/login-kit-web/)に送信します。
## アクセストークンを要求する
Authentication APIの[`/token`](https://developers.tiktok.com/doc/login-kit-manage-user-access-tokens/)エンドポイントに要求を送信して、アクセストークンまたはIDトークンを取得する際には、カスタムパラメーターは渡せません。トークンエンドポイントへの要求を代理し、環境内のプロキシエンドポイントを使ってプログラムで`client_key`パラメーターを追加する必要があります。
### TikTokの統合プロキシをデプロイする
1. [GitHub](https://github.com/tylerkeesling/tiktok-access-token-proxy)リポジトリにあるサンプルコードを使ってREADMEの指示に従い、依存関係をインストールしてから、開発サーバーを起動します。
1. 例のサーバーには、1つの`POST`経路として`/proxy/token`があります。サーバーは`http://localhost:3333`で実行されています。
2. TikTok Developerのセットアップで使用するプロキシエンドポイントをコピーします。プロキシエンドポイントは次のようになります：[`https://405a-104-129-13b-250.ngrok.io/proxy/token`](https://405a-104-129-13b-250.ngrok.io/proxy/token)
3. TikTok Developerで、ソーシャル接続の構成に戻ります。`https://example.com`に設定したトークンURLを更新し、プロキシURLを入力します。
構成を保存したら、ユーザーがTikTokを使ってログインできるようになります。