ShockUCCU | Web Design

發表文章

目前顯示的是 7月, 2021的文章

PHPWord如何使用模板製作Word

- 7月 30, 2021

PHPWord需要透過Composer進行安裝．下載Composer php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');" php -r "if (hash_file('sha384', 'composer-setup.php') === '756890a4488ce9024fc62c56153228907f1545c228516cbf63f885e036d37e9a59d27d63f46af1d4d07ee0f76181c7d3') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;" php composer-setup.php php -r "unlink('composer-setup.php');" 下載最新版本的PHPWord composer require phpoffice/phpword 可以編輯composer.json，下載需要的版本． { "config": { "platform-check": false }, "require": { "phpoffice/phpword": "v0.16.*" } } 另外可以關閉platform-check，避免在執行程式出現下方錯誤訊息． Composer detected issues in your platform: Your Composer dependencies require a PHP version ">= 7.3.0". 接著執行 composer update 準備Word模板，並把要替換的資料改成 ${search-patt

CB150R-20210725北宜半日遊

- 7月 30, 2021

在烟花颱風突然來個轉向往西北方走，星期天的早上看到湛藍的天空，馬上決定騎上我的小紅出去跑跑山．來到坪林老街上，先幫小紅拍了幾張網美照．由於颱風剛過，北勢溪的水量十分充沛．山路上依舊有不少的積水，騎乘時務必注意安全，也感謝追焦手辛苦拍攝！拍攝工具: iphone12 pro CB150R: 巴風特端子鏡 DMV省力拉桿 DMV水箱護網 H2C氣嘴蓋 H2C引擎護蓋 Genma前齒輪上蓋 EK黑金鏈條 RK後齒盤靈獸L17方向燈大燈護片

getDisplayMedia抓取螢幕\視窗畫面

- 7月 30, 2021

MediaDevices 提供像是照相機、麥克風和螢幕分享等功能，可取得這些多媒體的串流資料，這篇主要透過 MediaDevices.getDisplayMedia() 進行實作: 使用HTML的<video>可將影像顯示在Web page上，新增兩個按鈕一個是開始截圖、一個結束截圖。 <video id="video" autoplay> Your browser does not support HTML5 video. </video> <button type="button" onclick="startCapture()">開始截圖</button> <button type="button" onclick="stopCapture()">停止截圖</button> var video = document.getElementById("video"); var startCapture = function() { if (navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia) { navigator.mediaDevices.getDisplayMedia({ video: { cursor: "always" }, audio: false }).then(function(stream) { video.srcObject = stream; video.play(); }); } } var stopCapture = function(evt) { var tracks = video.srcObject.getTracks(); tracks.forEach(track => tra

getUserMedia開啟鏡頭拍照

- 7月 30, 2021

近期剛完成一項專案需求是要製作生產履歷報告，當中報表需要加入檢驗數據圖及本體照片，因此開始研究如何在網頁上開啟鏡頭拍照? MediaDevices 提供像是照相機、麥克風和螢幕分享等功能，可取得這些多媒體的串流資料，這篇主要透過 MediaDevices.getUserMedia() 進行實作: 使用HTML的<video>可將影像顯示在Web page上。 <video id="video" autoplay> Your browser does not support HTML5 video. </video> 使用getUserMedia取得影像。 // 檢查相機是否存在 if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { // 設定影像width, height var constraints = { video: { width: { ideal: 400 }, height: { ideal: 300 } } }; navigator.mediaDevices.getUserMedia(constraints).then(function(mediaStream) { var video = document.getElementById('video'); video.srcObject = mediaStream; video.play(); }).catch(function(e) { console.log(e.name + ": " + e.message); }); } 開啟測試網頁就可以看到測試畫面。補充說明，使用Chrome實作發現一個問題，使用http協定無法開啟相機功能可能跟安全政策有關，我找到一篇文章的解決方式在開啟Chrom

jQuery序列化form表單，serialize、serializeArray以及serializeObject的用法

- 7月 30, 2021

工作上遇在送出表單前要先與資料庫內容比對，我的作法是透過Ajax將表單序列化資料送至後台進行檢查。表單序列化的可以有三種方式，serialize、serializeArray以及封裝一個方法serializeObject，這邊拿官網範例並設定checkbox陣列，看看有什麼差異。 <form id="form1"> <select name="single"> <option>Single</option> <option>Single2</option> </select> <br> <select name="multiple" multiple="multiple"> <option selected="selected">Multiple</option> <option>Multiple2</option> <option selected="selected">Multiple3</option> </select> <br> <input type="checkbox" name="check[]" value="check1" id="ch1"> <label for="ch1">check1</label> <input type="checkbox" name="check[]" value="check2" checked="checked" id="ch2"> <label for="ch2"

Freshdesk如何使用JWT設定SSO

- 7月 30, 2021

Single Sign-On(SSO)單一登入，使用者僅需登入一次身份供應商進行驗證，即可存取其他應用程式的權限。管理身份供應商也可以稱做身份提供者 Identity Provider (IdP)，而需要 IdP 提供驗證數據的應用程式就稱為服務提供者 Service Providers (SP)。常見的身份提供者有 ADFS、OneLogin、Okta、Auth0、G-Suite…。 Freshdesk 需要帳號的管理者來設定 SSO，在 Admin>Security。進入 Configure Freshworks SSO 就可以看到登入相關設定。並能針對 Agents & Employees 或 Contacts 的登入設定，流程基本上都差不多。增加其他 SSO 方法，選擇 IdP of your choice->JWT，JWT 的部分會再寫一篇來說明，先照著官方提供的說明操作。選擇 JWT 會有以下資訊： Redirect URL — 當驗證成功後，會透過此URL重新導向至網站。 Authorization URL：此欄位必填，也就是驗證身份的 URL，需要驗證身份並產生 JWT。 RSA Public Key：此欄位必填，需要產生一個RS256的密鑰，用來驗證產生的 JWT 是否正確。 Logout URL — 此欄位選填，就是登出後要導向哪個網址。參考資訊： How to configure JWT with IdP of your choice?

如何將網頁表單下載成Excel?

- 7月 30, 2021

透過PHP header設定將網頁表單下載成Excel． <?php header('Content-type:application/vnd.ms-excel'); header('Content-Disposition: attachment; filename=myTest.xls'); ?> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .text { mso-number-format:\@; } </style> </head> <body> <table border="1"> <tr> <td>Title 1</td> <td>Title 2</td> <td>Title 3</td> <td>Title 4</td> </tr> <tr> <td class="text">02224567</td> <td>a2</td> <td>a3</td> <td>a4<

如何使用JWT?

- 7月 30, 2021

JWT(JSON Web Tokens)，是一種基於JSON 的開放標準RFC 7519進行傳遞訊息的方式。JWT是由Header、Payload、Signature所組成為一串字串，因此JWT最後會像是xxxx.yyyyy.zzzzz。 Header Header包含雜湊演算法類型及token的種類，Freshdesk用的是RS256。 { "alg": "RS256", "typ": "JWT"} Playload Playload包含身份資訊或是其他要傳遞的資訊。雖然被編譯過，但依舊能轉換回來，因此建議不要將密碼等隱私資料放到JWT的Header、Playload中。 { "sub": "1234567890", "email": "messi@awesomecompany.com", "nonce": "123422" } Signature 要建立Signature，需透過編碼後的Header、Playload與私鑰產生。 # generate RSA key ssh-keygen -t rsa -b 1024 -m PEM -f jwtRS256.key # use empty passphrase openssl rsa -in jwtRS256.key -pubout -outform PEM -out jwtRS256.key.pub JWT SSO流程使用者嘗試登入Freshworks帳戶。 Freshworks判斷該用戶使用JWT SSO進行登入，用戶將被導向驗證身份的網址，以及client_id、state 和 nonce的請求參數。驗證用戶身份。身份提供者驗證用戶身份並產生JWT。將產生的JWT回傳Freshworks。 Freshworks驗證JWT(公鑰私鑰)是否正確，如果有效便會用Token中使用者的身份登入。實作用的是PHP-JWT提供的套件來設定JWT參數。 $pkeyid = [私鑰]; $payload = array( 'sub' => $Worker_ERPI