首頁 > web前端 > html教學 > hackathon--nodejs第三方登录实例(持续更新)_html/css_WEB-ITnose

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

WBOY
發布: 2016-06-24 11:20:07
原創
1697 人瀏覽過

项目地址

演示页面

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

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板