iT邦幫忙

DAY 10
1

網頁設計師指南——從前端到後端系列 第 10

網頁設計師指南——從前端到後端(十)everyauth

在完成上傳的功能後,接下來要做什麼功能呢?有一個非常重要而且基本的功能我們還沒做,那就是「帳號」。沒有帳號的功能,上傳後的作品都不知道是誰的。

但「帳號」這個功能說起來簡單,但是其實有非常多東西要做。最基本的就要有註冊,登入,修改密碼,還有忘記密碼。光是做一個帳號系統,也可以寫一個鐵人賽主題了。所以我們這邊又要借用別人的服務了,我們要用很常見的 facebook 登入,這樣只要放一個按鈕就行了。

在後面 express 上的 authtication 我們用 everyauth 來做。 everyauth 也已經內建了和 facebook 串接的功能,只要寫寫設定就搞定了。

安裝 everyauth

npm install everyauth --save

首先,要先去 facebook 開一個 app,拿到 app id 和 secert

然後 mongoose 這邊也要建好 User 的 schema

var schema = new Schema({
    facebook_id  : { type: String },
    email        : { type: String },
    gender       : { type: String },
    name         : { type: String },
    first_name   : { type: String },
    last_name    : { type: String },
    link         : { type: String },
    locale       : { type: String },

    updated_at   : { type: Date,  default: Date.now },
});

然後,詳細閱讀 everyauth 的說明書,寫 everyauth 的設定

var mongoose  = require( 'mongoose' )
  , User   = mongoose.model( 'User' )

var everyauth = require('everyauth');

everyauth.everymodule.findUserById( function (userId, callback) {
  User.findById(userId, callback)
});

everyauth.debug = true;
everyauth.facebook
  .appId(<appId>)
  .appSecret(<appSecret>)
  .scope('email')
  .handleAuthCallbackError( function (req, res) {
    // 暫時不用寫
  })
  .findOrCreateUser( function (session, accessToken, accessTokExtra, fbUserMetadata) {
    var promise = this.Promise();

    var upsertData = {
      facebook_id: fbUserMetadata.id,
      email      : fbUserMetadata.email,
      gender     : fbUserMetadata.gender,
      name       : fbUserMetadata.name,
      first_name : fbUserMetadata.first_name,
      last_name  : fbUserMetadata.last_name,
      link       : fbUserMetadata.link,
      locale     : fbUserMetadata.locale,
    }

    User.findOneAndUpdate({facebook_id: fbUserMetadata.id}, upsertData, {upsert: true}, function(err, user){
      promise.fulfill(user);
    });

    return promise
  })
  .redirectPath('/');

設定好後把 middleware 塞給 exrpess

app.use(everyauth.middleware(app));

這樣我們連到 /auth/facebook 就會登入,連到 /logout 就會登出了。


上一篇
網頁設計師指南——從前端到後端(九) angualr.js 與 ng-flow.js
下一篇
網頁設計師指南——從前端到後端(十一)SVG
系列文
網頁設計師指南——從前端到後端15
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言