ハッカソン --nodejs サードパーティのログイン例 (継続的に更新)_html/css

プロジェクトアドレス

デモページ

この記事は翻訳+簡単な紹介です、不適切な点があればご指摘ください

ハッカソンはoauth認証を使用するプロジェクトで、現在ほとんどの海外の主流Webサイトをサポートしています

モダンテーマ

Flatly Bootstrap テーマ

API の例

機能
すぐに使える
始めましょう
API を入手
ファイル構造
使用したパッケージ
便利なツールとリソース
デザインリソースの推奨事項
nodejsライブラリの推奨事項
クライアントライブラリの推奨事項
ヒント
FAQ
仕組み
Mongooseの使用メモ
デプロイ方法
更新ログ
一緒に進捗状況
ライセンス

機能

ローカル認証 電子メールとパスワードを使用
OAuth 1.0a 認証 認証twitter
OAuth 2.0 認証認証 Facebook、Google、GitHub、LinkedIn、Instagram
フラッシュ通知
MVC アーキテクチャ
Nodejs クラスターのサポート
Sass スタイル
Bootstrap 3 + 追加テーマ
アカウント管理
- サポート Gravatar
- プロフィール詳細
- パスワード変更
- パスワード取得
- パスワードをリセット
- 複雑な OAuth ポリシーをアカウントにリンクする
- アカウントを削除する
CSRF保護
チェスト Facebook、Foursquare、Last.fm、Tumblr、Twitter、Stripe、LinkedInなど

すぐに使用可能

必須s Node.js はインストールされています
インストール方法
- Xcode (またはOS Linux Mint: sudo apt-get install build-essential
- Fedora: sudo dnf groupinstall "開発ツール"
- OpenSUSE: sudo zypper install --type pattern devel_basis
- 注: Node または Express の初心者の場合は、まず Node.js と Express 101 を読むことをお勧めします。さらに、ここに優れたチュートリアルがあります。基本的な知識のない初心者向け: Node.js、Express、MongoDB の入門
- スタート
```
# 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

ログイン後にコピー

Get API

APIS または OAuth 認証方法を使用するには、クライアント ID、クライアントシークレット、API キー、またはユーザー名とパスワードを準備する必要があります。これらを入手するには第三者に申請する必要があります。

ハッカソンスターター 2.0:

これらすべてを Chestnut で実行しました。面倒だと思う場合は、私のものを使用してください。ただし、Web サイトやアプリを公開するときは、それを自分のライセンスに置き換えることを忘れないでください。

google への申請方法

Google Cloud Console にアクセス

プロジェクトの作成 をクリック (中国語の習慣を設定してプロジェクトを作成できます)

プロジェクト名を入力し、

作成をクリック

新しいクライアント ID を作成する
クリック 同意画面の構成
アプリケーションタイプ
認可された JavaScript オリジン

認可されたリダイレクト URI

正式なアプリケーションを開発する場合は、ローカルアドレスのアプリケーションを使用せず、新規アプリケーションを申請してください

を一時的に紹介します。...

controllers

/api.js

/api ルーティング管理 (すべての API 栗を含む) /contact.js コントロール接続フォーム/home。 jsコントロールホームページ/ user.jsユーザーアカウント管理/User.jsMongooseベースのユーザーデータベース操作モジュール/いくつかの静的ファイル (フォント、画像、CSS、JS など)/js/application.jspublic/ここにクライアントコードを配置します你的应用自書的样式views/account//Api栗テンプレート/フラッシュ.jade エラー、プロンプト、成功リマインダーメッセージ/header.jadeナビゲーションバーテンプレート/footer.jadeフッターテンプレート views基本テンプレートviewsホームページテンプレート.env.exampleapp.jsメインファイルpackage.jsonNPM の依存関係

controllers

models

パブリック

public

クライアント js の依存関係を指定

js/main.js

public/css/main.scss

public/css/主題/default.scss 用了ブートストラップ让它看起来更漂亮

ログイン、パスワードリセット、サイドバーテンプレート

views/api

ビュー/部分

views/partials

/layout.jade

/home.jade

.travis.yml

Travis CI ポイント

アプリケーション API キー、トークン、パスワード、データベースリンク

注: あなたは私がすることをする必要はありません、私は栗を提供するだけです、あなたはあなたの都合の良いことを何でもしてください。

使用するパッケージ

passport-oauthoauthを許可ログイン認証 paypal-rest-sdk PayPal APIrequestシンプルなHTTPリクエストモジュールストライプストライプAPItumblr.jsTumblr API twilio Twilio APItwitTwitter APIlodash便利なjsライブラリvalidatorcontrollers/ api.js内にmochachaiスーパーテストyui

有用的工具和资源

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

ハッカソン --nodejs サードパーティのログイン例 (継続的に更新)_html/css_WEB-ITnose

目次

機能