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驗證連線成功與否。

參考資料：

• 在 windows 環境底下設定 apache ( 32 位元 ) SSL 憑證讓網址變成 https
• [研究] Apache HTTPd Web Server 2.4.23 + HTTPS (SSL) 安裝 (Windows 2012 R2)
• [架站] Appserv 2.5.9 (Apache 2.2.4 win32) + OpenSSL 0.9.8d 安裝備忘錄
• Windows 如何知道哪個應用程式正在使用哪個PORT?
• Roundcube https Webmail 搭配 SSL 憑證設定指南
• 【PHP】利用Openssl實作ssl網頁加密
• apache 設定 https
• Windows 下安裝設定 Apache2 + PHP5 + mod_ssl
• Windows下安裝Apache + SSL
• SSL.conf設定檔