Posted at

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

More than 3 years have passed since last update.

Meteor には GitHub アカウントと簡単に連携する機能が用意されています。

この記事では Meteor アプリケーションで GitHub アカウントログインを実装する方法を紹介します。

サンプルコード


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


bash$

meteor add accounts-ui accounts-github



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

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


app.html

<template name="hello">

<!-- ... -->
{{> loginButtons}}
</template>


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



  1. https://github.com/settings/applications/new にアクセス

  2. 以下の情報を入力して Register application ボタンをクリック



  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

accounts-facebook

accounts-github
accounts-gootle
accounts-meetup
accounts-meteor-developer
accounts-password
accounts-twitter
accounts-weibo
accounts-oauth

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


参考ページ


参考画像

ステップ
画像

2
meteor-github-accounts1.png

3-2
meteor-github-accounts2.png

3-3
meteor-github-accounts3-1.png

4-4
meteor-github-accounts4.png

5-2
meteor-github-accounts5.png

5-4
meteor-github-accounts6.png

5-5
meteor-github-accounts7.png