white筆記: 5月 2015

2015年5月17日星期日

驗證碼

驗證碼分成三個部分，
A test.php 主頁面顯示驗證碼輸入跟刷新按鈕
B image.php 產出亂數的圖片，並存入session
C check.php 驗證圖片跟輸入的值是否符合

需注意在IE 下如點選驗證碼無刷新，
需要再按鈕跟圖片網址加上變數如時間，
這樣每次刷新網址的參數會變，
避免IE如相同圖片會有暫存無刷新。

1. test.php 主頁面顯示驗證碼輸入跟刷新按鈕




Check

2.image.php 產出亂數的圖片，並存入session



ob_start();
session_start();
header('content-Type:image/gif');
echo mt_srand(time());
$randval = mt_rand();
$seccode = substr($randval,-4);
$length = strlen($seccode);
$_SESSION['seccode'] = $seccode; //用SESSION保存驗證碼
$img=imagecreate(80,30);
$black = ImageColorAllocate($img, 0,0,0);
$white = ImageColorAllocate($img, 255,255,255);
$gray = ImageColorAllocate($img, 200,200,200);
imagefill($img,0,0,$gray);

for($i=0;$i<200;$i++) //加入干擾象素
{
$randcolor = ImageColorallocate($img,rand(10,250),rand(10,250),rand(10,250));
imagesetpixel($img,rand()%90,rand()%30,$randcolor);
}

for ($i = 0; $i < $length; $i++) {
$color = imagecolorallocate($img,abs(mt_rand()%256),abs(mt_rand()%256),abs(mt_rand()%256));
imagechar($img,20,abs(mt_rand()%4)+$i*15,abs(mt_rand()%5),$seccode[$i],$color);
}
imagegif($img);
imageDestroy($img);
ob_end_flush();

3.check.php 驗證圖片跟輸入的值是否符合


session_start();
if($_POST['imgCode']==$_SESSION['seccode'])
echo '驗證成功';
else
echo '驗證失敗';

2015年5月10日星期日

jQuery File Upload 檔案上傳套件

多功能上傳管理套件，

可以一次多檔上傳，

顯示上傳進度等，功能

GitHub下載點:https://github.com/blueimp/jQuery-File-Upload/tags

步驟一:
引入下列四個檔案:

步驟二:
uploads資料夾 ->上傳檔案存放之處
ajax/upload.php ->使用php判斷file 上傳的目錄位置以及顯示是否上傳成功狀態
index.php ->範例程式
js/ ->引用的四個js檔案

<出處:http://blog.acoak.com/archives/73>

步驟三:
1.ajax/upload.php 程式碼:

2.index.php 程式碼:




jQuery File Upload Example
 
 
 
 .

 
 


 
  拖曳至此上傳

Ckeditor 強力線上編輯程式

ckeditor 是一個很強大的上傳PHP圖文編輯器

下載的載點跟網址如下:

編輯器：CKeditor
支援語法：PHP、ASP、ASP.NET、CF
檔案大小：1.99MB
元件版本：3.5.1
官方展示：http://ckeditor.com/demo
官方下載：http://ckeditor.com/download

上傳元件：CKfinder
檔案大小：1.01MB
支援語法：PHP、ASP、ASP.NET、CF
元件版本：2.0.1
官方展示：http://ckfinder.com/demo
官方下載：http://ckfinder.com/download

步驟1:
下載完畢後，將兩個檔案放在同一層資料夾解壓縮，
建立一個upload資料夾用來放置上傳檔案的位置。

如laravel 架構:
在public/js 放置ckeditor,ckfinder 檔案，
在public/js 放置upload為上傳存放資料夾

步驟2:
在ckfinder裡面->config.php ，

baseurl設定上傳存放資料夾的目錄:
$baseUrl = 'http://localhost/laravel/public/js/upload/';

步驟3:

!!!如果更改config.js 沒有效果，請關閉分頁，重新打開讓他生效!!!

在ckeditor裡面->config.js ，
設定瀏覽器編輯圖片功能顯示的資料夾位置

config.filebrowserBrowseUrl = 'js/ckfinder/ckfinder.html';
config.filebrowserImageBrowseUrl = 'js/ckfinder/ckfinder.html?Type=Images';
config.filebrowserFlashBrowseUrl = 'js/ckfinder/ckfinder.html?Type=Flash';
config.filebrowserUploadUrl = 'js/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files'; //可上傳一般檔案
config.filebrowserImageUploadUrl = 'js/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images';//可上傳圖檔
config.filebrowserFlashUploadUrl = 'js/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash';//可上傳Flash檔案

步驟4:
在ckeditor裡面->config.js檔案，可以設定編輯器的功能

 //全功能
 config.toolbar_Full = [
    ['Source','-','Save','NewPage','Preview','-','Templates'],
    ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
    ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
    ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
    '/',
    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
     ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
     ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
     ['Link','Unlink','Anchor'],
    ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
    '/',
     ['Styles','Format','Font','FontSize'],
     ['TextColor','BGColor']
 ];

config.js 所設定的編輯器參數如下

工具列參數列表：
'Source'：原始碼
'Save'：儲存
'NewPage'：開新檔案
'Preview'：預覽
'Templates'：樣版

'Cut'：剪下
'Copy'：複製
'Paste'：貼上
'PasteText'：貼為文字格式
'PasteFromWord'：從word 貼上
'Print'：列印
'SpellChecker'：拼字檢查
'Scayt'：即時拼寫檢查

'Undo'：上一步
'Redo'：重作
'Find'：尋找
'Replace'：取代
'SelectAll'：全選
'RemoveFormat'：清除格式

'Form'：表單
'Checkbox'：核取方塊
'Radio'：單選按鈕
'TextField'：文字方塊
'Textarea'：文字區域
'Select'：選單
'Button'：按鈕
'ImageButton'：影像按鈕
'HiddenField'：隱藏欄位

'Bold'：粗體
'Italic'：斜體
'Underline'：底線
'Strike'：刪除線
'Subscript'：下標
'Superscript'：上標
'NumberedList'：編號清單
'BulletedList'：項目清單
'Outdent'：減少縮排
'Indent'：增加縮排
'Blockquote'：引用文字

'JustifyLeft'：靠左對齊
'JustifyCenter'：置中
'JustifyRight'：靠右對齊
'JustifyBlock'：左右對齊

'Link'：超連結
'Unlink'：移除超連結
'Anchor'：錨點

'Image'：圖片影像
'Flash'：Flash
'Table'：表格
'HorizontalRule'：水平線
'Smiley'：表情符號
'SpecialChar'：特殊符號
'PageBreak'：分頁符號

'Styles'：樣式
'Format'：格式
'Font'：字體
'FontSize'：大小

'TextColor'：文字顏色
'BGColor'：背景顏色

'Maximize'：最大化
'ShowBlocks'：顯示區塊
'About'：關於CKEditor

2015年5月7日星期四

FB Oauth2 授權登入-part2 ( php寫法)

設定完 FB APP 的資料後，
即可以開始使用PHP撰寫 FB Oauth登入。

code部分如下:

 
<?php 
$app_id = "xxxxxxxxxxxxxxxxxxx";      //FB APP的 ID
$app_secret = "xxxxxxxxxxxxxxxxxxx";  //FB APP的 Secret
$my_url = "http://localhost:8000/fb.php";  // 驗證完畢來redirect的網址
 
session_start();
if(isset($_REQUEST["code"]))
{
  $code = $_REQUEST["code"];    //返回的oauth 授權 返回code驗證資訊 
}

 
if(empty($code)) {
 $_SESSION['state'] = md5(uniqid(rand(), TRUE)); //CSRF protection
 $dialog_url = "https://www.facebook.com/v2.12/dialog/oauth?client_id=".$app_id."&redirect_uri=".$my_url."&state=".$_SESSION['state'].'&scope=user_birthday,email,user_friends'."&response_type=code";
 echo  $dialog_url;
 echo "<br>"."<br>";
}  
 

if(isset($code)) {

    $token_url = "https://graph.facebook.com/v2.12/oauth/access_token?"."client_id=".$app_id."&redirect_uri=".$my_url."&client_secret=".$app_secret."&code=".$code;
    echo $code;
    echo "<br>"."<br>";

    $curl = curl_init($token_url);
    curl_setopt($curl,CURLOPT_SSL_VERIFYHOST,0);
    curl_setopt($curl,CURLOPT_SSL_VERIFYPEER,0);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    $response = curl_exec($curl);
    echo var_dump($response);
    $response = json_decode($response);
    echo var_dump($response);
    echo "<br>"."<br>";
    curl_close($curl);

    $graph_url = "https://graph.facebook.com/v3.0/me?access_token="
      . $response->access_token."&fields=id,name,gender,friends";
    
    $curl = curl_init($graph_url);
    curl_setopt($curl,CURLOPT_SSL_VERIFYHOST,0);
    curl_setopt($curl,CURLOPT_SSL_VERIFYPEER,0);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    $user_data = curl_exec($curl);

    print_r($user_data);
    $user_data = json_decode($user_data);
    $user = $user_data->id;
    $url = "http://graph.facebook.com/".$user_data->id."/picture?type=large";
    $name = $user_data->name;   
    echo "使用者ID:".$user."</p><p>";
    echo "使用者url:".$url."</p><p>";
    echo "臉書名稱:".$name."</p><p>";
   }
else
{
    echo("顯示錯誤，請從正確網址進入");
    
}
 
?>
 

?>

FB Oauth2 授權登入-part1 (FB APP設定)

首先FB設定的頁面需要先於開發者頁面申請設定一個基本的FB APP

網址:https://developers.facebook.com/apps/

FB開發者頁面設定項目:

1.APPID ->用來判斷哪個應用程式

2.APP Secret ->Secrect key

Setting頁面上方:

Native or desktop app 設定為否

Setting頁面下方:

Client OAuth Login 開啟

Valid Oauth 設定允許的IP，網址。

允許公開此APP

設定完畢即可以開始進行FB Oauth2的授權登入。

2015年5月3日星期日

使用alexgorbatchev 在blogger插入程式語法

1.在blogger HTML加入以下js方法，依照不同引入檔案，可以定義不同顯示的語言語法

2.包含在以下片段內的語法，會顯示成程式的語言，須注意 pre class="brush:語言定義" ，

如同以上，不同程式語言定義的brush不同，

語言名稱	指定縮寫	檔名
ActionScript3	as3, actionscript3	shBrushAS3.js
Bash/shell	bash, shell	shBrushBash.js
ColdFusion	cf, coldfusion	shBrushColdFusion.js
C#	c-sharp, csharp	shBrushCSharp.js
C++	cpp, c	shBrushCpp.js
CSS	css	shBrushCss.js
Delphi	delphi, pas, pascal	shBrushDelphi.js
Diff	diff, patch	shBrushDiff.js
Erlang	erl, erlang	shBrushErlang.js
Groovy	groovy	shBrushGroovy.js
JavaScript	js, jscript, javascript	shBrushJScript.js
Java	java	shBrushJava.js
JavaFX	jfx, javafx	shBrushJavaFX.js
Perl	perl, pl	shBrushPerl.js
PHP	php	shBrushPhp.js
Plain Text	plain, text	shBrushPlain.js
PowerShell	ps, powershell	shBrushPowerShell.js
Python	py, python	shBrushPython.js
Ruby	rails, ror, ruby	shBrushRuby.js
Scala	scala	shBrushScala.js
SQL	sql	shBrushSql.js
Visual Basic	vb, vbnet	shBrushVb.js
XML	xml, xhtml, xslt, html, xhtml	shBrushXml.js

Google API登入

Google 登入API 筆記

需先至 https://console.developers.google.com/
註冊帳號，
並於API驗證，建立以下資訊
1.用戶端ID:
2.電子郵件地址:
3.用戶端密碼:
4.重新導向URL:
5.授權的JavaScript

建立金鑰:Api key

下載google-api-php-client 使用的API並解壓縮放在目錄下
在申請完各項驗證之後，
即可以開始實作引入:

1.使用者授權登入: OAuth 2.0 PHP API

https://developers.google.com/api-client-library/php/start/get_started 相關說明

使用googleAPI中的 Google_Oauth2Service 取得使用者資料程式碼如下

setApplicationName("Test Google+");

//參數設定，google console 設定API的資料

$client->setClientId('google設定的ID');
$client->setClientSecret(google設定的Secret'');
$client->setRedirectUri('google設定的導向網址');
$client->setDeveloperKey('google設定的Key');
$client->setScopes(array('https://www.googleapis.com/auth/userinfo.email','https://www.googleapis.com/auth/userinfo.profile'));

$google_user = new Google_Oauth2Service($client);  //將設定檔案傳入使用Oauth2

if (isset($_REQUEST['logout']))    //確認是否有收到logout 清除session
{   
    unset($_SESSION['access_token']);
}

if (isset($_GET['code'])) //收到google Oauth2 授權傳入的code  進行後續調用資料
{             
    $client->authenticate($_GET['code']);
    $_SESSION['access_token'] = $client->getAccessToken();
    header('Location: http://' . $_SERVER['HTTP_HOST'] . $_SERVER['PHP_SELF']);
}

if (isset($_SESSION['access_token']))   //進行後client　token設定
{
    $client->setAccessToken($_SESSION['access_token']);
}


if ($client->getAccessToken())      //如果存在 getAccessToken()  代表Oauth2成功，進行使用者資料存取
{
    $userinfo = $google_user->userinfo;  
    print_r($userinfo->get());      // Google_Oauth2Service 提供的方法　截取資料

} 
else 
{
    $authUrl = $client->createAuthUrl();        //存在Authurl導致
}
?>








Google 登入 使用者資料




Connect Me!

";
  } else {
   print "Logout";
  }
?>

訂閱：文章 (Atom)

2015年5月17日 星期日

2015年5月10日 星期日

jQuery File Upload 檔案上傳套件

2015年5月7日 星期四

2015年5月3日 星期日

2015年5月17日星期日

2015年5月10日星期日

2015年5月7日星期四

2015年5月3日星期日