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

  • 2
    Like
  • 0
    Comment

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

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

管理機能について

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

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

1.png

2.png

管理メニュー

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

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

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

コールバックURLの確認

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

6_twitter.png

7_facebook.png

8_github.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] ボタンを押下。これでアプリケーション作成が作成される。
  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 連携ボタンが追加されます。

capt_20170527_155456_00.png