hackathon--nodejs第三方登录实例(持续更新)_html/css_WEB-ITnose

项目地址

演示页面

此文为翻译+简单的介绍，不当之处敬请指出

hackathon是采用oauth认证的一个项目，目前支持大部分国外主流网站

Modern Theme

Flatly Bootstrap Theme

API Examples

目录

---

• 特性
• 准备使用
• 开始
• 获得API
• 文件结构
• 使用的包
• 有用的工具和资源
• 设计资源推荐
• nodejs库推荐
• 客户端库推荐
• 技巧
• FAQ
• 它是如何工作的
• Mongoose使用备忘录
• 如何部署
• 更新日志
• 共同进步
• 许可证

特性

---

• 本地认证 使用Email和密码
• OAuth 1.0a 认证 认证twitter
• OAuth 2.0 认证 认证Facebook, Google, GitHub, LinkedIn, Instagram
• Flash通知
• MVC架构
• Nodejs集群支持
• Sass样式
• Bootstrap 3 + Extra主题
• 账号管理
  • 支持Gravatar
  • 个人资料细节
  • 改变密码
  • 密码找回
  • 重置密码
  • 链接复杂的OAuth策略到一个账号上
  • 删除账号
• CSRF保护
• 栗子 Facebook, Foursquare, Last.fm, Tumblr, Twitter, Stripe, LinkedIn and more.

准备使用

---

• 需要安装MongoDB
• 需要安装Node.js
• 如何安装
  • Mac OS X: Xcode (or OS X 10.9+: xcode-select --install)
  • Windows: Visual Studio
  • Ubuntu /Linux Mint: sudo apt-get install build-essential
  • Fedora: sudo dnf groupinstall "Development Tools"
  • OpenSUSE: sudo zypper install --type pattern devel_basis

注意:如果你是node或者express的初学者，建议先看看Node.js and Express 101；另外，这还有一个对于零基础初学者不错的教程： Getting Started With Node.js, Express, MongoDB.

开始

---

最简单的办法就是从github上克隆下来啦

# Get the latest snapshotgit clone --depth=1 https://github.com/sahat/hackathon-starter.git myproject# Change directorycd myproject# Install NPM dependenciesnpm installnode app.js

注意：我墙裂(●˘◡˘●)推荐安上Nodemon。用上它，当你对代码有改动时，它会自动重启服务，很方便吧。安装之后，开启服务不要使用node app.js，要使用nodemon app.js。这家伙会自启服务器，这样你就不用因为小小的改动而手动重启服务器了，大大节省时间啊。这样子安装：

sudo npm install -g nodemon

获得API

---

为了能使用APIS或者OAuth认证方式，你需要准备以下东西：Client ID, Client Secret, API Key, or Username & Password。这些东西你需要找第三方去申请才能获得。

Hackathon Starter 2.0 :我已经把栗子中所有的这些弄好了，你嫌麻烦，就直接用我的吧。但是别忘了你发布自己的网站或者APP时，换上自己的许可证。

google申请办法

1. 访问Google Cloud Console
2. 点击Create Project（可以设置中文习惯，那么就是创建项目了）
3. 填项目名称，点Create
4. 点击应用，找到APIs & auth（API管理），点击进入管理页面
5. 在管理页面左边找到Credentials （凭据）
6. 点击Create new Client ID按钮（创建凭据中的OAuth客户端ID）
7. 点击Configure Consent Screen（配置同意屏幕）
8. 按自己的信息填好保存
9. 接下来信息这样填写
   • Application Type（应用类型）: Web Application（网页应用）
   • Authorized Javascript origins（已获授权的 JavaScript 来源）: http://localhost:3000
   • Authorized redirect URI（已获授权的重定向 URI）: http://localhost:3000/auth/google/callback
10. 好好保存ID和密钥

注意：当你打算开发正式的应用时，请申请新的应用，不要使用本地地址的应用

---

译者：我将专门开一篇介绍各大网站申请流程，暂时介绍谷歌

---

文件结构

---

名称	描述
config/passport.js	Passport本地和OAuth认证，一个登录认证中间件
controllers/api.js	/api的路由管理，包含所有的api栗子
controllers/contact.js	控制连接表单
controllers/home.js	控制首页
controllers/user.js	用户账户管理
models/User.js	基于Mongoose的用户数据库操作的模块
public/	一些静态文件（比如字体，图片，css，js）
public/js/application.js	指定客户端js依赖
public/js/main.js	这里放置你的客户端代码
public/css/main.scss	你的应用自写的样式
public/css/themes/default.scss	用了bootstrap让它看起来更漂亮
views/account/	登录，密码重置和侧边栏的模板
views/api/	Api栗子的模板
views/partials/flash.jade	错误、提示和成功的提醒信息
views/partials/header.jade	导航栏模板
views/partials/footer.jade	页脚模板
views/layout.jade	基础模板
views/home.jade	主页模板
.travis.yml	Travis CI 积分
.env.example	你申请的API Keys ，tokens, passwords和数据库链接
app.js	主体文件
package.json	NPM 依赖

注意：你不一定非要按我这么做，我只是提供一个栗子，你觉得怎么方便就怎么来。

使用的包

包名	描述
async	帮助你异步编程的模块
bcrypt-nodejs	可以hash和盐化密码
bitgo	比特币钱包Api
cheerio	使用jQuery语法的爬虫模块
clockwork	定时SMS模块
connect-mongo	express链接mongodb
dotenv	从.env file.加载环境变量
express	著名的nodejs网页框架
body-parser	express4的中间件
express-session	express4的中间件
morgan	express4的中间件
compression	express4的中间件
errorhandler	express4的中间件
serve-favicon	express4的中间件
express-flash	给express提供flash信息支持
fbgraph	FB图形API
github-api	githubAPI
jade	express的模板引擎
lastfm	Last.fm API
instagram-node	instagram API
lob	lob API
lusca	CSRF中间件
mongoose	MongoDB ODM
node-foursquare	Foursquare API
node-linkedin	LinkedIn API
node-sass-middleware	sass 中间件
nodemailer	node发邮件组件
passport	简单而优雅的登录认证
passport-facebook	登录FB的插件
passport-github	登录github的插件
passport-google-oauth	登录google的插件
passport-twitter	登录twitter的插件
passport-instagram	登录instagram的插件
passport-local	本地登录验证
passport-linkedin-oauth2	登录linkedin的插件
passport-oauth	允许oauth登录验证
paypal-rest-sdk	PayPal API
request	简单的HTTP请求模块
stripe	Stripe API
tumblr.js	Tumblr API
twilio	Twilio API
twit	Twitter API
lodash	一个便利的js库
validator	在controllers/api.js做验证控制
mocha	测试框架
chai	BDD/TDD
supertest	HTTP
yui	yahoo API

有用的工具和资源

---

• JavaScripting - JS的数据库
• JS Recipes - 对于js前后端的教程
• Jade Syntax Documentation by Example - 比Jade官方更好的文档
• HTML to Jade converter - 让你更快的从网页上复制和粘贴html
• JavascriptOO - 一个JS库的目录
• Favicon Generator - 适用于PC, Android, iOS, Windows 8的图标生成器

设计资源推荐

---

• Code Guide - 灵活、耐用、可持续的HTML和CSS标准
• Bootsnipp - 一些适用于bootstrap的代码片段
• UIBox - 编排HTML, CSS, JS, UI组件
• Bootstrap Zero - 免费的bootstrap模板
• Google Bootstrap - google样式的bootstrap
• Font Awesome Icons - 早已是 Hackathon Starter的一部分
• Colors - 一个很棒的在线调色板
• Creative Button Styles - 丰富多彩的按钮样式
• Creative Link Effects - 漂亮的链接样式
• Medium Scroll Effect - 当你滚动鼠标时，标题淡入淡出
• GeoPattern - SVG背景样式生成器
• Trianglify - SVG低多边形背景样式生成器

nodejs库推荐

---

• Nodemon - 代码改动服务自动重启
• geoip-lite - IP查询地理坐标
• Filesize.js - 文件格式转换，比如filesize(265318); // "265.32 kB"
• Numeral.js - 格式化数据
• Node Inspector - 基于chrome开发者工具的调试工具
• node-taglib - 读取流行的音频格式
• sharp - 调整 JPEG, PNG, WebP , TIFF等图片格式

客户端库推荐

---

• Framework7 - 创建IOS7 App的优美而且完成的库
• InstantClick - 通过在鼠标悬停时预先加载页面来提高页面访问速度
• NProgress.js - 类似YouTube和Medium上的进度条
• Hover - 特别棒的鼠标悬停CSS3样式动画
• Magnific Popup - 基于jQuery的响应式灯箱插件
• jQuery Raty - 评分插件
• Headroom.js - 如果不需要头文件，自动隐藏
• X-editable - 在内联元素里直接修改
• Offline.js - 检测用户网络状态是否离线
• Alertify.js - 优化alert和浏览器对话框样式
• selectize.js - 优化select元素和input标签样式
• drop.js - 适用于下拉框和其他浮动元素的强大的js和css库
• scrollReveal.js - 揭示动画

技巧

---

• 当安装模块时，可以加上--save，这样子就会自动写入package.json了例如 npm install --save moment

• 当你有多个异步任务需要进行，可以采用 async.parallel()举个场景栗子，你可能需要在一个返回页面模板之前，生成的数据需要3个有相关性的操作，这个时候你就需要这个了

• 在数组中找到一个特别的对象? 你需要 _.find .举个例子, 从数据库中取出一个twitter对象: var token = _.find(req.user.tokens, { kind: 'twitter' });

FAQ

---

当我提交表单时，出现403错误

你需要添加一个隐藏的input元素在你的表单里input(type='hidden', name='_csrf', value=_csrf)可以参考pull request #40

注意： 现在可能的原因也有URL白名单了，换句话说，你可以指定一个特别的路由来通过CSRF验证

注意 2： 对于动态URL白名单，如果你的代码含有req.originalUrl你需要定期测试

MongoDB连接错误，我如何修复

这个普遍的错误信息来自于app.js中

mongoose.connection.on('error', function() { console.error('MongoDB Connection Error. Please make sure MongoDB is running.');});

在运行app.js之前，你的MongoDB服务必须启动可以在这里下载MongoDB，如果你是windows用户，那么移步这里.

小贴士：如果你总是需要连接互联网，你可以用 mLab 或者 Compose来代替本地安装数据库，这样你只需要在.env文件里更新数据库就行了。

当我部署应用时，提示错误

可能你没有更改本地数据库链接。如果你在使用的是用本地链接，那么你只能在本地使用数据库；当你部署在Heroku，OpenShift或者其他的平台上时，你的数据库无法运行在localhost的链接下。