X との連携設定

X のプロバイダ設定に関するドキュメントです。

注記

操作画面とスクリーンショットは異なる場合があります。 類似の操作で設定が進められない場合は、お手数ですが ソーシャルPLUS サポート窓口 へお問い合わせください。

OIDC 版の X ログインには OAuth 2.0 Client ID and Client Secret（V2 Access）が必要です。

1. X 連携前の準備

1-1. 管理者のアカウント

X アプリの設定は X Developer Platform から行います。

X Developer Platform（開発者プラットフォーム）

1. ブラウザで、X アプリの管理を行う管理者の X アカウントでログインしていることを確認します。ヘッダーメニューから［Developer Portal（開発者ポータル）］をクリックします

   

2. X Developer Portal（開発者ポータル）に初めてアクセスした際に、プランの選択が表示されます。とくに理由がなければ、X ログインは "Free Account" でご利用可能です。

   

3. 開発者規約への同意や、X アプリ利用のユースケース（ご利用目的）の記述が必要です。すべて入力して［Submit］をクリック

   

以降は、画面の案内に沿って操作を完了してください。

以上で開発者登録は完了です。

1-2. X アプリの設定

開発者登録を完了すると、自動的に Project と X アプリ 1 件が作成されます。こちらを編集して、ソーシャルPLUS のソーシャルログインで利用できる状態にします。

ソーシャルログインを利用するために、アプリの詳細設定を完了させます。ここで設定する内容はユーザーがログインする際に表示されます。

1. アプリ設定のトップページから App Details の［Edit］をクリック

   

2. Edit App details の画面が表示されます。入力はすべて日本語で構いません。必要な内容を入力し［Save］をクリック

   • App name : アプリ名。ユーザーに表示されるアプリの名称として変更します（サービス名、ブランド名など）
   • App icon : アプリアイコンの画像。ファイルサイズ上限 700 KB、ファイル形式 JPG、GIF、PNG のいずれかである必要があります
   • Description : アプリの説明。ユーザーが安心して利用に同意できるような説明をつけましょう（ユーザーに対してどのような目的／利点で作られたアプリなのか）

   

保存が完了するとアプリ設定のトップページに戻ります。

以上で、アプリの詳細設定は完了です。続けてログイン機能の有効化を行います。

1-3. X ログインの設定

作成した X アプリに「X ログイン」を設定します。

ここでは、一部でソーシャルログインマネージャー上の情報が必要となります。ソーシャルログインマネージャーにアクセスし、ご利用のサービスを選択したあと［プロバイダ設定］>［X］のページを表示しておきます。

以下の手順を実施してください。

1. アプリ設定のトップページから下にスクロールし、User authentication settings の［Set up］（または［Edit］）をクリック

   

2. User authentication settings のページが表示されます。［Type of App］の［Web App, Automated App or Bot］を選択

   

3. 同じ画面を下にスクロールし、表示されたフォームに必要な事項を入力します。以下の説明をもとに項目を埋め、最後に［Save］をクリック

   

   (1) Callback URI / Redirect URL
   ソーシャルログインマネージャーの X 設定ページに表示された［Callback URI］をコピーして貼り付け

   (2) Website URL
   ソーシャルログインを導入する貴社サービスの URL

   (3) Organization name
   提供元の企業名（入力任意）

   (4) Organization URL
   提供元企業のサービス URL（入力任意）

   (5) Terms of service
   貴社サービスの利用規約ページ URL

   (6) Privacy policy
   貴社のプライバシーポリシーページ URL

4. 保存が完了すると、アプリ設定のトップページへ戻ります。「User authentication set up（緑のチェックマーク）」になっていれば完了です

   

以上で、X ログインの設定は完了です。

2. ソーシャルPLUS との連携設定

作成した X アプリの「Keys and tokens」ページから取得できる「Client ID」と「Client Secret」を、ソーシャルPLUS 側に登録します。

以下の手順を実施してください。

1. 利用する X アプリの［Keys and tokens］タブを表示します。表示された画面内に［Client ID］と［Client Secret］が表示されます

   

2. 「Client Secret」の値は、その場で［Regenerate］（再作成）することで表示できます

   「Client Secret」の再作成

   「Client Secret」の再作成を行うと前回発行した「Client Secret」の値は利用できなくなります。すでに他の環境で「Client Secret」を利用中の場合は安易に実行しないようご注意ください。

   

   

   画面を閉じる前に値を手元にコピーしてください

   上記の画面を閉じると、同じ値を再取得することはできませんので、ソーシャルPLUS 側の設定を行うまで値を手元に保持してください。値を失念された場合は、再度［Regenerate］を行ってください。

3. ソーシャルログインマネージャーにアクセスし、ご利用のサービスを選択したあと［プロバイダ設定］>［X］のページを表示します

4. X プロバイダ設定ページの内容を入力し、画面下部の［保存する］をクリック

   • ［OAuth 2.0 Client ID and Client Secret］>［Client ID and Client Secret］
     • ［Client ID］には、X アプリの［Client ID］の値を貼り付けます
     • ［Client Secret］には、X アプリの［Client Secret］の値を貼り付けます
   • ［設定者情報］>［設定者のメールアドレス］
     • X Developer Portal の管理者として使用しているアカウントの「メールアドレス」を入力します（備忘用）

   

5. 保存が完了後、以下の画面に戻ります。ラベルが［設定済］になっていれば問題ありません

   

以上で、ソーシャルPLUS 側の連携設定は完了です。

X には「X ログイン」を一般のユーザーに利用できるようにするための "一般公開" などの手順はなく、上記までの手順で「X ログイン」をどなたでも利用可能な状態となります。

次のアクション

• 他のログインプロバイダの連携を設定する
• 認可フローを確認する
• 導入実装のイメージを確認する