> ## Documentation Index
> Fetch the complete documentation index at: https://www.ayrshare.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# JWT 生成の概要

> user profile 向けにソーシャルネットワーク連携用の URL を生成します。

export const PlansAvailable = ({plans = [], maxPackRequired}) => {
  let displayPlans = plans;
  if (plans && plans.length === 1) {
    const lowerCasePlan = plans[0].toLowerCase();
    if (lowerCasePlan === "business") {
      displayPlans = ["Launch", "Business", "Enterprise"];
    } else if (lowerCasePlan === "premium") {
      displayPlans = ["Premium", "Launch", "Business", "Enterprise"];
    }
  }
  return <Note>
Available on {displayPlans.length === 1 ? "the " : ""}
{displayPlans.join(", ").replace(/\b\w/g, l => l.toUpperCase())}{" "}
{displayPlans.length > 1 ? "plans" : "plan"}.

{maxPackRequired && <span onClick={() => window.open('https://www.ayrshare.com/docs/additional/maxpack', '_self')} className="flex items-center mt-2 cursor-pointer">
 <span className="px-1.5 py-0.5 rounded text-sm" style={{
    backgroundColor: '#C264B6',
    color: 'white',
    fontSize: '12px'
  }}>
   Max Pack required
 </span>
</span>}
</Note>;
};

<PlansAvailable plans={["business"]} maxPackRequired={false} />

[generateJWT エンドポイント](/apis/profiles/generate-jwt) は、単一の User Profile に対してソーシャルネットワーク連携用の URL を生成します。
詳しくは [Business Plan and Launch Plan API integration](/multiple-users/api-integration-business) を参照してください。

## プロファイルの切り替え

異なるプロファイルセッション間で切り替える(例えば複数プロファイルでテストする)には、まず現在のプロファイルをログアウトする必要があります。適切にプロファイル切り替えを扱う方法については、[Automatic Logout of a Profile Session](/multiple-users/api-integration-business#automatic-logout-of-a-profile-session) を参照してください。

## Private Key と Profile Key

### Private Key の入手先

Private Key ファイル(private.key)とサンプル Postman JSON ファイルは、オンボーディング時に受け取る [Integration Package](/multiple-users/api-integration-business#integration-package) に含まれています。
Integration Package は、Ayrshare 開発者ダッシュボードの API ページ -> Integration Package からも取得できます。

### Private Key の使用方法

Private Key の private.key はファイルから読み取り、`privateKey` フィールドに文字列として送信することをお勧めします。これにより、改行を含むすべての文字を保持できます。
Private Key は正確でなければならず、改行を含むすべての文字を保持する必要があります。
コードにキーを直接貼り付ける場合は、改行を手動で `\n` 文字に置き換えるか、文字列を URL エンコードする必要があるかもしれません。

コードにキーを直接貼り付けると、しばしば問題が発生します。

## JSON Web Token を生成する

JSON Web Token (JWT) を生成する方法を説明する 1 分の動画:

<div class="video-container">
  <iframe width="380" height="200" src="https://www.youtube.com/embed/JI232HBWHWc" title="Generate a JSON Web Token" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" />
</div>

JWT URL は **5 分間** 有効です。5 分経過後は、新しい JWT URL を生成する必要があります。
追加オプションについては、[Max Pack `expiresIn`](/apis/profiles/generate-jwt-overview#jwt-expires-in) を参照してください。

## JWT URL を開く

JWT URL は、新しいブラウザタブ、ブラウザウィンドウ、または iOS 上の View Controller で開きます。

新しいウィンドウやタブの[閉じる、またはリダイレクトする動作](/multiple-users/api-integration-business#opening-and-closing-the-social-linking-url) を制御することができます。

<Note>
  ソーシャルネットワークは、URL を iFrame で開いたり、承認済みのパートナー オリジンドメイン profile.ayrshare.com を
  難読化することを許可していません。
</Note>

## JWT URL を検証する

`generateJWT` エンドポイントは、デフォルトでは返された JWT URL を検証しません。
例えば、破損した Private Key が `generateJWT` に渡されても URL は返され、その URL は 401 エラーになります。

`generateJWT` のボディパラメータに `verify: true` を含めることで、返された JWT URL を検証できます。JWT URL を検証できない場合は、エラーが返されます。例えば、Private Key の文字が 1 文字削除されていた場合、以下が返されます:

```json JWT Error theme={"system"}
{
  "action": "JWT",
  "status": "error",
  "code": 189,
  "message": "Error generating JWT. Check the sent parameters, such as the privateKey has no extra tabs, spaces, or newlines. Also the entire private.key file including -----BEGIN RSA PRIVATE KEY----- and -----END RSA PRIVATE KEY-----. Error: secretOrPrivateKey must be an asymmetric key when using RS256"
}
```

検証には追加の処理時間がかかるため、`verify: true` は本番以外の環境でのみ使用することを推奨します。

## Postman でのテスト

まず [Postman](/testing/postman) で JWT URL の作成をテストすることを **推奨します**。
ダッシュボードの Primary Profile API Key ページにある Integration Package には、JWT URL 作成を検証するために必要なすべてが含まれた Postman 設定 JSON のサンプルファイルが含まれています。
設定ファイルを Postman にインポートし、`profileKey` の *body* フィールドにテストしたいプロファイル(Ayrshare 開発者ダッシュボードで切り替えることで取得できます)の Profile Key を入力し、青い *Send* ボタンをクリックするだけです。
その他の必須フィールドはすでにすべて入力済みです。

[Postman からコードを生成](/testing/postman#auto-generate-api-code-with-postman) することも、ディレクトリやデータベースからキーファイルを読み取ることもできます。

## Instagram のリンク方式

Instagram アカウントは [2 つの方法](/dashboard/connect-social-accounts/instagram) でリンクできます: **Instagram Login** を用いて直接リンクする方法と、**接続された Facebook Page** を経由する方法です。
ユーザーがソーシャルリンクページで Instagram ボタンをクリックしたときにどちらのフローが開始されるかは、通常、ダッシュボードのアカウント全体の [Instagram Login](/multiple-users/manage-user-profiles#instagram-login) 設定によって制御されます。

[generateJWT エンドポイント](/apis/profiles/generate-jwt) の `instagramLinkMethod` ボディパラメータを使用すると、単一のリンク URL に対してその設定を上書きできます:

| 値           | Instagram のリンクフロー                             |
| ----------- | --------------------------------------------- |
| `instagram` | Instagram Login による直接リンク。Facebook Page は不要です。 |
| `facebook`  | 接続された Facebook Page 経由でのリンク。                  |

例えば、アカウントのデフォルトが Facebook Page リンクの場合、このリンクセッションだけ強制的に Instagram Login を直接使うようにするには次のようにします:

```json Instagram Link Method theme={"system"}
{
  "instagramLinkMethod": "instagram"
}
```

生成された JWT URL にはこの上書きが含まれ、リンクページで Instagram ボタンをクリックすると、そのセッションの期間中(Instagram/Facebook の認可リダイレクトを跨いでも)要求されたフローが開始されます。

いくつかの注意点:

* この上書きは、返された URL から開かれるリンクページにのみ適用されます。アカウント全体の Instagram Login 設定を変更したり、他のリンクセッションに影響を与えたりしません。
* `instagramLinkMethod` が省略された場合、リンクページはこれまでどおりアカウント全体の設定を使用します。
* 無効な値が送信されると、有効な値(`instagram`、`facebook`)を列挙した `400` エラーが返されます。
* 上書きを選択する前に、2 つのフロー間の[機能の違い](/multiple-users/manage-user-profiles#direct-instagram-login-vs-facebook-page-authentication) を確認してください。ハッシュタグ検索やコラボレーションなど、一部の Instagram 機能は Facebook Page 認証のみで利用可能です。

## JWT の有効期限(Expires In)

<PlansAvailable plans={["business"]} maxPackRequired />

デフォルトの 5 分より長い JWT タイムアウトが必要な場合は、`expiresIn` フィールドを含めます。

例えば、JWT URL を 30 分間有効にするには、以下の JSON を送信します:

```json JWT Expires In theme={"system"}
{
  "expiresIn": 30
}
```

これにより、ユーザーがアプリやプラットフォームにアクセスする必要なく、[リンクをメール送信](/apis/profiles/generate-jwt-overview#connect-accounts-email) することができます。
一般的なユースケースは、ユーザーがソーシャルアカウントを再接続する必要がある場合に、プラットフォームに移動せずに JWT リンクをメールで送信して、直接ソーシャルアカウントを再リンクできるようにすることです。

<Warning>
  JWT を有効に保つ期間について、ビジネスのセキュリティチームと必ず確認してください。
  有効期限を長くすると、権限のない者がリンクにアクセスするリスクが高まります。
</Warning>

## 統合

### Bubble.io JWT

Bubble ユーザーの場合は、Bubble.io セクションの *Generate JWT Token* を参照してください:

<Card title="Bubble Generate JWT" icon="link" href="/packages-guides/bubble#generate-jwt-token-in-bubble" horizontal />

### モバイル JWT

以下の Swift、Flutter、React Native の[モバイルコード例](/apis/profiles/generate-jwt-overview#mobile-code-examples) は、iOS デバイスでソーシャルリンクページを起動する方法を示しています。
`jwtURL` の String 変数を [/generateJWT エンドポイント](/apis/profiles/generate-jwt) からの戻り値に置き換えてください。

#### Swift (iOS)

Swift では、`UIViewController` と `SFSafariViewControllerDelegate` を使用してください。
Facebook や Google などの一部のソーシャルネットワークが認証をブロックするため、`WebView` の使用は推奨しません。

#### Flutter (Dart)

Flutter (Dart) には、`UIViewController` や `SFSafariViewController` に直接相当するものはありません。
ただし、`url_launcher` パッケージを使用して Web URL を開くことで、同様の機能を実現できます。

#### React Native

React Native にも `SFSafariViewController` に直接相当するものはありませんが、`expo-web-browser` によって提供される `WebBrowser` API を使用して、システムブラウザとクッキーを共有するモーダルブラウザウィンドウで URL を開くことで、同様の結果を得ることができます。あるいは、React Native 標準の `Linking` 関数を使用して Safari を開くこともできます: `await Linking.canOpenURL(jwtURL);`

#### モバイルコード例

<CodeGroup>
  ```swift Swift theme={"system"}
  import UIKit
  import SafariServices

  class ViewController: UIViewController, SFSafariViewControllerDelegate {
      
      var jwtURL = "https://profile.ayrshare.com?domain=acme&jwt=eyJhbGciOiJ"

      override func viewDidLoad() {
          super.viewDidLoad()
          setupButton()
      }
      
      func setupButton() {
          let button = UIButton(type: .system)
          button.frame = CGRect(x: (view.bounds.width - 200) / 2, y: (view.bounds.height - 50) / 2, width: 200, height: 50)
          button.setTitle("Open URL", for: .normal)
          button.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)
          view.addSubview(button)
      }

      @objc func buttonTapped() {
          openURLInInAppBrowser()
      }

      func openURLInInAppBrowser() {
          if let url = URL(string: jwtURL) {
              let safariVC = SFSafariViewController(url: url)
              safariVC.delegate = self
              present(safariVC, animated: true, completion: nil)
          }
      }

      // Optional: If you want to handle when the in-app browser is closed
      func safariViewControllerDidFinish(_ controller: SFSafariViewController) {
          controller.dismiss(animated: true, completion: nil)
      }
  }
  ```

  ```dart Flutter theme={"system"}
  /** yaml dependencies
    dependencies:
      flutter:
        sdk: flutter
      url_launcher: ^6.2.1
  */

  import 'package:flutter/material.dart';
  import 'package:url_launcher/url_launcher.dart';

  void main() {
    runApp(MyApp());
  }

  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'URL Launcher Example',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(),
      );
    }
  }

  class MyHomePage extends StatelessWidget {
    final String jwtURL = "https://profile.ayrshare.com?domain=acme&jwt=eyJhbGciOiJ";

    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('URL Launcher Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              openURLInBrowser(context);
            },
            child: Text('Open URL'),
          ),
        ),
      );
    }

    void openURLInBrowser(BuildContext context) async {
      if (await canLaunch(jwtURL)) {
        await launch(jwtURL);
      } else {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: Text('Could not launch $jwtURL'),
          ),
        );
      }
    }
  }
  ```

  ```jsx React Native theme={"system"}
  /**
  • Using the API provided by expo-web-browser,
  • which opens a URL in a modal browser window that shares cookies
  • with the system browser.

  • Learn more about expo: https://reactnative.dev/docs/environment-setup?guide=quickstart
  • and running the following command:
  • expo install expo-web-browser
  */

  import React from 'react';
  import { StyleSheet, Button, View } from 'react-native';
  import * as WebBrowser from 'expo-web-browser';

  export default function App() {
    const jwtURL = 'https://profile.ayrshare.com?domain=acme&jwt=eyJhbGciOiJ';

    const openURLInBrowser = async () => {
      try {
        await WebBrowser.openBrowserAsync(jwtURL);
        // Optional: WebBrowser.openBrowserAsync returns a promise that resolves with an object containing
        // 'type' that can be 'cancelled' or 'dismissed'. You can use this to handle when the browser is closed.
      } catch (error) {
        console.error(error);
      }
    };

    return (
      <View style={styles.container}>
        <Button title="Open URL" onPress={openURLInBrowser} />
      </View>
    );
  }

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    },
  });
  ```
</CodeGroup>

## アカウント連携メール(Connect Accounts Email)

<max_pack />

より長い有効期限オプションと組み合わせて、Ayrshare からユーザーにソーシャル連携ページへのリンクを自動的にメール送信することもできます。

### Connect Accounts JSON

例えば以下の JSON を使用すると、会社名 ACME、連絡先メール `support@mycompany.com`、および利用規約とプライバシーポリシーへのリンクとともに `john@user.com` にメールが送信されます:

```json Example Contact Email Request theme={"system"}
/**
  All fields are in the email object required.
  Missing fields will cause the email to fail.
*/
{
  "email": {
    "to": "john@user.com",
    "contactEmail": "support@mycompany.com",
    "company": "ACME",
    "termsUrl": "https://www.ayrshare.com/terms",
    "privacyUrl": "https://www.ayrshare.com/privacy",
    "expiresIn": 60
  }
}
```

メールと有効期限が設定された場合、レスポンスに以下が含まれます:

```json Example Contact Email Response theme={"system"}
{
  "emailSent": true,
  "expiresIn": "30m"
}
```

### JWT Connect Accounts メールの例

ソーシャル連携ページを開く Connect Account リンクを含むメールの例です:

<img src="https://mintcdn.com/ayrshare-docs/Nmrhj2Gh7WSf62Bh/images/apis/profiles/jwt-email.webp?fit=max&auto=format&n=Nmrhj2Gh7WSf62Bh&q=85&s=fbe4ee86ca59c26a5bd5b289fda96b8b" alt="JWT Email" width="563" class="center" data-path="images/apis/profiles/jwt-email.webp" />

メールは以下のアドレスから送信されます:

`Social Connect Hub <connect@socialconnecthub.com>`
