{"20":"Facebook Login(InAppBrowser)}

2017 iT 邦幫忙鐵人賽

DAY 20

Modern Web

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

2017鐵人賽

SunAllen

2016-12-20 00:29:46

11763 瀏覽

分享至

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

在網路上試了很久，發現許多人也有同樣的疑惑，很多人的回答都是，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了。

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

首先，在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