Rocket.Chat への各種SNS連携設定

Rocket.Chat という Slack っぽいチャットツールがあります。最近これを自分のサーバに導入していまして、場所としては https://chat.clock-up.jp/ としてアクセスできるようにしてあります。

• 参考: 招待操作不要の Slack っぽいチャットシステム「Rocket.Chat」の導入 (CentOS 7.2) - Qiita

このツールでは各種 SNS の OAuth 認証を付けることが割と簡単にできます。今回は Twitter, Facebook, GitHub の連携を付けてみようと思います。

管理機能について

Rocket.Chat の管理ユーザの扱いはちょっと暗黙なトリッキールールが採用されていまして、どういうことかというと、Rocket.Chat を導入した後に 一番最初に登録したユーザが管理者として扱われます 。

一番最初に登録したユーザ、つまり管理ユーザでログインすると、管理用のメニューが選択できるようになります。

管理メニュー

管理メニューを開くといろいろ設定項目が表示されます。ちょっとスクロールバーの色が薄くて気づきにくいのですが、メニューは下のほうまでけっこう長く伸びてるのでスクロールして必要な項目を見つけてください。

管理メニューの中の OAuth 項目

管理メニューの中の「OAuth」という項目で OAuth 関連設定を行えます。（メニューの上のほうにある「OAuth Apps」ではなく、下のほうにある「OAuth」のほうです。紛らわしいので間違えないように注意）

コールバックURLの確認

まず、「OAuth」設定ページ内で Twitter, Facebook, GitHub について、それぞれのコールバックURLを書き留めておきます。

OAuth アプリケーション作成、および連携設定

Twitter, Facebook, GitHub それぞれのサイトで OAuth 連携用のアプリケーションを作り、Rocket.Chat 側の連携設定を行います。

Twitter

1. https://apps.twitter.com/ を開く (Twitterログインしてなければログインしておく)
2. [Create New App] ボタン押下
3. 必要項目入力
   • Name: ユニークな名前（何でも良い）（他アプリと被ったらダメ）
   • Description: 分かりやすい説明（分かれば何でも良い）
   • Website: 正式なURLを入れるべきだが実は何でも良い
   • Callback URL: 上で控えておいたコールバックURLを入力
   • Developer Agreement: (規約に同意できていれば) チェックボックスを ON
   • [Create yout Twitter application] ボタンを押下。これでアプリケーション作成が作成される。
4. できあがったアプリケーション画面内で、[Keys and Access Tokens] タブを開く
   • 「Consumer Key (API Key)」「Consumer Secret (API Secret)」 がそれぞれ表示されるので、それらを書き留めておく
5. Rocket.Chat 側の OAuth 管理で Twitter の必要項目を入力
   • Twitter によるログインを有効にする: はい
   • Twitter ID: 上記で書き留めた 「Consumer Key (API Key)」
   • Twitter シークレットキー: 上記で書き留めた 「Consumer Secret (API Secret)」
   • 画面右上の [変更を保存] ボタンを押下

Facebook

1. https://developers.facebook.com/apps を開く (Facebookログインしてなければログインしておく)
2. [新しいアプリを追加] ボタン押下
3. 必要項目入力
   • 表示名: 分かりやすい名前（分かれば何でも良い）
   • 連絡先メールアドレス: 正式なメールアドレスを入れるべきだか実は何でも良い
   • [アプリIDを作成してください] ボタンを押下。これでアプリケーションが作成される。
4. できあがったアプリケーション画面のサイドバーから[ダッシュボード] を開く
   • 「アプリID」「app secret」 がそれぞれ表示される（app secret については右側の [表示] ボタンを押すと表示される）ので、それらを書き留めておく
5. アプリケーション画面のサイドバーから [プロタクト] - [製品を追加] を開き、[Facebookログイン] の [スタート] を押下
6. 必要項目入力
   • クライアントOAuthログイン: 今回はいらないので「いいえ」にしておく。
   • ウェブOAuthログイン: 「はい」になっていることを確認。そのままにしておく。
   • 有効なOAuthリダイレクトURI: 上で控えておいたコールバックURLを入力。
   • [変更を保存] ボタンを押下
7. アプリケーション画面のサイドバーから [アプリレビュー] を開く
   • 「{アプリケーション名}を公開しますか？」の項目を「はい」に変更
8. Rocket.Chat 側の OAuth 管理で Facebook の必要項目を入力
   • Facebook によるログインを有効にする: はい
   • Facebook アプリケーション ID: 上記で書き留めた 「アプリID」
   • Facebook シークレットキー: 上記で書き留めた 「app secret」
   • 画面右上の [変更を保存] ボタンを押下

GitHub

1. https://github.com/settings/developers を開く (GitHubログインしてなければログインしておく)
2. [Register a new application] ボタン押下
3. 必要項目入力
   • Application name: 分かりやすい名前（分かれば何でも良い）
   • Home page URL: 正式なURLを入れるべきだが実は何でも良い
   • Application description: 分かりやすい説明（分かれば何でも良い）
   • Authorization callback URL: 上で控えておいたコールバックURLを入力
   • [Register application] ボタンを押下。これでアプリケーションが作成される。
4. できあがったアプリケーション画面内に 「Client ID」「Client Secret」 が表示されるので、それらを書き留めておく。
5. Rocket.Chat 側の OAuth 管理で GitHub の必要項目を入力
   • OAuth によるログインを有効する: はい
   • クライアント ID: 上記で書き留めた 「Client ID」
   • クライアント シークレットキー: 上記で書き留めた 「Client Secret」
   • 画面右上の [変更を保存] ボタンを押下

以上、完了

設定が完了しました。
Rocket.Chat のログイン画面を開くと、以下のように SNS 連携ボタンが追加されます。