iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 19
1
Modern Web

我的網站、您的手機、它的Cordova、誰的第三方系列 第 20

{"19":"Facebook Login(Redirect where?)}

2010年,我參加iT邦鐵人賽時,寫的系列是「FB不浪漫 http://ithelp.ithome.com.tw/articles/10050850 」。主要是在介紹,如何透過Facebook 的 PHP API,取得Facebook 使用者的UID(UserID),然後透過這個UID,可以做一些事情,竟然這樣六年就過了。

2013年,我到了台東之後,在當時做的網站裡,加入了一個Facebook登入的功能,在使用者透過Facebook登入之後,將UID做為是不是這個網站會員的依據。

但到了2016年,我發現,我之前取得到的UID,和現在用同一個網站取得的UID不一樣了。

仔細一查,才知道,原來Facebook將這個UID 取得,做了調整。

做了什麼調整呢? 在2010年的時候,我們透過程式取得的UID,就是這個Facebook 帳號的UID,可以在當時每一個Facebook 裡的APP使用,例如:從Facebook 、開心農場、開心餐廳 或 開心水族箱,取得的都是同一組UID,但我不確定,什麼時候改成,每個人在每個不同的Facebook 應用程式裡,都會有一組不同的UID,而這組UID,只能限用於對應到的應用程式。

就讓我們來看看要怎麼樣,在自己的網站,使用Facebook Login吧,我的程序如下圖。
http://ithelp.ithome.com.tw/upload/images/20161219/20006132LKRWvTNNlT.jpg

先介紹兩個Facebook重要的網站,一個是Facebook Developers,另一個是Facebook Deveopers APP,

https://developers.facebook.com/
http://ithelp.ithome.com.tw/upload/images/20161219/20006132pcVw3SMEQF.png

https://developers.facebook.com/apps/
http://ithelp.ithome.com.tw/upload/images/20161219/20006132FzPQg9BofB.png

Facebook Developers,裡面提供了Facebook 所有的API 說明文件和範例,目前像是Google, Facebook, Yahoo, Twitter, Github等網站,都有提供自己的API,讓使用者使用。如果直接複制它們提供出來的範例,可不可以使用...有些可以,有些不行,不行的地方在於...誰知道我們需要拿這些API來做什麼事。

也因如此,
有範例是一回事,
要使用的平台,能不能用,是一回事,
要怎麼使用,是一回事,
知道要用什麼,是一回事。

有範例,知道要在什麼平台使用,也知道要用什麼,但是如果寫不出來...像我就一直試一直試。

http://ithelp.ithome.com.tw/upload/images/20161219/20006132TAlO7d5bvK.png

Facebook Deveopers APP,是我們在Facebook裡面,申請「應用程式」的主控台(Console),我們進入之後,可以看到,屬於自己申請的應用程式。
http://ithelp.ithome.com.tw/upload/images/20161219/20006132br8TjIRA2K.png

http://ithelp.ithome.com.tw/upload/images/20161219/2000613280sZf22HOG.png
如果,我們要在透過VS 打包的Cordova APP裡,使用Facbeook Login這個功能,它應該被歸在那一類?

Cordova 號稱可稱可以生成跨平台的APP,所以如果我用Cordova 建置APP,打包成Android時,就要使用Facebook Login for Android。使用Apple時,就使用Facebook Login for iOS,這樣沒有問題吧。

這個問題的答案是...Facebook Login for WEB,不論是要將APP打包成Android使用或iOS使用,都是WEB。是的,就是透過 Javascript,來做Facebook Login這件事。

http://ithelp.ithome.com.tw/upload/images/20161219/20006132nctCij86gw.png

我在Facebook已申請了一個應用程式,在應用程式設定的內容裡,只有一個地方,最重要,如果設定不對,Facebook Login就不會成功。

http://ithelp.ithome.com.tw/upload/images/20161219/20006132lvYNncWfwR.png

「有效的 OAuth 重新導向 URI」,這個設定,用白話文說是「透過Facebook登入成功之後,再來要去那裡?」

2010和2013年在做這個功能時,因為是在網站的網頁裡,使用Facebook Login,使用者登入之後,就重新導向到下一個網頁。程序如下:

http://ithelp.ithome.com.tw/upload/images/20161219/20006132d6FtPrIqrI.jpg
可是,現在是要將網站,打包成為APP,在智慧型手機上執行,那來的domain? 這個疑惑,困擾了我很久...最後我才發現,自己想太多了。

(待)

2016/12/19 Sunallen


上一篇
{"18":"Camera}
下一篇
{"20":"Facebook Login(InAppBrowser)}
系列文
我的網站、您的手機、它的Cordova、誰的第三方32

尚未有邦友留言

立即登入留言