iInfo 資訊交流: Firebase Cloud Messaging (FCM) 入門到進階應用(4) --- 網頁安裝SSL憑證

最新消息

[公告2014/05/30] 如有需要將部落格中,任何一篇文章的程式碼使用在商業用途,請與我聯繫。

[公告2015/04/26] Line版的 iInfo程式與投資應用 群組已上線想加入的朋友們,請先查看 "入群須知" 再與我聯繫 Line : aminwhite5168,加入請告知身分與回答 "入群須知" 的問題。

[公告2017/02/20] 近來有網友詢問 MultiCharts 與 Excel 畫冰火能量圖 (8)MultiCharts 與Excel 畫冰火能量圖(11) --- 更名「台股儀表板」 文章中教學檔案取得方式,有興趣的朋友可透過 Line了解詳情 (請勿以為是免費分享),Line : aminwhite5168。

[公告2018/04/22] 台北 Python + Excel VBA 金融資訊爬蟲課程,課程如網頁內容 金融資訊爬蟲班:台北班 Python 金融資訊爬蟲、EXCEL VBA 金融資訊爬蟲,請盡快把握機會,歡迎券商、大專院校邀約講座。

[公告2018/06/01] 台指能量儀表板教學課程,課程如網頁內容 台北班:台指能量儀表板

[公告2018/10/02] 期交所於2018/10/03進行網址改版,若有參考部落格與期交所相關文章,請各位讀者自行修改。

2017年1月29日 星期日

Firebase Cloud Messaging (FCM) 入門到進階應用(4) --- 網頁安裝SSL憑證

Firebase Cloud Messaging 訊息傳送主要還是在行動裝置上,Firebase Cloud Messaging (FCM) 入門到進階應用(1) --- 開發環境建立 所述每個裝置都需要一個專屬的Token,才能將訊息送達,這樣的前提是每個裝置要在安全的網頁上取得Token。
內容屬於進階內容,將分5段做說明。
  1. 網域申請與構架。
  2. SSL憑證介紹。
  3. 產生SSL憑證步驟。
  4. 修改 httpd.conf 設定檔。
  5. 合法的SSL憑證申請。
網域申請與架構。
介紹安裝SSL憑證前,先申請一個網域,在PChome即可購買,各位讀者當然也可以選擇自己喜歡服務商購買。網域申請後再配一個固定IP即可以指定到自己主機上,筆者的作法是網域由PChome代管DNS到指定IP上,再透過DMZ轉進到指定的機器上,主機再以 Usbwebserver 架構完成。

SSL憑證介紹。
在網路世界中要能安全存取網頁,第一要務就是網站需透過SSL安全憑證來證明自己網站上的網頁是安全,才能讓使用者安心存取網頁。


至於SSL介紹可參考 什麼是伺服器憑證(SSL)?

在 Firebase Cloud Messaging (FCM) 入門到進階應用(1) --- 開發環境建立 文章中,提到可使用「Firebase Quickstart Samples for Web」專案原始程式碼取得Token,將原始程式碼放在 Usbwebserver 的 root 資料夾中執行,當時Token取得網頁僅是自用,所以無需將網頁做安全認證。現在要讓行動裝置也可收到訊息,故需透過網路取得裝置的Token,因此網頁讓具備有安全憑證,行動裝置才能安全進行存取。

取得SSL安全憑證的方法,很多網路文章寫的都很不錯,可以實際可以用在 Usbwebserver 上的卻很少,筆者僅就以成功在 Usbwebserver 安裝 SSL憑證操作來介紹。

產生SSL憑證步驟。
Usbwebserver 有內含 openssl檔案,可以用來產生憑證。

Step 1. 使用OpenSSL建立『*.key』私鑰檔案,並輸入自訂短密碼。
cd C:\Users\Amin\Desktop\USBWebserver v8.6\apache2\bin
set OPENSSL_CONF=C:\Users\Amin\Desktop\USBWebserver v8.6\apache2\conf\openssl.cnf
openssl genrsa -des3 -out server.key 2048

Step 2. 使用私鑰去建立『*.csr』憑證請求檔 (Certificate Signing Request)。
openssl req -new -key server.key -out server.csr

Step 3. 輸入憑證申請的資料。

Step 4. 使用憑證請求檔及私鑰檔去建立3650天的X.509格式憑證的CRT憑證檔 (Self-Signed Certificate)。
openssl x509 -req -days 3650 -in server.csr -signkey server.key -out server.crt

這一步做完後,可在 USBWebserver v8.6\apache2\bin 下見到 server.crt、server.csr、server.key 三個檔案。

Step 5. 解開伺服器私鑰。
rename server.key server.key.org
openssl rsa -in server.key.org -out server.key

把 server.crt、server.key 複製到 USBWebserver v8.6\apache2\conf 路徑下。

以上全部操作的指令寫成Batch方便一次完成。
@echo off

set certificatename=%1
set opensslexepath=%2
set opensslcnfpath=%3

::"C:\Users\Amin\Desktop\USBWebserver v8.6\apache2\bin"
::OPENSSL_CONF="C:\Users\Amin\Desktop\USBWebserver v8.6\apache2\conf\openssl.cnf"


cd %opensslexepath:"=%

::指定openssl設定黨路徑
set OPENSSL_CONF=%opensslcnfpath:"=%

::使用OpenSSL建立『*.key』私鑰檔案,並輸入自訂短密碼
openssl genrsa -des3 -out %certificatename%.key 2048

::使用私鑰去建立『*.csr』憑證請求檔 (Certificate Signing Request)
openssl req -new -key %certificatename%.key -out %certificatename%.csr

::使用憑證請求檔及私鑰檔去建立3650天的X.509格式憑證的CRT憑證檔 (Self-Signed Certificate)
openssl x509 -req -days 3650 -in %certificatename%.csr -signkey %certificatename%.key -out %certificatename%.crt

rename %certificatename%.key %certificatename%.key.org

::解開伺服器私鑰
openssl rsa -in %certificatename%.key.org -out %certificatename%.key

::建立extra資料夾與複製憑證到conf下
mkdir ..\conf\extra
cd ..
xcopy bin\%certificatename%.crt conf /Y
xcopy bin\%certificatename%.key conf /Y

修改 httpd.conf 設定檔。
修改 httpd.conf 設定有2種,可參考如下:
1. 將所有修改都在 httpd.conf 完成。
(1) 將 # 號移除。
#LoadModule ssl_module modules/mod_ssl.so
改為
LoadModule ssl_module modules/mod_ssl.so
(2)輸入443 Port的設定。
Listen *:443 
NameVirtualHost *:443
AddType application/x-x509-ca-cert .crt
AddType application/x-pkcs7-crl    .crl
SSLPassPhraseDialog  builtin
SSLSessionCacheTimeout 300
<VirtualHost *:443> 
    ServerName www.iinfo.idv.tw
    DocumentRoot "C:\Users\Amin\Desktop\USBWebserver v8.6\root"
    ServerAlias iinfo.idv.tw
    ServerAdmin white_5168@hotmail.com
    ErrorLog "C:\Users\Amin\Desktop\USBWebserver v8.6\apache2\logs\www.iinfo.idv.tw-error.log" 
    TransferLog "C:\Users\Amin\Desktop\USBWebserver v8.6\apache2\logs\www.iinfo.idv.tw-access.log"
    SSLEngine on
    SSLCertificateFile "conf/server.crt"
    SSLCertificateKeyFile "conf/server.key" 
    <FilesMatch "\.(cgi|shtml|phtml|php)$">
        SSLOptions +StdEnvVars +ExportCertData
    </FilesMatch>
    BrowserMatch ".*MSIE.*" \
    nokeepalive ssl-unclean-shutdown \
    downgrade-1.0 force-response-1.0
    CustomLog "C:\Users\Amin\Desktop\USBWebserver v8.6\apache2\logs\ssl_request.log" \
    "%t %h %{SSL_PROTOCOL}x %{SSL_CIPHER}x \"%r\" %b"
</VirtualHost>
2. 將部分修改在httpd.conf 完成,再conf\extra下多增加 httpd-ssl.conf 設定檔。
(1) 將 # 號移除。
#LoadModule ssl_module modules/mod_ssl.so
改為
LoadModule ssl_module modules/mod_ssl.so

#Include conf/extra/httpd-ssl.conf
改為
Include conf/extra/httpd-ssl.conf
(2)在conf/extra下新增 httpd-ssl.conf 檔案,輸入以下443 Port的設定。
Listen *:443 
NameVirtualHost *:443
AddType application/x-x509-ca-cert .crt
AddType application/x-pkcs7-crl    .crl
SSLPassPhraseDialog  builtin
SSLSessionCacheTimeout 300
<VirtualHost *:443> 
    ServerName www.iinfo.idv.tw
    DocumentRoot "C:\Users\Amin\Desktop\USBWebserver v8.6\root"
    ServerAlias iinfo.idv.tw
    ServerAdmin white_5168@hotmail.com
    ErrorLog     "C:\Users\Amin\Desktop\USBWebserver v8.6\apache2\logs\www.iinfo.idv.tw-error.log" 
    TransferLog  "C:\Users\Amin\Desktop\USBWebserver v8.6\apache2\logs\www.iinfo.idv.tw-access.log"
    SSLEngine on
    SSLCertificateFile      "C:\Users\Amin\Desktop\USBWebserver v8.6\apache2\conf\server.crt"
    SSLCertificateKeyFile   "C:\Users\Amin\Desktop\USBWebserver v8.6\apache2\conf\server.key" 
    <FilesMatch "\.(cgi|shtml|phtml|php)$">
        SSLOptions +StdEnvVars +ExportCertData
    </FilesMatch>
    BrowserMatch ".*MSIE.*" \
    nokeepalive ssl-unclean-shutdown \
    downgrade-1.0 force-response-1.0
    CustomLog "C:\Users\Amin\Desktop\USBWebserver v8.6\apache2\logs\ssl_request.log" \
    "%t %h %{SSL_PROTOCOL}x %{SSL_CIPHER}x \"%r\" %b"
</VirtualHost>
最後,不管使用那種方式修改httpd.conf 設定檔,記得都要重新啟動 Apache,這樣設定才能生效。

開啟Chrome與IE瀏覽器輸入 https://www.iinfo.idv.tw/查看,如果出現以下畫面,表示SSL連線設定成功。


點選進階、繼續前往 localhost 網站 (不安全),即可見到首頁內容。

到了這一步Apache SSL連線設定都已完成,但還有個問題,就是由於憑證是自己發給自己,不具任何效力,因此瀏覽器上顯示的狀態依舊為 紅色字『不安全』,需要SSL認證機構發出來才具有效力。


一般SSL認證機構所發的憑證都要花錢去購買,而且時間效期都以年來計算,對於一般使用者來說不適合,筆者這裡就介紹在可網路申請免費的SSL認證,效期只有3個月的 SSL For Free來取得具效力的SSL憑證。

合法的SSL憑證申請。
Step 1.輸入自己的網址 www.iinfo.idv.tw,按下『Create Free SSL Certificate』按鈕。

Step 2. 點選中間手動認證。

Step 3. 點選手動認證網域。

Step 4. 根據網頁敘述操作方法,下載2個隨機產生的檔案到指定目錄下。

在這裡,用滑鼠右鍵新增資料夾會無法產生,需透過命令提示字元來建立指定的資料夾名稱。
mkdir .well-known
cd .well-known
mkdir acme-challenge

Step 5. 點選網頁中的連結,只要確認可以正常連線,即可點選『Download SSL Certificate』按鈕 下載憑證。


Step 6. 解開下載的壓縮檔,資料夾裡會有ca_bundle.crt、certificate.crt、private.key 3個檔案。

Step 7. 分別將 certificate.crt、private.key 改名為 server.crt、server.key,並複製到 USBWebserver v8.6\apache2\conf 去覆蓋前面產生的憑證。

Step 8. 重啟Apache與重新整理瀏覽器畫面。

查看憑證。

PS:
  1. localhost可以用來驗證http的連線驗證。
  2. localhost無法用來驗證https連線驗證,憑證申請是以指定網域為對象,不是以localhost為對象,所以無法以https://localhost驗證連線成功與否。
參考資料: