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

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

- 参考: [招待操作不要の Slack っぽいチャットシステム「Rocket.Chat」の導入 (CentOS 7.2) - Qiita](http://qiita.com/kobake@github/items/351eda569e0635c83a28)

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

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

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

<img width="466" alt="1.png" src="https://qiita-image-store.s3.amazonaws.com/0/25555/f4354cf1-a9db-4c40-766b-7375aed4fb60.png">

<img width="294" alt="2.png" src="https://qiita-image-store.s3.amazonaws.com/0/25555/2382bdbc-70f1-e4a5-758c-7062397dd609.png">

## 管理メニュー
管理メニューを開くといろいろ設定項目が表示されます。ちょっとスクロールバーの色が薄くて気づきにくいのですが、メニューは下のほうまでけっこう長く伸びてるのでスクロールして必要な項目を見つけてください。
<img width="523" alt="4.png" src="https://qiita-image-store.s3.amazonaws.com/0/25555/febdc392-8c61-47df-f07f-c77f65d4f136.png">

## 管理メニューの中の OAuth 項目
管理メニューの中の「OAuth」という項目で OAuth 関連設定を行えます。（メニューの上のほうにある「OAuth Apps」ではなく、下のほうにある「OAuth」のほうです。紛らわしいので間違えないように注意）
<img width="690" alt="5.png" src="https://qiita-image-store.s3.amazonaws.com/0/25555/4a12dccc-f3a2-2807-e3cb-de94eecd4df4.png">

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

<img width="690" alt="6_twitter.png" src="https://qiita-image-store.s3.amazonaws.com/0/25555/093aed0a-90c9-ef31-1cd3-1176f41c156d.png">

<img width="690" alt="7_facebook.png" src="https://qiita-image-store.s3.amazonaws.com/0/25555/727bca8f-b2f3-0530-3e51-82cf459a7912.png">

<img width="690" alt="8_github.png" src="https://qiita-image-store.s3.amazonaws.com/0/25555/597a58cc-5958-a0ef-f1cc-bb6fe0d49a8c.png">

## 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] ボタンを押下。これでアプリケーション作成が作成される。
5. できあがったアプリケーション画面内で、[Keys and Access Tokens] タブを開く
  - **「Consumer Key (API Key)」「Consumer Secret (API Secret)」** がそれぞれ表示されるので、それらを書き留めておく
6. 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 連携ボタンが追加されます。

<img width="506" alt="capt_20170527_155456_00.png" src="https://qiita-image-store.s3.amazonaws.com/0/25555/3fd42313-335d-28e2-78b8-8289608c5451.png">