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和密钥

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

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

文件结构

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

使用的包

有用的工具和资源

• 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的链接下。