MeteorでGitHubアカウントと連携する方法(github-accounts)


Meteor には GitHub アカウントと簡単に連携する機能が用意されています。
この記事では Meteor アプリケーションで GitHub アカウントログインを実装する方法を紹介します。

[サンプルコード](https://github.com/nobutakaoshiro/meteor-accounts-github-example)

## 1. パッケージの追加(accounts-ui/accounts-github)

```bash:bash$
meteor add accounts-ui accounts-github
```

## 2. ログインボタンの設置

ログインボタンを設置したいテンプレートに `{{> loginButtons}}` の記述を追加します。

```html:app.html
<template name="hello">
  <!-- ... -->
  {{> loginButtons}} 
</template>
```

## 3. GitHub アプリケーションの作成

1. https://github.com/settings/applications/new にアクセス
2. 以下の情報を入力して **Register application** ボタンをクリック
	- **Application name:** meteor-github-accounts-example
	- **Homepage URL:** http://localhost:3000/
	- **Application description:** アプリケーションの説明(任意)
	- **Authorization callback URL:** http://localhost:3000/_oauth/github
3. Client ID と Client Secret をメモ

## 4. Meteor アプリケーションの GitHub 連携設定

1. Meteor アプリケーションを起動
2. ブラウザで http://localhost:3000/ にアクセス
3. **Configure GitHub Login** ボタンをクリック
4. 先ほどメモした Client ID と Client Secret を入力して **Save Configuration** をクリック
5. 連携設定完了

## 5. GitHub アカウントでログインを試す

1. ブラウザで http://localhost:3000/ にアクセス
2. **Sign in with GitHub** をクリック
3. ポップアップが開き、GitHub のログインページが表示されるので、アカウント名とパスワードを入力
	* すでに GitHub にログインしている場合は、このステップは飛ばします
4. アプリケーションの認証画面が表示されるので、 **Authorize application** ボタンをクリック
5. Meteor アプリケーション上で GitHub アカウント名が表示されたら連携完了です！

# その他の認証方法

Meteor には以下の Accounts パッケージが公式に用意されています。

https://github.com/meteor/meteor/tree/devel/packages

```text
accounts-facebook
accounts-github
accounts-gootle
accounts-meetup
accounts-meteor-developer
accounts-password
accounts-twitter
accounts-weibo
accounts-oauth
```

また `accounts-oauth` パッケージを利用すれば、OAuthに対応しているサービスのログインパッケージが簡単に作れそうですね。

# 参考ページ

- [MeteorはTwitter連携ログインを作るのがめちゃ楽 - Qiita](http://qiita.com/hashrock/items/575e0be0a362e6c78dd1)
- [JavaScript超初心者向け Meteor メモ (5) ログイン画面を作る （Google/Twitterアカウント編） - Qiita](http://qiita.com/tadfmac/items/5bfe73f181f9b45abe71)
- [Meteor Tutorial | Adding user accounts](https://www.meteor.com/tutorials/blaze/adding-user-accounts)

# 参考画像

ステップ | 画像 
--------|-------
2| ![meteor-github-accounts1.png](https://qiita-image-store.s3.amazonaws.com/0/24450/bc44d5cf-1245-c625-c83d-8a81288555f9.png "meteor-github-accounts1.png")
3-2| ![meteor-github-accounts2.png](https://qiita-image-store.s3.amazonaws.com/0/24450/7f8543a1-b26e-4787-581e-5a4eb9041157.png "meteor-github-accounts2.png")
3-3| ![meteor-github-accounts3-1.png](https://qiita-image-store.s3.amazonaws.com/0/24450/035bb08a-0a45-94fb-0e9d-11f71751e823.png "meteor-github-accounts3-1.png")
4-4| ![meteor-github-accounts4.png](https://qiita-image-store.s3.amazonaws.com/0/24450/616077f2-78a0-efad-58f3-20facbf4f33e.png "meteor-github-accounts4.png")
5-2| ![meteor-github-accounts5.png](https://qiita-image-store.s3.amazonaws.com/0/24450/89e68632-feb0-c1cd-abe8-b017073e1e4e.png "meteor-github-accounts5.png")
5-4| ![meteor-github-accounts6.png](https://qiita-image-store.s3.amazonaws.com/0/24450/6a87f9a2-2a17-fad6-aba0-6ddb0665868a.png "meteor-github-accounts6.png")
5-5| ![meteor-github-accounts7.png](https://qiita-image-store.s3.amazonaws.com/0/24450/4086d8f6-b989-12b9-4782-b21a13b91c11.png "meteor-github-accounts7.png")