简介

Meteor中自带强大的账户系统，并有丰富的第三方账户登录包如Github，Google，Twitter等，让我们可以专注于主要业务需求的实现。但是它提供的样式单一，并且默认数据库Meteor.users的格式已经确定，不利于后期的扩展。如果我们已经有自己的账户系统和用户数据库，可能需要统一数据库的格式。

本文主要有以下两个方面：

  1. 使用Meteor提供的默认包来实现Github账户登录这个功能；
  2. 自己配置，并把格式化的用户信息存入Meteor.users数据库中。

Meteor默认账户系统介绍

新建一个项目如github-login-demo：

1
2
3
4
5
6
meteor create github-login-demo
cd  github-login-demo
# 添加如下包
meteor add accounts-ui
meteor add accounts-password
meteor add accounts-github

现在我们已经有了基本的账户系统，在你的main.html文件的body标签中加入这一行：

1
{{> loginButtons}}

此时运行meteor命令，打开浏览器，就能看到一个登录按钮，如图所示，

login-conf
login-conf

我们可以注册和登录用户，上面github登录的配置也很简单，只需按照提示，填入我们在Github OAuth申请的Client ID和Client Secret值。

github-conf
github-conf

完成后，我们就可以让用户使用Github账号登录了。

自己配置用户登录信息

现在我们的页面只能显示用户名，并且数据库的内容是默认生成好的，没有头像，仓库数量等信息，接下来我们就自己配置用户的数据库，来保存我们想要的内容。首先添加第三方服务配置包：

1
meteor add service-configuration

在html文件中，添加一个button

1
<button id="login">Github账户登录</button>

在server/github.js中，添加配置项。具体内容，见Github地址(文章末尾)，通过响应按钮的点击事件，调用client/main.js里的Meteor.loginWithGithub()这个函数，我们就能实现用户的登录。

需要说明的是，我们是作为第三方登录账号集成到user数据库中，因此需要判断用户是否是使用第三方直接登录，还是注册新账号。如果不用第三方登录，我们这里直接返回（也可以添加其他内容）。如下：

1
2
3
if (!user.services.github) {
        return user;
    }

在github.js文件中，我们添加了user.profile用来储存一些我们想要的信息，停止meteor，运行

1
2
3
4
# 清除以前的数据库内容
meteor reset
# 重新运行
meteor

现在点击按钮登录后，就会显现登录用户的一些信息，如图：

show
show

默认的用户数据库格式是固定的，我们使用默认的账户系统再注册一个新用户，对比这两个用户的信息，可以看到都有_id,createdAt,services,resume字段（文档），而使用github账号的用户中还有profile字段，这正是我们储存我们想要的用户信息的地方。

user-db
user-db

我们的profile字段看起来内容不多，其实Github返回的json内容很丰富，下面是完整的返回内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
{
  "login": "wuyang910217",
  "id": 2918044,
  "avatar_url": "https://avatars.githubusercontent.com/u/2918044?v=3",
  "gravatar_id": "",
  "url": "https://api.github.com/users/wuyang910217",
  "html_url": "https://github.com/wuyang910217",
  "followers_url": "https://api.github.com/users/wuyang910217/followers",
  "following_url": "https://api.github.com/users/wuyang910217/following{/other_user}",
  "gists_url": "https://api.github.com/users/wuyang910217/gists{/gist_id}",
  "starred_url": "https://api.github.com/users/wuyang910217/starred{/owner}{/repo}",
  "subscriptions_url": "https://api.github.com/users/wuyang910217/subscriptions",
  "organizations_url": "https://api.github.com/users/wuyang910217/orgs",
  "repos_url": "https://api.github.com/users/wuyang910217/repos",
  "events_url": "https://api.github.com/users/wuyang910217/events{/privacy}",
  "received_events_url": "https://api.github.com/users/wuyang910217/received_events",
  "type": "User",
  "site_admin": false,
  "name": "wuyang",
  "company": null,
  "blog": null,
  "location": null,
  "email": "wuyang910217@gmail.com",
  "hireable": true,
  "bio": null,
  "public_repos": 11,
  "public_gists": 0,
  "followers": 0,
  "following": 4,
  "created_at": "2012-11-29T04:25:43Z",
  "updated_at": "2016-04-01T09:00:21Z"
}

请到这里查看所有代码： github-login-demo

参考资料

后记

本文内容基于accounts-password这个包自带的Meteor.users数据库，并没有重新构建新的数据库格式。