Reading time ~2 minutes

做一個網路服務, 使用者驗證是蠻麻煩的一件事, 我們是可以裝作沒看到, 不做驗證, 但這樣的下場就是有假使用者, 有殭屍, 最簡單的方式是信任第三方服務像是Google, Facebook, 現在的人大多數都有Google, Facebook帳號了, 這樣其實也沒多大的問題, 但還是還是有人沒有, 而且也不是每個人都放心把Facebook帳號交給我們, 因此退而求其次就是用E-mail, 用E-mail認證雖然也是一個好方式, 但還是要建置整套發信機制(或是花錢買mailgun來送信), 而且在手機上就麻煩了, 來回在App跟e-mail間切換很不方便, 因此就會想用簡訊認證, 至於簡訊認證, 除了一個"貴"字以外, 要搞定各個國家的也是一個麻煩(當然, 花錢可解, 有Twilio這種服務可以用)

所幸有Facebook提供的這個可以用Account Kit, 在初期使用者不太多的時候, 不收費的確很吸引人呀(雖然他不是唯一一個這樣的服務, 之後再介紹其他的), 但由於他iOS的範例是用Objective C寫的, 我的Objective C實在不太行, 加上, 要了解一個東西, 寫一遍就知道了, 所以順手翻譯了一個Swift的版本, Source如下:

Account Kit samples for Swift

原本的版本, 我是覺得寫的不是太好, 花了好一些功夫看, 自己翻過來的這個版本, 也還沒debug過, 基礎的應該堪用啦! 至於iOS的account kit文件可以參考: iOS 專用 Account Kit

註: plist裡面寫的app id不是我的喔!是原本Sample用的

Reading time ~1 minute

The following example shows how to create a simple Facebook login button with Facebook javascript API:

Normally, this page would be reloaded if user finished authorized your app. But it won’t be reloaded in Chrome due to the follwing error:

Unsafe JavaScript attempt to access frame with URL https://s-static.ak.fbcdn.net/connect/xd_proxy.php?version=3#cb=f363e58d9&origin=http%3A%2F%2Fwww.ab.com%2Ffcb27588&relation=opener&transport=postmessage&frame=fac4c0f18&access_token=AAAEHZBpoK3B0BALv8Cf96gaKEnn4ZBtXgjCOQCFFhVDL4K0rZAE2NGDcqZCPlZByNNKEDmYSGKHQv8jAUM2yGZCHkOcyXUKhoZD&expires_in=0&signed_request=g7sYd_XQx-EBPtQQGk-0ISRMrUDnT4L4WHAmlNsVFBU.eyJhbGdvcml0aG0iOiJITUFDLVNIQTI1NiIsImNvZGUiOiJBUURKYkZBNjZuemduSDBBN0dXWmd2SGxZZkQxQVp4Qm1MSnc0Z3ppUV9FQ25VeEYyZmcyTmJGcFh3UHZDeWhyYnFrT1RxNmRVc2xsb0d4dlFCd290UjRyV0ZsSnJtVjFoNy1QUTlJbTRROXh3MmNKMGU1b0NReWtmT1ZZcXhMUDRVRldVSDgwVU5ic1BLTHdyNk80cFlSVVItQzNIYjhyRWgxek40ZFEzSkpreXhBcU1KSHljcWxETzh2dF96T3ZpN0EiLCJpc3N1ZWRfYXQiOjEzMzExMzg3MjQsInVzZXJfaWQiOiIxMTI5MjgzNDM3In0 from frame with URL http://www.ab.com/login.html. Domains, protocols and ports must match.

Some people use FB.getLoginStatus() to check if user authorized app at page loaded. If page could be reloaded, it’s no problem. However, in this case, it’s not. 

There are several questions on StackOverflow related to this:

http://stackoverflow.com/questions/3577947/facebook-gives-unsafe-javascript-attempt-to-access-frame-with-url-error-in-chr

http://stackoverflow.com/questions/8013008/facebook-authentication-unsafe-javascript-attempt-to-access-frame-with-url

http://stackoverflow.com/questions/3010170/unsafe-javascript-attempt-to-access-frame-with-url-error-being-continuously

But none of these solves my problem. I don’t want to solve this with introduce PHP sdk. I would like to solve it with pure front end codes. 

Therefore, I find 3 solutions:

  1. Ignore the error and register login event to solve the problem:
  2. Add attribute “show-faces="true”“ to <fb:login-button> to solve
  3. Add attribute "render-in-iframe="true”“ to <fb:login-button> to solve. This is a bad idea since this is an undocumented attribute.

In solution 2 and 3, login-button seems to be placed into an iframe. And 3 would display an incomplete login button (bug?)

    Reading time ~1 minute

    我們的生活周遭不外乎就是以人、事、時、地、物 所構成, 人與人之間的互動, 事件的發生 等等

    每個Social Network Service正是在想辦法把我們的生活的縮影給數位化, 網路化

    1. 人: Personal profile, Friends, Lists, Group….虛擬著人與人之間互動的關係
    2. 事: What’s on your mind? What’s happening? 什麼事情即將發生或發生過(events)
    3. 時: 每個事件, 動作都會帶著時間
    4. 地: Check in是沒意義的動作, 只是好玩, 但如果事件或想法帶著地點就不同了, 那代表事情的發生地點, 或是你在啥地方激發了你的想法
    5. 物: 吃食物, 看電影, 聽音樂, 讀一本書…我們時時刻刻無不跟東西在互動

    Google+對Social network的解答是隱私權(Circle), 是分享(Reshare, auto upload), 是溝通(Hangout), 但Facebook卻是從人出發(Profile, Timeline, 最早由Profile), 到Open Graph (與物的互動), 想盡辦法縮影我們的生活, 雖然有很多爭議點, 我認為, 現階段G+還是無法抗衡, 比較起來, Facebook目前還是比Google懂社群 (純個人意見抒發)

    Reading time ~1 minute

    1. Go to Facebook developer : https://developers.facebook.com/apps
    2. Select your app
    3. Click “Edit Setting”
    4. Choose “Translate your app” at left hand side
    5. You’ll see a form as following. Select your language and translate all messages:
    _2011-09-26_6
    Reading time ~2 minutes

    Open graph的確是個好物, 雖然說早在去年的f8就已經推出了, 但現在更加完備了, 其實也等不及看會有啥應用推出了, 當然自己也想來玩看看,  本想照Tutorial依樣畫葫蘆抄一個體驗看看, 又覺這樣太無聊, 又想說試看看heroku + node.js, 沒真的玩過node.js, 就拿這題目試試

    今天剛好在Facebook上講到拉麵, 所以就拿我最愛吃的拉麵來當題目了.. :P

    web.js和兩個views(index.ejs, men.js)的sources放在這

    實作筆記:

    1. Tutorial裡的範例是拿Heroku + PHP, 但其實這跟拿哪一種來實作沒太大差異, 裡面的範例幾乎全部都是javascript辦到的, 所以就算把範例放到其他平台也適用
    2. Tutorial裡的範例比較靜態, 全部實作在html內就好, 我把它改成"/ramen/id"當一個物件, 但每一個物件都還是透過"men.ejs"去render
    3. heroku提供的node.js連結Facebook的範本是透過server side的everyauth+facebook-client, 我把這些都拿掉, 純用Facebook javascript api
    4. 在web.js裡實作兩個uri, “/” (index.ejs) 和 “/ramen/id” (men.ejs), 拉麵資料由web.js在render時傳給template, 目前先寫死
    5. Object debugger是蠻好用的東西, meta data寫錯一直post不出去, 剛開始沒用這抓錯還真不知道錯哪
    6. Social plugin的activity feed似乎不包含自己的

    最後在Timeline上呈現的樣子:

    用Graph API取得自己的Activities:

    https://graph.facebook.com/me/[name_space]:[action_type]/ramen

    ex. https://graph.facebook.com/me/soulogramen:eat/ramen