演示页面
此文为翻译+简单的介绍,不当之处敬请指出
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测试数据/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申请办法
访问Google Cloud Console 点击 Create Project (可以设置中文习惯,那么就是创建项目了) 填项目名称,点 Create 点击应用,找到APIs & auth(API管理),点击进入管理页面 在管理页面左边找到Credentials (凭据) 点击 Create new Client ID 按钮(创建凭据中的OAuth客户端ID) 点击 Configure Consent Screen (配置同意屏幕) 按自己的信息填好保存 接下来信息这样填写 Application Type (应用类型): Web Application(网页应用) Authorized Javascript origins (已获授权的 JavaScript 来源): http://localhost:3000 Authorized redirect URI (已获授权的重定向 URI): http://localhost:3000/auth/google/callback 好好保存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的链接下。
查看更多关于hackathon--nodejs第三方登录实例(持续更新)_html/css_WEB-ITnose的详细内容...