Vigor2920Vn 使用心得備註

Posted on 2018-09-09 by hoyo

—

Content Security Management (CSM) – URL Content Filter Profile

Hoyo 的結論

只支援 HTTP 網址，不支援 HTTPS
使用 Hex 過濾內容關鍵字方式還需要再測試，因為 Vigor 不支援，只能轉換成 URL encode ，初次嘗試失敗收場
雖然如此 Vigor2920 + iPad 的組合還是可以成功阻隔網頁及 APP 廣告

—

Vigor2920Vn 變成 Vigor2920V

Hoyo 的 2920Vn 除了要當作 WiFi AP 外還要負責 Server 的防火牆，前陣子開始 WiFi 當機，加散熱片加風扇以及設定半夜重新開機皆沒用，最近還會整台當機。

所以決定將無線網路模組拆除，如此 Vigor 2920Vn 就會覺得自己變成了 Vigor 2920V 了，管理介面的 WiFi 功能也會消失

驗明正身 Vigor2920Vn

移除無線網卡

後台介面顯示 Modal

—

華為 P9+ 安兔兔跑分

Posted on 2018-08-20 by hoyo

安兔兔跑分

CPU : 43878
GPU : 15359
UX : 25461
MEM: 7840

—

Cordova – 建立開發環境

Posted on 2018-08-15 by hoyo

什麼樣的開發環境？

因為是 Cordova 所以 Android 可以忽略 Android Studio IDE 以及 AVD ，因為要直接連手機測試

但是 IOS 就沒有省略 Xcode 的方式，因為 Mac 的硬體效能較佳，不像 PC 的差異

—

安裝、設定

設置Cordova Android編譯環境
install gradle for using in cordova build android
Direct Download Android SDK Tools / Manager (這裡有 25.2.5 的較新下載路徑)

步驟

建立 c:\bin\android 目錄，此目錄就是後續所有 Android 編譯所需用到程式存放位置
下載 25.2.3 Android SDK，下載最新版 (26.1.1) 不適用因為沒有圖形介面，後續操作不易
將 tools_r253.2.3-windows.zip 解壓縮到 c:\bin\android
設定環境變數 PATH
1. 建立 ANDROID_HOME 變數路徑到 c:\bin\android
2. 增加 tools 目錄到 PATH
3. 增加 tools\bin 目錄到 PATH
打開命令提示字元運行 >android sdk 安裝
1. Android SDK Tools
2. Android SDK Platform-tools
3. Android SDK Build-tools
4. Google USB Driver
下載 gradle Gradle | Releases
解壓縮 gradle-4.9-bin.zip 到 ANDROID_HOME 並改名為 gradle
增加 gradle\bin 目錄到 PATH

—

安裝 Cordova 以及實機測試

Apache Cordova

將手機切換到開發者模式之後，開啟 USB 偵錯，連上電腦後就可以開始安裝 Cordova 以及測試了

>npm install -g cordova
>cordova create MyApp
>cd MyApp
>cordova platform add android
>cordova run android --device

>npm install -g cordova

>cordova create MyApp

>cd MyApp

>cordova platform add android

>cordova run android --device

—

Cordova – 設定 config.xml

Posted on 2018-08-15 by hoyo

設定你的 APP 專案

Config.xml

你可以設定

專案 id, 名稱、敘述、版本號
作者
首頁檔名
是否全螢幕
是否固定方向
是否關閉彈性捲動
icon
其他 plugin 所需要設定值，例如 Google + OAuth 登入

—

首頁檔名

<content src="index.html" />

1	<content src="index.html" />

—

控制螢幕方向

<preference name="orientation" value="portrait" />

1	<preference name="orientation" value="portrait" />

default : 預設值，根據裝置
portrait : 固定為直向
landscape : 固定為橫向

—

全螢幕

<preference name="Fullscreen" value="true" />

1	<preference name="Fullscreen" value="true" />

—

關閉彈性捲動

<preference name="DisallowOverscroll" value="true"/>

1	<preference name="DisallowOverscroll" value="true"/>

—

一個範例

<?xml version='1.0' encoding='utf-8'?>
<widget android-versionCode="2" id="tw.idv.hoyo.kashiu" version="1.0.2" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>掃買樂</name>
    <description>
        買東西掃條碼、忘記以前買的價格掃條碼
    </description>
    <author email="pc@hoyo.idv.tw" href="https://www.hoyo.idv.tw">黃志賢</author>
    <content src="index.html" />
    <plugin name="cordova-plugin-whitelist" spec="1" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <preference name="Orientation" value="portrait" />
    <preference name="DisallowOverscroll" value="true"/>
    <icon src="www/img/logo.png" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
    <plugin name="phonegap-plugin-barcodescanner" spec="^8.0.0">
        <variable name="ANDROID_SUPPORT_V4_VERSION" value="27.+" />
    </plugin>
    <plugin name="cordova-plugin-camera" spec="^4.0.3" />
    <plugin name="cordova-plugin-dialogs" spec="^2.0.1" />
    <plugin name="cordova-plugin-googleplus" spec="^5.3.0">
        <variable name="WEB_APPLICATION_CLIENT_ID" value="41386861907-o4if4t5378s4imgadld7c5t3n7i7s0of.apps.googleusercontent.com" />
    </plugin>
    <plugin name="cordova-plugin-android-permissions" spec="^1.0.0" />
    <plugin name="cordova-plugin-ionic-keyboard" spec="^2.1.2" />
    <engine name="android" spec="^7.0.0" />
</widget>

<?xml version='1.0' encoding='utf-8'?>

買東西掃條碼、忘記以前買的價格掃條碼

</description>

<allow-intent href="http://*/*" />

<allow-intent href="https://*/*" />

<allow-intent href="tel:*" />

<allow-intent href="sms:*" />

<allow-intent href="mailto:*" />

<allow-intent href="geo:*" />

<allow-intent href="market:*" />

</platform>

<allow-intent href="itms:*" />

<allow-intent href="itms-apps:*" />

</platform>

</plugin>

</plugin>

</widget>

—

Facebook OAuth v3.1 臉書登入 – 使用 PHP SDK

Posted on 2018-08-10 by hoyo

流程

下載 PHP SDK php-graph-sdk (v5)
將下載的 php-graph-sdk-5.x.zip 檔內的 src\Facebook 解壓縮到網站內
準備兩個網站路徑：登入、OAuth
https://developers.facebook.com/apps 選擇臉書登入 app
1. 設定 → 進階：升級 API 版本到 v3.1
2. 產品 → 設定：將預計的 OAuth 路徑填入「有效的 OAuth 重新導向 URI」
準備產生臉書登入連結及處理 OAuth 資訊到取得臉書個人資料 id, name, email

—

PHP 程式碼

這裡只列出 Facebook OAuth class 的程式碼，前面還有一個 index.php 處理網站入口，例如後面說的 session 錯誤就是寫在 index.php 內

<?php
require_once HDPath . '/3rdParty/Facebook/autoload.php';


class FacebookLogin
{
    function __construct()
    {
        //
        if ( !empty( $_GET['b'] ) ) {
            $MethodName = $_GET['b'];
            switch( $MethodName ) {
                case (preg_match('/\w/', $MethodName) ? true : false):
                    if ( method_exists(__CLASS__, $MethodName) ) {
                        $this->$MethodName();
                        exit;
                    }
                    break;
            }
        }
    }

    // 產生 臉書登入連結
    function Generate()
    {

        $fb = new \Facebook\Facebook([
            'app_id' => '2217899999992517',
            'app_secret' => 'c0c5f3e28............aaadca6',
            'default_graph_version' => 'v3.1'
        ]);

        $helper = $fb->getRedirectLoginHelper();

        $permissions = ['email']; // Optional permissions
        $loginUrl = $helper->getLoginUrl('https://iot.hoyo.idv.tw/index.php?a=FacebookLogin&b=OAuth', $permissions);

        echo '<a href="' . htmlspecialchars($loginUrl) . '">Log in with Facebook!</a>';
    }

    // 處理臉書登入後資訊一直到取得 access token 到對應的臉書基本資料
    function OAuth()
    {

        $fb = new \Facebook\Facebook([
            'app_id' => '2217899999992517',
            'app_secret' => 'c0c5f3e28............aaadca6',
            'default_graph_version' => 'v3.1'
        ]);

        $helper = $fb->getRedirectLoginHelper();

        try {
            $accessToken = $helper->getAccessToken();
        } catch(\Facebook\Exceptions\FacebookResponseException $e) {
            // When Graph returns an error
            echo 'Graph returned an error: ' . $e->getMessage();
            exit;
        } catch(\Facebook\Exceptions\FacebookSDKException $e) {
            // When validation fails or other local issues
            echo 'Facebook SDK returned an error: ' . $e->getMessage();
            exit;
        }

        if (! isset($accessToken)) {
            if ($helper->getError()) {
                header('HTTP/1.0 401 Unauthorized');
                echo "Error: " . $helper->getError() . "\n";
                echo "Error Code: " . $helper->getErrorCode() . "\n";
                echo "Error Reason: " . $helper->getErrorReason() . "\n";
                echo "Error Description: " . $helper->getErrorDescription() . "\n";
            } else {
                header('HTTP/1.0 400 Bad Request');
                echo 'Bad request';
            }
            exit;
        }

        $oAuth2Client = $fb->getOAuth2Client();
        $tokenMetadata = $oAuth2Client->debugToken($accessToken);
        $tokenMetadata->validateAppId('221787181332517'); // Replace {app-id} with your app id
        $tokenMetadata->validateExpiration();

        if (! $accessToken->isLongLived()) {
            // Exchanges a short-lived access token for a long-lived one
            try {
                $accessToken = $oAuth2Client->getLongLivedAccessToken($accessToken);
            } catch (\Facebook\Exceptions\FacebookSDKException $e) {
                echo "<p>Error getting long-lived access token: " . $e->getMessage() . "</p>\n\n";
                exit;
            }
        }

        $GraphURL  = 'https://graph.facebook.com/v3.1/me?fields=id,name,email';
        $GraphURL .= '&access_token='. (string)$accessToken;
        $GraphURL .= '&format=json&method=get&pretty=0';
        $ch = curl_init();
        curl_setopt($ch, CURLOPT_URL, $GraphURL);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER , 1);
        $FBUserInfo = curl_exec($ch);
        curl_close($ch);

        // 使用者資訊
        $UserInfo = json_decode($FBUserInfo, true);
        print_r($UserInfo);
    }
}

100

101

102

103

104

105

106

107

<?php

require_once HDPath . '/3rdParty/Facebook/autoload.php';

class FacebookLogin

{

function __construct()

{

if ( !empty( $_GET['b'] ) ) {

$MethodName = $_GET['b'];

switch( $MethodName ) {

case (preg_match('/\w/', $MethodName) ? true : false):

if ( method_exists(__CLASS__, $MethodName) ) {

$this->$MethodName();

exit;

}

break;

}

// 產生臉書登入連結

function Generate()

{

$fb = new \Facebook\Facebook([

'app_id' => '2217899999992517',

'app_secret' => 'c0c5f3e28............aaadca6',

'default_graph_version' => 'v3.1'

]);

$helper = $fb->getRedirectLoginHelper();

$permissions = ['email']; // Optional permissions

$loginUrl = $helper->getLoginUrl('https://iot.hoyo.idv.tw/index.php?a=FacebookLogin&b=OAuth', $permissions);

echo '<a href="' . htmlspecialchars($loginUrl) . '">Log in with Facebook!</a>';

}

// 處理臉書登入後資訊一直到取得 access token 到對應的臉書基本資料

function OAuth()

{

$fb = new \Facebook\Facebook([

'app_id' => '2217899999992517',

'app_secret' => 'c0c5f3e28............aaadca6',

'default_graph_version' => 'v3.1'

]);

$helper = $fb->getRedirectLoginHelper();

try {

$accessToken = $helper->getAccessToken();

} catch(\Facebook\Exceptions\FacebookResponseException $e) {

// When Graph returns an error

echo 'Graph returned an error: ' . $e->getMessage();

exit;

} catch(\Facebook\Exceptions\FacebookSDKException $e) {

// When validation fails or other local issues

echo 'Facebook SDK returned an error: ' . $e->getMessage();

exit;

}

if (! isset($accessToken)) {

if ($helper->getError()) {

header('HTTP/1.0 401 Unauthorized');

echo "Error: " . $helper->getError() . "\n";

echo "Error Code: " . $helper->getErrorCode() . "\n";

echo "Error Reason: " . $helper->getErrorReason() . "\n";

echo "Error Description: " . $helper->getErrorDescription() . "\n";

} else {

header('HTTP/1.0 400 Bad Request');

echo 'Bad request';

}

exit;

}

$oAuth2Client = $fb->getOAuth2Client();

$tokenMetadata = $oAuth2Client->debugToken($accessToken);

$tokenMetadata->validateAppId('221787181332517'); // Replace {app-id} with your app id

$tokenMetadata->validateExpiration();

if (! $accessToken->isLongLived()) {

// Exchanges a short-lived access token for a long-lived one

try {

$accessToken = $oAuth2Client->getLongLivedAccessToken($accessToken);

} catch (\Facebook\Exceptions\FacebookSDKException $e) {

echo "<p>Error getting long-lived access token: " . $e->getMessage() . "</p>\n\n";

exit;

}

$GraphURL = 'https://graph.facebook.com/v3.1/me?fields=id,name,email';

$GraphURL .= '&access_token='. (string)$accessToken;

$GraphURL .= '&format=json&method=get&pretty=0';

$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, $GraphURL);

curl_setopt($ch, CURLOPT_RETURNTRANSFER , 1);

$FBUserInfo = curl_exec($ch);

curl_close($ch);

// 使用者資訊

$UserInfo = json_decode($FBUserInfo, true);

print_r($UserInfo);

}

$UserInfo 如此即可得到該登入使用者在 Facebook 的基本資料 id, name, email

Array ( [id] => 637955764 [name] => 黃志賢 [email] => pc@hoyo.idv.tw )

1	Array ( [id] => 637955764 [name] => 黃志賢 [email] => pc@hoyo.idv.tw )

—

無法載入網址: 這個網址的網域未包含在應用程式的網域中。若要載入這個網址，請在應用程式設定的「應用程式網域」欄位中新增應用程式的所有的網域及子網域。

請使用 Facebook 提供 SDK ，注意流程即可避免此問題

—

Facebook SDK returned an error: Cross-site request forgery validation failed. Required param “state” missing from persistent data.

Facebook SDK returned an error: Cross-site request forgery validation failed. The “state” param from the URL and session do not match

PHP 必須開啟 session_start();

—

為什麼 Facebook 使用 PHP 不是使用 Javascript ?

因為 Facebook 的 js 寫的很爛只能跑在「較新版」的 Chrome 例如 v62 ，而 Google 可以跑在 Chrome v44 所以使用 PHP 沒有 js 相容性問題

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : '2217999999999517',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v3.1'
    });
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "https://connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));

FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
});

  </script>

<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>

<div id="status">
</div>

window.fbAsyncInit = function() {

FB.init({

appId : '2217999999999517',

autoLogAppEvents : true,

xfbml : true,

version : 'v3.1'

});

};

(function(d, s, id){

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) {return;}

js = d.createElement(s); js.id = id;

js.src = "https://connect.facebook.net/en_US/sdk.js";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));

FB.getLoginStatus(function(response) {

statusChangeCallback(response);

});

</script>

<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">

</fb:login-button>

</div>

—

jQuery DOM Insertion, Inside & Outside

Posted on 2018-08-01 by hoyo

如何控制插入內容相對於對象的位置

jQuery 插入內容時可以使用 append(), prepend(), before(), after() 四個函式，不同的函式插入的位置不同

<div id="aaa" style="border: 1px solid #aaa;">aaaaa</div>

<script>
    $('#aaa').before('<div>before 1</div>');
    $('#aaa').before('<div>before 2</div>');

    $('#aaa').after('<div>after 1</div>');
    $('#aaa').after('<div>after 2</div>');

    $('#aaa').append('<div>append 1</div>');
    $('#aaa').append('<div>append 2</div>');

    $('#aaa').prepend('<div>prepend 1</div>');
    $('#aaa').prepend('<div>prepend 2</div>');
</script>

<div id="aaa" style="border: 1px solid #aaa;">aaaaa</div>

$('#aaa').before('<div>before 1</div>');

$('#aaa').before('<div>before 2</div>');

$('#aaa').after('<div>after 1</div>');

$('#aaa').after('<div>after 2</div>');

$('#aaa').append('<div>append 1</div>');

$('#aaa').append('<div>append 2</div>');

$('#aaa').prepend('<div>prepend 1</div>');

$('#aaa').prepend('<div>prepend 2</div>');

</script>

—

hoyo 學習紀錄

PHP 網頁應用 IOT 物聯網自動化

Author Archives: hoyo

Vigor2920Vn 使用心得備註

Content Security Management (CSM) – URL Content Filter Profile

Vigor2920Vn 變成 Vigor2920V

華為 P9+ 安兔兔跑分

安兔兔跑分

Cordova – 建立開發環境

什麼樣的開發環境？

安裝、設定

安裝 Cordova 以及實機測試

Cordova – 設定 config.xml

設定你的 APP 專案

首頁檔名

控制螢幕方向

全螢幕

關閉彈性捲動

一個範例

Facebook OAuth v3.1 臉書登入 – 使用 PHP SDK

流程

PHP 程式碼

無法載入網址: 這個網址的網域未包含在應用程式的網域中。若要載入這個網址，請在應用程式設定的「應用程式網域」欄位中新增應用程式的所有的網域及子網域。

Facebook SDK returned an error: Cross-site request forgery validation failed. Required param “state” missing from persistent data.

為什麼 Facebook 使用 PHP 不是使用 Javascript ?

jQuery DOM Insertion, Inside & Outside

如何控制插入內容相對於對象的位置