使用Sensor APIs(Web API)遇到的問題【如何讓http -> https(SSL)】

最近在做物聯網作業的時候發現http無法調用Sensor APIs

需要網址前綴為https的情況下載能使用

以下是我透過 device motion handler 檢測手機 accelerometer 的測試畫面：

http://xxx.xxx.xxx.x	https://xxx.xxx.xxx.x

我強行把內網(192.168.169.X)前面加https的效果

不過這樣是不安全的

而且為了方便組員一起測試

我使用 no-ip 申請動態DNS服務(浮動ip對應到免費的固定的hostname ex:el0813.com）

然後用申請的 domain name 下去申請免費的ssl

經由它的指示完成認證的動作

最後會得到三個安全認證檔案(certificate.crt、ca_bundle.crt 和 private.key)

我用 xampp 下去管理我的server

所以要將網址從http -> https 的話還要在xampp設定一些東西

實際上要做什麼我也是自己玩了一下才弄出來

有些步驟說不定是多餘的

說實在我也不清楚

俗話說好的文章讓人上天堂

這句話親身體會了一回

我花了好多時間摸索嘗試

終於！

以下是我爬文透過一些文章整理出來的

※因為本人使用 macOS ，所以以下步驟適用於 macOS。

網路上大多都是 Windows 的教學，有需要的可以自己去google一下。

1.在 /Applications/XAMPP/xamppfiles/etc 下創建一個叫ssl文件夾(名字叫什麼其實沒差。然後把三個安全認證檔案丟到裡面去

2.在 /Applications/XAMPP/xamppfiles/etc/extra 找到 httpd-vhosts.conf 這個檔案，在文件底下加入以下內容：

      <VirtualHost *:443>
          DocumentRoot "/Applications/XAMPP/htdocs"
          ServerName el0813.com

          <Directory "/Applications/XAMPP/htdocs">
          Require all granted
          Options All
          AllowOverride All
          Order deny,allow
          Allow from all
          </Directory>

          SSLEngine on
          SSLCertificateFile "/Applications/XAMPP/xamppfiles/etc/ssl/certificate.crt"
          SSLCertificateKeyFile "/Applications/XAMPP/xamppfiles/etc/ssl/private.key"
          SSLCertificateChainFile "/Applications/XAMPP/xamppfiles/etc/ssl/ca_bundle.crt"

      </VirtualHost>

※http -> port 80

※https -> port 443

3.在進行此配置的同時，我們需要將此新 ServerName 加入OS的主機配置文件中。在 Mac OS中，此文件位於 /etc/hosts。將hosts文件打開到編輯器中，然後加入以下內容：

      127.0.0.1 el0813.com

可透過 terminal 打開編輯

      sudo nano /private/etc/hosts

4.確保ssl可以使用，在terminal打以下指令

      /Applications/XAMPP/xamppfiles/xampp enablessl

5.最後重啓 apache web server 就ok啦

---

這些是我看過找了很多文章，經過篩選過後，個人覺得比較有用的reference

參考資料 參考資料2