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] ボタンを押下。これでアプリケーション作成が作成される。

1. できあがったアプリケーション画面内で、[Keys and Access Tokens] タブを開く

• 「Consumer Key (API Key)」「Consumer Secret (API Secret)」 がそれぞれ表示されるので、それらを書き留めておく

1. 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を作成してください] ボタンを押下。これでアプリケーションが作成される。

1. できあがったアプリケーション画面のサイドバーから[ダッシュボード] を開く

• 「アプリID」「app secret」 がそれぞれ表示される（app secret については右側の [表示] ボタンを押すと表示される）ので、それらを書き留めておく

1. アプリケーション画面のサイドバーから [プロタクト] - [製品を追加] を開き、[Facebookログイン] の [スタート] を押下
2. 必要項目入力

• クライアントOAuthログイン: 今回はいらないので「いいえ」にしておく。
• ウェブOAuthログイン: 「はい」になっていることを確認。そのままにしておく。
• 有効なOAuthリダイレクトURI: 上で控えておいたコールバックURLを入力。
• [変更を保存] ボタンを押下

1. アプリケーション画面のサイドバーから [アプリレビュー] を開く

• 「{アプリケーション名}を公開しますか？」の項目を「はい」に変更

1. 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] ボタンを押下。これでアプリケーションが作成される。

1. できあがったアプリケーション画面内に 「Client ID」「Client Secret」 が表示されるので、それらを書き留めておく。
2. Rocket.Chat 側の OAuth 管理で GitHub の必要項目を入力

• OAuth によるログインを有効する: はい
• クライアント ID: 上記で書き留めた 「Client ID」
• クライアント シークレットキー: 上記で書き留めた 「Client Secret」
• 画面右上の [変更を保存] ボタンを押下

以上、完了

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