hackathon--nodejs第三方登录实例(持续更新)_html/css_WEB-ITnose
- WBOY原創
- 2016-06-24 11:20:071680瀏覽
项目地址
演示页面
此文为翻译+简单的介绍，不当之处敬请指出
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申请办法
- 访问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的链接下。