[公告] 痞客邦「應用市集」新 App 上架-iFontCloud Professional[公告] 痞客邦後台發表文章提供插入多張圖片新功能[公告]痞客邦新服務上線 部落客商店聚集就在《痞市集》[公告] 部落格「快捷功能BAR」改版介紹[公告] 痞客邦「快捷功能BAR」6月4日改版通知

繼前篇「WAMP 架設網頁伺服器」後,這篇文章要來寫如何在WAMP安裝SSL的服務。程式開發人員會遇到一些像是金流部分的部分,這時候就不得不考慮SSL模式的測試。具體的作法就是在自己的主機建立CA認證伺服,由自己主機來當憑證中心。烘培參考下列幾篇文章

從別人的文章來看,清楚的表示建立SSL的過程,可以分為「製作SSL憑證與公開金鑰」與「編輯 Apache SSL 設定檔」兩部分

Part 1: 製作SSL憑證與公開金鑰

開啟dos模式命令列視窗

wamp_ssl_00 (複製).png

我試著參考「Enable HTTPS on WAMP2」的作法,直接使用wamp安裝後包含的openssl.exe來進行建立SSL憑證與金鑰

cd C:/wamp/bin/apache/Apache2.2.17/bin
openssl genrsa -aes256 -out pass.key 2048

卻出現了下面的錯誤畫面,烘培開始認定是64bit的原因所致

wamp_ssl_01 (複製).png

所以開了另外一台32bit來試,仍然出現了錯誤

wamp_ssl_08 (複製).png

後來我嘗試從網路上直接下載缺少的dll,覆蓋後再重試一遍,仍然無法解決錯誤。看來wamp所附贈的openssl.exe還是有問題,放棄了。我想就直接統一改用文章「在WAMP上啟用SSL Module」所提到的win32 openssl代來替,從連結官網可以發現官方有提供32bit與64bit,這邊我們就挑選下載和wamp同版本吧(烘培安裝的是64bit,輕量版light)與Microsoft Visual C++ 2008 可轉散發套件(x64)

wamp_ssl_02 (複製).png

在安裝之前會提醒你必需有安裝Microsoft Visual C++ 2008 可轉散發套件。若尚未安裝,請先安裝剛剛所下載的Microsoft Visual C++ 2008再續繼接下來的動作

wamp_ssl_03 (複製).png

安裝x64版本有時候會卡住(x86倒是沒有),似乎是瀏覽器(broswer)的關係,試著先關閉目前在使用的瀏覽器

安裝完畢會讓你選擇希望捐助的金錢,這個就看大家的意思了(不小心被大家看到烘培把全部勾選取消的擷圖XD)

wamp_ssl_05 (複製).png

正常來講,安裝OpenSSL後,會自動在win7建立一個叫OPENSSL_CONF的系統變數,內容值為剛剛所安裝OpenSSL中的openssl.cfg,大家可以參考下圖進行檢查

wamp_ssl_06 (複製).png

如果沒有發現這個變數,那麼就自己建立一個吧!

wamp_ssl_07 (複製).png

為了確保系統變數的有效化,我們先進行「登出」,再「登入」,(XD,重開機也行),再重新來建立私鑰的動作

cd C:/OpenSSL-Win64/bin
openssl genrsa -aes256 -out pass.key 2048

如果沒有錯誤發生,程式會要求你輸入私鑰的自訂密碼二次,接著你會在C:/OpenSSL-Win64/bin發現多了一個名稱「pass.key」的私鑰檔,我們要透過這個私鑰來產生公鑰與憑證。製作公鑰指令如下

openssl rsa -in pass.key -out localhost.key

完成後你應該會在C:/OpenSSL-Win64/bin找到名稱「localhost.key」的公鑰,接下來製作憑證指令如下:

openssl req -new -x509 -nodes -sha1 -key localhost.key -out localhost.crt -days 999
 -config C:/wamp/bin/apache/Apache2.2.17/conf/openssl.cnf

製作憑證的過程中,系統將會要求你輸入一些憑證資訊,烘培把要求的輸入的資訊大概說明一下

  • Country Name (2 letter code) [AU]: TW
    #國家簡碼2碼。輸入TW。大陸同胞若不認同請直接關掉此文章,謝謝
  • State or Province Name (full name) [Some-State]: none
    #省分。因為台灣沒有省,所以輸入"無"
  • Locality Name (eg, city) []:Taichung
    #縣市。烘培目前在台中
  • Organization Name (eg, company) [Internet Widgits Pty Ltd]: Powmana Studio
    #組識或公司。烘培的工作室
  • Organizational Unit Name (eg, section) []: Engineering Department
    #部門。爆肝的工程部
  • Common Name (eg, YOUR name) []: localhost
    #授權的名稱(通常是網域名稱)。因為我們要使用的是本地端,可以輸入127.0.0.1或localhost
  • Email Address []: admin@localhost
    #電子郵件。通常名稱會是admin@網域名稱

上述動作完成後,我們將會得到「pass.key」、「localhost.key」、「localhost.crt」三個檔案,第一部分的步驟結束

Part 2: 編輯 Apache SSL 設定檔

首先在apache建立置放的資料夾(C:\wamp\bin\apache\Apache2.2.17\conf\ssl),並將所製作的公鑰(localhost.key)與憑證(localhost.crt)複製到此資料夾。

wamp_ssl_10 (複製).png

(一) 編輯 httpd-ssl.conf

在www中建立一個https的資料夾(C:\wamp\www\https),接著使用筆記本開啟apache的ssl設定檔(C:\wamp\bin\apache\Apache2.2.17\conf\extra\httpd-ssl.conf),修改下面所提到的部分

1) 儲存SSL快取位置
SSLSessionCache  "shmcb:C:/wamp/logs/ssl_scache(512000)"
2) https的根目錄與錯誤訊息位置
DocumentRoot "C:/wamp/www/https"
ServerName localhost:443
ServerAdmin admin@localhost
ErrorLog "C:/wamp/logs/ssl_error.log"
TransferLog "C:/wamp/logs/ssl_access.log"
3) 憑證位置
SSLCertificateFile "C:/wamp/bin/apache/Apache2.2.17/conf/ssl/localhost.crt"
4) 公鑰位置
SSLCertificateKeyFile "C:/wamp/bin/apache/Apache2.2.17/conf/ssl/localhost.key"
5) htaccess路由規則
<Directory "C:/wamp/www/https">
	SSLOptions +StdEnvVars
	Options Indexes FollowSymLinks MultiViews
	AllowOverride All
	Order allow,deny
	allow from all
</Directory>
6) 自訂記錄
CustomLog "C:/wamp/logs/ssl_request.log" \
          "%t %h %{SSL_PROTOCOL}x %{SSL_CIPHER}x \"%r\" %b"
(二)編輯 httpd.conf

接著用筆記本開啟apache的設定檔(C:\wamp\bin\apache\Apache2.2.17\conf\httpd.conf),修改下列部分

1) 將原本前面的#移除,載入ssl設定檔
Include conf/extra/httpd-ssl.conf
2) 將原本前面的#移除,啟用ssl模組(可以使用wamp右下角介面去啟用apache指定的模組)
LoadModule ssl_module modules/mod_ssl.so
(三) 編輯 php.ini

最後開啟php的設定檔(C:\wamp\bin\apache\Apache2.2.17\bin\php.ini),修改下列部分(可以使用wamp右下角介面去啟用PHP擴展)

1) 將原本前面的;移除,載入openssl擴展
extension=php_openssl.dll

最後重新啟用所有服務(Restart All Services),如果出現綠色的圖示,表示SSL已成功啟用

wamp_06 (複製).png

我們開啟瀏覽器,輸入「https://127.0.0.1」試看看結果,聰明的瀏覽器馬上就察覺這個憑證是有問題,不過我們知道自己的憑證是安全的,就繼續給他點下去

測試結果 (複製).png

因為當時建立憑證時,Common Name是輸入locahost,這邊我們透過127.0.0.1連結,所以將會有下面結果

測試結果2 (複製).png

改使用https://localhost連結就不會出現了,並將憑證加至安全範圍範

wamp_ssl_12 (複製).png

但似乎只有IE有作用,Chrome仍然會有此憑證有疑慮

wamp_ssl_15 (複製).png wamp_ssl_16 (複製).png

大致上就這樣完成SSL的安裝了,雖然會有一些警示圖示或訊息,但這並不會影響我們開發程式

Posted by 低溫烘培 at 痞客邦 PIXNET 留言(3) 引用(0) 人氣()


open trackbacks list Trackbacks (0)

留言列表 (3)

Post Comment
  • 方柏鈞
  • 您好,小弟遵照您這一篇文章進行設定

    設定完以後 SSL 的確有啟用

    可是目前碰上一個問題,小弟想要使用https打開原來已經存有的index網站時

    卻出現404網頁沒有尋獲的錯誤訊息,請問這個狀況,小弟應該往哪個方向去處置呢?

    是index.php網頁要設定相關ssl的數據嗎?
  • 當你開啟 SSL 模式時,Apache 存取的 DocumentRoot 已改變,以 httpd-ssl.conf 中的設定為主。

    低溫烘培 replied in 2012/09/04 20:02

  • Eric
  • 小弟每一步都按照了 但是還是不能用…
    重開後 右下角一直都是橘色的…
    小弟用的是 2.2.22版的
  • 可以先查看 C:\wamp\logs\apache_error.log 裡面的內容來判斷唷

    低溫烘培 replied in 2013/05/07 13:58

  • 閒雜人
  • 我遇到問題是這樣的...我之前也是一直亮橘燈...
    然後我先把Include conf/extra/httpd-ssl.conf前面的#放回去
    然後確定以下模組都有開啟,再把Include conf/extra/httpd-ssl.conf前面的#拿掉
    ,然後就可以了!!!
    Required modules:
    mod_log_config,
    mod_setenvif,
    mod_ssl,
    socache_shmcb_module

You haven’t logged in yet, please use guest status to leave message. You can also log in with above service account and leave message

other options