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

プロジェクトアドレス

デモページ

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

ハッカソンは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など

すぐに使用可能

---

MongoDBのインストールが必要です
• 必須s Node.js はインストールされています
• インストール方法
• Mac OS X:
  • 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 の入門
  • スタート
  最も簡単な方法は、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

Get API

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

---

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

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

google への申請方法

---

Google Cloud Console にアクセス

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

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

作成をクリック

クリックAPI と認証 (API 管理) を適用して検索し、クリックして管理ページに入ります
管理ページの左側にある認証情報 (認証情報) を見つけます
2. 新しいクライアント ID を作成する
ボタンをクリックします (OAuth クライアント ID を認証情報)
3. クリック 同意画面の構成
(構成同意画面)
自分の情報を入力して保存します
次の情報を次のように入力します
6. アプリケーション タイプ
(アプリケーション タイプ): Web アプリケーション (Webアプリケーション)
7. 認可された JavaScript オリジン
(認可された JavaScript ソース): http://localhost:3000
9. 認可されたリダイレクト URI
   (認可されたリダイレクト URI): http://localhost:3000/auth/google/callback
   IDとパスワードをよく保存してください Key
   注意:
   • 正式なアプリケーションを開発する場合は、ローカルアドレスのアプリケーションを使用せず、新規アプリケーションを申請してください
   翻訳者: I will open a主要なウェブサイトの申請プロセスを紹介する特別記事 Google
   を一時的に紹介します。...

   ---

   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

   controllers

   controllers

   models

   パブリック

   public

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

   js/main.js

   public/css/main.scss

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

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

   views/api

   ビュー/部分

   views/partials

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

   パッケージ名	説明
   async	非同期プログラミングを支援するモジュール
   bcrypt-nodejs	hと塩 パスワード
   bitgo	ビットコインウォレットAPI
   cheerio	jQuery構文を使用したクローラモジュール
   時計じかけ	スケジュールされたSMSモジュール
   connect-mongo	express link mongodb
   dotenv	.env ファイルからロード環境。変数
   express	有名なnodejs Webフレームワーク
   body-parser	express4ミドルウェア
   express-session	express4ミドルウェア
   morgan	express4 ミドルウェア
   圧縮	express4ミドルウェア
   errorhandler	express4ミドルウェア
   serve-favicon	express4ミドルウェア
   express-flash	Express情報サポートのためのフラッシュを提供する
   fbgraph	FBグラフAPI
   github-api	githubAPI
   jade	expressのテンプレートエンジン
   lastfm	Last.fm API
   instagram-node	インスタグラムAPI
   ロブ	ロブAPI
   lusca	CSRF ミドルウェア
   mongoose	MongoDB ODM
   node-foursquare	Foursquare API
   node-linkedin	LinkedIn API
   node-sass-middleware	sass ミドルウェア
   nodemailer	node email コンポーネント
   passport	シンプルでエレガントなログイン認証
   passport-facebook	FB プラグインへのログイン
   passport-github	にログインgithub plug-in
   passport-google-oauth	Googleプラグインにログイン
   passport-twitter	twitterにログインするためのプラグイン
   passport-instagram	インスタグラムにログインplugin
   passport-local	ローカルログイン検証
   passport-linkedin-oauth2	linkedinプラグインにログイン
   	検証制御を行います
   テストフレームワーク
   BDD/ TDD
   HTTP
   yahoo API