iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 20
1

重新導向到下一個網頁,不是問題,問題是...手機那來的網域?

在網路上試了很久,發現許多人也有同樣的疑惑,很多人的回答都是,http://localhost,「localhost」指的是某個網路裝置本身,類似127.0.0.1,理論上是合理,但在試過很多之後,像是...

http://localhost:8080
http://localhost:8888
http://localhost/callback
http://localhost/comeback...試到這邊的時候,我才發現,我又不是Jack...

不論怎麼試,都出現下列這個錯誤訊息。

網址已遭封鎖: 這個重新導向失敗了,因為重新導向 URI 並未列入應用程式用戶端 OAuth 設定的許可名單中。請確定已開啟用戶端和網站 OAuth 登入,並將你所有的應用程式網域新增為有效的 OAuth 重新導向 URI。

試到後來,想說,不如這樣...就算了吧,可是在這個地方算了,後面要做的事,就全都不能做了。

仔細再回頭,看看之前試過的記錄...我改成... 「http://localhost/get_fb.html」

竟然成功了...可以在Cordova的環境下,使用Facebook Login API了。

http://ithelp.ithome.com.tw/upload/images/20161220/200061327ytZqDH9jU.png

http://ithelp.ithome.com.tw/upload/images/20161220/20006132pudOAa4O10.png

接下來,就來看看,該怎麼處理這個部份吧。

首先,在Facebook Login 的部份,我用了一個外國人寫的Plugin,叫做 OpenFB,
網址如右:https://github.com/ccoenraets/OpenFB

    <script src="scripts/openfb.js"></script>
    
    將這個Plugin載入到自己的網頁之後,在自己的網頁檔內,加入下列的內容。

   <script>
        openFB.init({ appId: '(自行輸入)' });
    function login() {
        openFB.login(
                function(response) {
                    if (response.status === 'connected') {
                        alert('Facebook登入成功, 已取得Access Token: ' + response.authResponse.accessToken);
                       } else {
                        alert('Facebook login failed: ' + response.error);
                    }
                }, { scope: 'email,public_profile,user_friends' });
        openFB.api({
            path: '/me',
            success: function (data) {
            //    console.log(JSON.stringify(data));
            //    alert(JSON.stringify(data));
                document.getElementById("userName").innerHTML = data.name; //取得個人Facebook 暱稱
                document.getElementById("userID").innerHTML = data.id; //取的個人在這個APP裡的UserID
                document.getElementById("userPic").src = 'http://graph.facebook.com/' + data.id + '/picture?type=small'; //取得個人在FB的大頭貼
            },
            error: errorHandler
        });
    }
    function errorHandler(error) {
        alert(error.message);
    }
    </script>

除了使用OpenFB Plugin之外,如果在Cordova 環境中,使用OpenFB的話,則需要另一個Plugin,就是InAPPBrowser,在處理Facebook登入的過程時,會有一些傳回來和傳回去的連結,這個時候,這個InAPPBrowser就可以擔任,Facebook Login 程序 和 Cordova 中間的橋梁,讓兩造雙方,可以互傳資料。

如果,我有辦法用白話文介紹那些傳來傳去的程序,那我會再後面介紹這個部份。

我們也可以很單純的使用InAPPBrowser這個Plugin,就是...當使用Cordova的APP一打開時,就連到一個特定的網頁,然後,所有的操作行為和模式,都是由那個網站控制,而不需透過Cordova,範例如下:

<!DOCTYPE html>
<html>
<head>
    <title>In AppBrowser Example</title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="cordova.js"></script>
    <script>
        document.addEventListener("deviceready", onDeviceReady, true);
        function onDeviceReady() {
            var url = "http://www.travel167.com/jrtravel/m_index.php"; //在這邊指定要連過去的網頁
            window.open(url, "_self", "location=no", 'toolbar=no'); //參數依序是,不開新分頁,不顯示網址,不提供工具列
        }
    </script>
</head>
<body>
</body>
</html>

可以順利使用Facebook登入之後,我發現...我只要「登入」->「關掉APP」之後,就需要重新再登入...這就好像,我在手機裡登入Line之後,每次開啟LINE的時候,都要再登入。

雖然從Security的角度來看,這是很好的一件事,但是從實務面來說,這是非常不好的事情。

接著,我想到另外一個問題,以前在網站做Facebook Login之後,我可以透過PHP的Session,讓使用者在切換不同頁面時,皆是在登入的狀態,可是在Cordova裡面...可以執行PHP嗎?

那時候,PHP 連結MySQL,可以將使用者的UserID,存到資料庫裡,做為是否已註冊之依據,現在連PHP狀態未明,更別說MySQL了,怎辦?

像我這種外行,在寫程式時,除了解決一個問題,是為了擁抱更多問題之外,另外,我就像是在看「本格推理」類型的小說一樣...答案淺而易見,只是我都沒發現...

1.每次都要重新登入嗎?
2.可以執行PHP嗎?
3.如何連結MySQL?

在這個凡事講求 Class(這個Class不是那個Class...), Object, Function, Modular, Method, Property 等等等的年代...透過解問題養問題,也是一種學習...

(待)

2016/12/20 Sunallen


上一篇
{"19":"Facebook Login(Redirect where?)}
下一篇
{"21":"Facebook Login(WebStorage)}
系列文
我的網站、您的手機、它的Cordova、誰的第三方31

尚未有邦友留言

立即登入留言