使用 React Native 與 Amazon Cognito 實作 Google & Facebook 登入的功能

Standard

最近開始接觸 React Native 的專案了,能用前端技術跟知識同時開發 iOS/Android App 滿新奇的!雖然缺乏原生 App 的知識讓我踩了不少坑,其中不少還是非常低能的坑 XD!

這次實作的任務是要在 App 加上 Google/Facebook 登入的功能,而會員系統是建構在 Amazon Cognito 上面的,再加上 React Native 的相關套件 – react-native-facebook-loginreact-native-google-signin 來實作 App 中的登入功能。其中有些設定上的眉角讓我花了不少時間嘗試,所以整理成本篇的筆記備忘囉~


本文大綱

本篇文章滿長的,所以先整理大綱在此,了解一下會介紹到的部份:

  • 本文的套件版本
  • AWS SDK React Native 與 Amazon Cognito
  • react-native-facebook-login
  • react-native-google-signin
  • 繼續未完的 Amazon Cognito 設定
  • 前端程式
  • 疑難排解
  • 用 Amazon Lambda 來做 Serverless API
  • Amazon API Gateway
  • 在 App 端補上註冊(register)的 function
  • Source Code
  • 參考資料

繼續閱讀…

關於 AppLinks 兩三事

Standard

App Links

前言

在行動裝置時代,使用者更常停留在 App 中瀏覽資訊(像是 Facebook),而相對地在 Web 的停留時間就降低了。過去我們在 Web 上透過超連結搭起不同網站之間的橋,而在 App 與 App 之間又如何做到這件事呢?

當然,我們可以透過 URL Scheme 開啟應用程式,但我們並無法得知世上每個 App 的 URL Scheme,甚至是應用程式某個頁面 Deep Link 的 Scheme,而且萬一哪天增修了那又該如何?

我最近一部分的工作就在研究如何加強 App 於 Mobile Web 上的連結體驗,其實各大廠早提出了自己的構想及標準,例如 Google 提出的 App Indexing,以及 Facebook 提出的 App Links。

今天就 App Links 的部份做個簡單筆記與實作參考。App Indexing 等下次有空再寫文介紹囉。

繼續閱讀…

[Android] Facebook Home 試用,以及修改裝置名稱以安裝至 SAMSUNG S2 (i9100) 的方法

Standard

上週 Facebook 發表 Facebook Home,而於美國時間 04/12 已上架至 Google Play,但根據官方網頁消息,目前支援的機型僅有:HTC One X、HTC One X+、Samsung GALAXY S III 以及 Samsung GALAXY Note II 等。不過今天一早已經發現網上有 Facebook Home 的 apk 流出版,便下載來嘗鮮體驗看看。(筆者註:流出版的 apk 無法保證其安全性,請自行斟酌是否要下載安裝

 

我使用的是 Samsung GALAXY S II (i9100),並不在官方宣稱的支援機種內,故就算安裝完 Facebook Home apk 後開啟(同時也請記得從 Google Play 更新 Facebook 與 Facebook 即時通喔!),僅能看到這個畫面:

謝謝你安裝 Facebook Home。目前你的裝置尚未被支援,一旦 Facebook Home 可在你的裝置上使用,你將會收到通知。

 

還是很想試用看看的話,就得修改 Android 裝置名稱來欺騙應用程式,讓其認為這支手機是支援的機型囉!
不過必須要 root 才能進行系統檔案的修改,至於是否值得為此去 root 與冒修改系統檔案的風險,就留給讀者自己評估囉。

繼續閱讀…

[Facebook][Javascript] Facebook 按讚鈕預設隱藏,而後顯示卻在 IE / Firefox 中無法顯示的解法

Standard

上週在做個活動案時,有個需求是希望使用者必須是某個 Facebook 專頁的粉絲才能進行遊戲,若尚未成為粉絲,則立即用 Lightbox 方式顯示按讚鈕讓使用者按讚,「讚」完就可以進入遊戲。

是個相當單純的需求,不過有個需要特別注意的地方:若一開始用 CSS 讓放置按讚鈕的容器(如 div)為 display: none;,而後才讓其顯示(本例是透過 jQuery 的 $(element).show())的話,在 Internet Explorer 與 Firefox 上會無法讓按讚鈕顯示出來,而 Google Chrome 卻可以。

情況如圖:

可以在檢測元素工具中觀察到,Internet Explorer 與 Mozilla Firefox 瀏覽時,在容器被 show() 時,按讚元素的寬高仍為 0,但 Google Chrome 是正常的寬高。

翻閱了 Facebook Developer 文件中提到 FB.XFBML.parse() 方法可重新解析頁面(或指定)的元素,讓 Facebook 的外掛元件得以重新被解析一次。

果然,在主控台中手動呼叫該方法後,按讚框成功地顯示出來了!

繼續閱讀…

[Facebook][C#] 透過 Graph API 上傳照片至粉絲專頁(Page)並將之設為封面照片(Cover)

Standard

最近看到一個有趣的 Facebook 網路行銷案例,是 Nescafe 的 Facebook 粉絲專頁活動。它們的封面照片(Cover)一開始是一張滿是咖啡豆的圖片,隨著粉絲數的增加,封面照片的咖啡豆會越來越少,最後會露出它們的新產品。
影片在這:

從技術端來看,就對「如何自動更換粉絲專頁的封面照片」這件事感到好奇了。當然粉絲數增加不快的話,用手動換也是可行的,但我想應該還能串上其他的應用吧!讓換粉絲專頁的封面照片是即時又有趣的。

總之來看如何實作囉。

繼續閱讀…

[Facebook][ASP.NET] 透過 signed_request 變數取得應用程式於粉絲專頁中的資訊(是否已按讚、傳遞參數)

Standard

這東西應該很久了,但最近有這個需求就做一下筆記囉。

我們在製作 Facebook 粉絲專頁的頁籤應用程式時,會有傳遞參數的需求,但若用一般方式丟參數進去,會發現接不到 :/

https://www.facebook.com/{page_id}?sk=app_{app_id}&key=value

這樣是不行的…

stackoverflow 找了一下,原來要透過 app_data 這個參數丟,並透過 signed_request 去解析。

是這樣丟的:

https://www.facebook.com/{page_id}?sk=app_{app_id}&app_data={"key1":"value1","key2":"value2"}

繼續閱讀…

[Facebook][jQuery] 讓「讚」顯示完整的數字

Standard

我們在網頁中嵌入 Facebook 的「讚」按鈕,當被讚超過一定數量,就不會顯示明確的數字,如下圖:

但這個案子希望能顯示完整的數字,要怎麼解決呢?

對了,順帶一提,「讚」的數字包含「讚」以及「分享」次數。( The count on the Like button will include all likes and shares — from Faceook Developer, Like Button

 

思路是這樣,將原有的數字藏起來,然後加入我們用 Graph API 查詢出來的明確數字,噢對,你還得準備數字對話泡泡的圖檔。

註:不知道這樣的解法是否有違反 Facebook 使用規範 品牌引用許可資源中心 – 使用方針 – Facebook 讚按鈕 中的「你可以依照所需調整大小,但是不能以其他任何形式修改「讚」按鈕 (如變動設計樣式)」。

繼續閱讀…

[Facebook] Open Graph(開放社交關係圖) 動作設定教學

Standard

Facebook 於 2011/09/23 發佈了新的 Open Graph 開發者教學,在應用程式中出現了 Open Graph(開放社交關係圖) 頁籤,項目相當多,因此快速做了簡單的翻譯,方便未來研究之用。

其中此篇便是讓使用者可以使用各種「動作」的新功能,就像除了某某某覺得什麼很「讚」之外,還可以增加 某某某 listen to 某專輯、某某某 cook 一道菜 這樣的動作。
這邊有相關的介紹。
※不過很可惜的是目前尚不支援中文的動作與物件。

翻譯功力尚淺,請各位前輩不吝指正,也歡迎同好一起討論:)


這份教學將會帶領你照著下面步驟建立、測試、發佈你的第一個 Open Graph 應用程式。我們會建立一個讓使用者發佈料理資訊的範例應用程式。

如果你對 Open Graph 有疑問,請造訪: Debug and Troubleshoot。為了讓你更快上手,我們亦提供了 範例 下載。

繼續閱讀…

Facebook 政策條款的案例與解釋

Standard

2012 更新:
目前官方也有中文版囉!小弟翻譯的這篇,就當作參考吧~

==

由於前陣子做的案子(Facebook App)動不動就被刪掉,Facebook 官方判斷應用程式是否違規的準則究竟為何實在沒個準,因此就來稍微整理一下官方文件中關於 policy 的案例與解釋
(雖然有些時候根本就是誤判,沒什麼違反的也被刪除,但還是整理一下以供參考吧)

PS. 請原諒小弟的英文能力 2266,若有翻譯錯誤或不洽當的請不吝告知。也希望這篇相關規定能在實際製作 Facebook App 上幫助各位避開違反規定的條款。

主要分為 廣告、「讚」按鈕、照片、發佈訊息、條款與商標 四大單元。
繼續閱讀…