華為 P9+ 安兔兔跑分

Posted on 2018-08-20 by hoyo

安兔兔跑分

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

—

293 total views, no views today

Cordova – 建立開發環境

Posted on 2018-08-15 by hoyo

—

Could not find an installed version of Gradle either in Android Studio,or on your system to install the gradle wrapper. Please include gradlein your path, or install Android Studio

>cordova run android --device

Checking Java JDK and Android SDK versions

ANDROID_SDK_ROOT=undefined (recommended setting)

ANDROID_HOME=C:\Users\DAE User 201909\AppData\Local\Android\sdk (DEPRECATED)

Could not find an installed version of Gradle either in Android Studio,

or on your system to install the gradle wrapper. Please include gradle

in your path, or install Android Studio

下載 gradle (Gradle | Installation)
解壓到 C:\Gradle
將 C:\Gradle\gradle-6.5.1\bin 新增到 PATH 環境變數內

—

什麼樣的開發環境？

因為是 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

—

‘cordova’ 不是內部或外部命令、可執行的程式或批次檔

cordova不是内部或外部命令的解决方案

編輯 PATH 環境變數，增加 C:\Users\user name\AppData\Roaming\npm 路徑即可

—

855 total views, no views today

Cordova – 設定 config.xml

Posted on 2018-08-15 by hoyo

設定你的 APP 專案

Config.xml

你可以設定

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

—

首頁檔名

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

—

控制螢幕方向

Config.xml 檔 – Apache Cordova

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

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

Anddroid

根據陀螺儀翻轉方向

</platform>

—

全螢幕

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

—

關閉彈性捲動

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

—

一個範例

<?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>

—

847 total views, no views today

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 – 產生 OAuth 登入連結

<?php

session_start();

require_once __DIR__ . '/3rdParty/php-graph-sdk-5.x/src/Facebook/autoload.php';

$fb = new \Facebook\Facebook([

'app_id' => '221787181332517',

'app_secret' => 'c0c5f3e2890c21a937e173f19aaadca6',

'default_graph_version' => 'v3.1'

]);

$helper = $fb->getRedirectLoginHelper();

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

$loginUrl = $helper->getLoginUrl('https://member.hoyo.idv.tw/Facebook.php&b=OAuth', $permissions);

echo '<a href="' . htmlspecialchars($loginUrl) . '">Facebook 登入</a>';

如此即會產生如以下這樣的連結

1	<a href="https://www.facebook.com/v3.1/dialog/oauth?client_id=221787181332517&state=6bff312f5abde8028fdb163c1fdf9e62&response_type=code&sdk=php-sdk-5.7.0&redirect_uri=https%3A%2F%2Fmember.hoyo.idv.tw%2FFacebook.php%26b%3DOAuth&scope=email">Facebook 登入</a>

—

OAuth 登入處理 (https://member.hoyo.idv.tw/Facebook.php&b=OAuth)

這裡只列出 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;

}

// 處理臉書登入後資訊一直到取得 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

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();

—

Graph returned an error: This authorization code has been used.

—

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

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

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>

—

3,426 total views, no views today

Let’s Encrypt – *.hoyo.idv.tw 通配網域證書

Posted on 2018-08-04 by hoyo

—

certbot-auto 1.14.0 (需要等 3 個月後驗證確定)

似乎可以不使用 –preferred-challenges dns 來指定 dns 認證

1	# ./certbot-auto certonly --manual -d *.hoyo.idv.tw -d hoyo.idv.tw

使用網頁即可

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Create a file containing just this data:

Zk5sddv71HDQvwzWi1B37LHbUpSe-6OE_gO3Af_PJTQ.RDdk2sTQ5QfyVyl3xudYprau-lsGy_OsOlKNdzSCksA

And make it available on your web server at this URL:

http://hoyo.idv.tw/.well-known/acme-challenge/Zk5sddv71HDQvwzWi1B37LHbUpSe-6OE_gO3Af_PJTQ

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

不過認證之前必須注意要把網址 Rewrite 關閉，否則會失敗

—

參考

Let’s Encrypt Wildcard Certificate

—

取得 certbot-auto 及執行

1 2	# wget https://dl.eff.org/certbot-auto # chmod a+x ./certbot-auto

執行，記得產生一個通配網域一個只有網域名稱證書，如此單獨使用網域名稱時才不會 SSL_ERROR_BAD_CERT_DOMAIN 證書問題

[root@hoyoserver ~]# ./certbot-auto certonly --manual --preferred-challenges dns -d *.hoyo.idv.tw -d hoyo.idv.tw

Saving debug log to /var/log/letsencrypt/letsencrypt.log

Plugins selected: Authenticator manual, Installer None

Cert is due for renewal, auto-renewing...

Renewing an existing certificate

Performing the following challenges:

dns-01 challenge for hoyo.idv.tw

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

NOTE: The IP of this machine will be publicly logged as having requested this

certificate. If you're running certbot in manual mode on a machine that is not

your server, please ensure you're okay with that.

Are you OK with your IP being logged?

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

(Y)es/(N)o: y

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Please deploy a DNS TXT record under the name

_acme-challenge.hoyo.idv.tw with the following value:

2ezwTObsoUiEdGvpi9t3_UTTwXl3_02MkAzXNUl4MJg

Before continuing, verify the record is deployed.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Press Enter to Continue

Waiting for verification...

Cleaning up challenges

IMPORTANT NOTES:

- Congratulations! Your certificate and chain have been saved at:

/etc/letsencrypt/live/hoyo.idv.tw/fullchain.pem

Your key file has been saved at:

/etc/letsencrypt/live/hoyo.idv.tw/privkey.pem

Your cert will expire on 2019-01-11. To obtain a new or tweaked

version of this certificate in the future, simply run certbot-auto

again. To non-interactively renew *all* of your certificates, run

"certbot-auto renew"

- If you like Certbot, please consider supporting our work by:

Donating to ISRG / Let's Encrypt: https://letsencrypt.org/donate

Donating to EFF: https://eff.org/donate-le

編輯 DNS

1	vi /etc/named/hoyo.idv.tw.db

1 2	_acme-challenge.hoyo.idv.tw. 600 IN TXT "PR-w7263U8CSYKmH8gbydAWjVhXnS7QZdfHFysF7fCE" _acme-challenge.hoyo.idv.tw. 601 IN TXT "h_FU0vnvtDKAIRx-QCY0JPsQRUqyMp_Qu2iJQDtSEtY"

重新啟動 DNS

1	# systemctl restart named

驗證

[root@hoyoserver ~]# dig _acme-challenge.hoyo.idv.tw txt

; <<>> DiG 9.9.4-RedHat-9.9.4-61.el7 <<>> _acme-challenge.hoyo.idv.tw txt

;; global options: +cmd

;; Got answer:

;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 16167

;; flags: qr rd ra; QUERY: 1, ANSWER: 1, AUTHORITY: 0, ADDITIONAL: 1

;; OPT PSEUDOSECTION:

; EDNS: version: 0, flags:; udp: 512

;; QUESTION SECTION:

;_acme-challenge.hoyo.idv.tw. IN TXT

;; ANSWER SECTION:

_acme-challenge.hoyo.idv.tw. 599 IN TXT "2ezwTObsoUiEdGvpi9t3_UTTwXl3_02MkAzXNUl4MJg"

;; Query time: 54 msec

;; SERVER: 8.8.8.8#53(8.8.8.8)

;; WHEN: 日 10月 14 00:03:23 CST 2018

;; MSG SIZE rcvd: 112

Enter 繼續執行，沒問題出現以下畫面就代表證書建立完成

IMPORTANT NOTES:

- Congratulations! Your certificate and chain have been saved at:

/etc/letsencrypt/live/hoyo.idv.tw/fullchain.pem

Your key file has been saved at:

/etc/letsencrypt/live/hoyo.idv.tw/privkey.pem

Your cert will expire on 2018-08-28. To obtain a new or tweaked

version of this certificate in the future, simply run certbot-auto

again. To non-interactively renew *all* of your certificates, run

"certbot-auto renew"

- If you like Certbot, please consider supporting our work by:

Donating to ISRG / Let's Encrypt: https://letsencrypt.org/donate

Donating to EFF: https://eff.org/donate-le

—

Online dig

G Suite 工具箱 Dig

—

自動更新證書

-目前手動更新中-

—

Bind 9 動態 DNS

動態 DNS 設定技巧

1 2	# chown root:named /etc/named # chmod 770 -R /etc/named

# nsupdate -k /etc/named/Kdnskey.+165+50851.key<< co

>server 127.0.0.1

>update delete _acme-challenge.hoyo.idv.tw TXT

>update add _acme-challenge.hoyo.idv.tw 0 TXT $CERTBOT_VALIDATION

>send

—

其他注意事項

失敗的指令也會算在 Rate Limits
SSL_ERROR_BAD_CERT_DOMAIN : hoyo.idv.tw 不等於 *.hoyo.idv.tw ，必須使用 hoyo.idv.tw 證書或是將 hoyo.idv.tw 轉到 www.hoyo.idv.tw 才能套用通配網域證書

—

457 total views, no views today

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>

$('#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>

—

453 total views, no views today

hoyo 學習紀錄

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

Monthly Archives: 8 月 2018

華為 P9+ 安兔兔跑分

安兔兔跑分

Cordova – 建立開發環境

Could not find an installed version of Gradle either in Android Studio,or on your system to install the gradle wrapper. Please include gradlein your path, or install Android Studio

什麼樣的開發環境？

安裝、設定

安裝 Cordova 以及實機測試

‘cordova’ 不是內部或外部命令、可執行的程式或批次檔

Cordova – 設定 config.xml

設定你的 APP 專案

首頁檔名

控制螢幕方向

全螢幕

關閉彈性捲動

一個範例

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

流程

PHP – 產生 OAuth 登入連結

OAuth 登入處理 (https://member.hoyo.idv.tw/Facebook.php&b=OAuth)

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

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

Graph returned an error: This authorization code has been used.

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

Let’s Encrypt – *.hoyo.idv.tw 通配網域證書

certbot-auto 1.14.0 (需要等 3 個月後驗證確定)

參考

取得 certbot-auto 及執行

Online dig

自動更新證書

Bind 9 動態 DNS

其他注意事項

jQuery DOM Insertion, Inside & Outside

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