Node.js+MongoDB+passport第三方登录实践

前言

在本地运行本项目之前请提前安装好Node.js和MongoDB数据库，MongoDB可视化工具推荐使用Mongoclient（下载地址：https://github.com/nosqlclient/nosqlclient）

源码见文末

前一阵子跟FCC杭州站的小伙伴们讨论去实现一个社区网站，而一个完善的社区网站首先得提供一个用户注册登录的功能。于是便想到了实现一个第三方登录，下面就是我在本次实践当中的一些收获，与各位学友交流、也欢迎拍砖！

本次实现基于GitHub的第三方登录，选择GitHub的目的是大家可以借着这个机会熟悉熟悉这个强大的开源社区，在里面你可以学习甚至参与其中众多的开源项目。好了，闲话也不多说，一起来了解一下怎样从零开始实现一个第三方登录。

下图是本次分享的主要内容

主要内容

一、Express框架

实现这次的第三方登录功能我使用的是目前最流行的Web开发框架express，我们可以通过express生成器快捷的搭建出一个网站的基本架构

关于Express框架的使用大家可以点击Express，在DOS窗口当中输入express myapp命令行你可以快速的生成一个命名为myapp的应用，如下图

Express生成器

二、第三方登录的基本逻辑

既然要实现的是基于GitHub的第三方登录功能，那么就需要先熟悉一下第三方登录的基本逻辑，在网上查了一通资料之后我感觉说的比较清晰的就是这篇oAuth 2.0第三方登录介绍，文中的流程图清晰地说明了第三方登录的主要流程。

第三方登录的流程简单点来说就是用户先向本地应用发出请求，然后本地应用引导用户跳转进入第三方应用（如GitHub、微信、微博等等），第三方应用返回给用户一个授权页面（用户会在授权页面登录其第三方应用账号），用户授权成功之后第三方应用会将用户的一些基本信息返回给本地应用。见下图

流程图

提醒：实现GitHub的第三方登录需要在GitHub（点击GitHub头像>Settings>Register a new application）当中注册一个application

在3rdlogin项目的passport.js文件填入对应的信息，如下图

passport.js

上图中的callbackURL需要跟你注册应用时设置的回调地址保持一致，下图是我在application当中设置的回调地址

Oauth application

3rdlogin项目当中的Client ID和Client Secret是保存在.env.example文件里面

.env.example

三、第三方登录中间件passport

了解了第三方登录的基本逻辑之后，就需要编写相应的代码去实现，本来一开始的想法是自己从零开始实现整个流程，但是一想像第三方登录这么普遍的功能需求网上应该会有实现好的第三方中间，一番搜罗果然在GitHub上面发现了passport这个中间件（此时内心默念了一声"GitHub大法好"）。于是又在GitHub上看了一下Jared Hanson（passport作者）提供的几个example，熟悉了一下passport的使用方法（里面有Google、Facebook、Twitter等等的第三方实现方法，讲解的十分详细）。使用下面这短短的几行代码就可以实现从本地请求、第三方页面授权、用户信息返回等流程。

router.get('/auth/github', passport.authenticate('github'));

router.get('/auth/github/callback', passport.authenticate('github', { failureRedirect:'/login'}), (req,res)=>{

res.redirect(req.session.returnTo||'/');

});

了解详情请戳链接passport

四、总结

目前3rdlogin项目实现了用户注册、登录（包括第三方登录），用户基本信息的查看、修改以及删除用户等功能。目前是把Express路由直接写进了入口文件app.js里面，后期进行功能扩充的时候会将这些单独写进一个路由文件当中。

页面现在是通过路由机制直接从MongoDB当中获取数据之后直接在pug模板文件上进行渲染，后期确定好借口之后需要进行前后端分离（通过Vue.js、Angular.js、React.js等前端框架处理页面）。

之前跟杭州区的小伙伴们商量了一下"FCC杭州主站"的主要功能（见下图），目前是初步实现了第三方登录的功能，诸如文章发布、分享、收藏、评论等等众多功能还需要花费时间去实现。希望大家持续关注吧！

                      关注"FCC杭州站"公众号，一起技术成长！

FCC杭州站公众号

---

文末附上源码（可参照其中提示安装运行项目）：https://github.com/Jupiter-Lee/3rdlogin